From 2f681b1ce8b46ba47521bf8ab42b842e8b711f4e Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 9 Aug 2018 23:14:51 -0700
Subject: [PATCH 1/3] WIP: Dashboard tabs

---
 .../components/PublishingInfo.js              |  20 ++-
 app/components/Sidebar/Main.js                |   2 +-
 .../Sidebar/components/SidebarLink.js         |   4 +-
 app/components/Tab.js                         |  26 ++++
 app/components/Tabs.js                        |  10 ++
 app/index.js                                  | 122 +-----------------
 app/routes.js                                 |  78 +++++++++++
 app/scenes/Dashboard.js                       |  47 ++++---
 app/stores/DocumentsStore.js                  |  20 ++-
 9 files changed, 182 insertions(+), 147 deletions(-)
 create mode 100644 app/components/Tab.js
 create mode 100644 app/components/Tabs.js
 create mode 100644 app/routes.js

diff --git a/app/components/DocumentPreview/components/PublishingInfo.js b/app/components/DocumentPreview/components/PublishingInfo.js
index 34ed11055..11f2254a7 100644
--- a/app/components/DocumentPreview/components/PublishingInfo.js
+++ b/app/components/DocumentPreview/components/PublishingInfo.js
@@ -24,7 +24,13 @@ type Props = {
 };
 
 function PublishingInfo({ collection, document }: Props) {
-  const { modifiedSinceViewed, updatedAt, updatedBy, publishedAt } = document;
+  const {
+    modifiedSinceViewed,
+    updatedAt,
+    updatedBy,
+    publishedAt,
+    isDraft,
+  } = document;
 
   return (
     <Container align="center">
@@ -35,20 +41,20 @@ function PublishingInfo({ collection, document }: Props) {
       ) : (
         <React.Fragment>
           {updatedBy.name}
-          {publishedAt ? (
-            <Modified highlight={modifiedSinceViewed}>
-              &nbsp;modified <Time dateTime={updatedAt} /> ago
-            </Modified>
-          ) : (
+          {isDraft ? (
             <span>
               &nbsp;saved <Time dateTime={updatedAt} /> ago
             </span>
+          ) : (
+            <Modified highlight={modifiedSinceViewed}>
+              &nbsp;modified <Time dateTime={updatedAt} /> ago
+            </Modified>
           )}
         </React.Fragment>
       )}
       {collection && (
         <span>
-          &nbsp;in <strong>{collection.name}</strong>
+          &nbsp;in <strong>{isDraft ? 'Drafts' : collection.name}</strong>
         </span>
       )}
     </Container>
diff --git a/app/components/Sidebar/Main.js b/app/components/Sidebar/Main.js
index 1b126e0b1..f56d29f7b 100644
--- a/app/components/Sidebar/Main.js
+++ b/app/components/Sidebar/Main.js
@@ -56,7 +56,7 @@ class MainSidebar extends React.Component<Props> {
         <Flex auto column>
           <Scrollable shadow>
             <Section>
-              <SidebarLink to="/dashboard" icon={<HomeIcon />}>
+              <SidebarLink to="/dashboard" icon={<HomeIcon />} exact={false}>
                 Home
               </SidebarLink>
               <SidebarLink to="/search" icon={<SearchIcon />}>
diff --git a/app/components/Sidebar/components/SidebarLink.js b/app/components/Sidebar/components/SidebarLink.js
index 0ca4c3c9e..cd643e8d8 100644
--- a/app/components/Sidebar/components/SidebarLink.js
+++ b/app/components/Sidebar/components/SidebarLink.js
@@ -52,6 +52,7 @@ type Props = {
   iconColor?: string,
   active?: boolean,
   theme: Object,
+  exact?: boolean,
 };
 
 @observer
@@ -100,6 +101,7 @@ class SidebarLink extends React.Component<Props> {
       menu,
       menuOpen,
       hideExpandToggle,
+      exact,
     } = this.props;
     const Component = to ? StyledNavLink : StyledDiv;
     const showExpandIcon =
@@ -113,7 +115,7 @@ class SidebarLink extends React.Component<Props> {
           style={active ? this.activeStyle : undefined}
           onClick={onClick}
           to={to}
-          exact
+          exact={exact !== false}
         >
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {showExpandIcon && (
diff --git a/app/components/Tab.js b/app/components/Tab.js
new file mode 100644
index 000000000..fab0f010e
--- /dev/null
+++ b/app/components/Tab.js
@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+import { NavLink } from 'react-router-dom';
+
+const NavItem = styled(NavLink)`
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: ${props => props.theme.slate};
+  letter-spacing: 0.04em;
+  margin-right: 20px;
+  padding-bottom: 8px;
+`;
+
+function Tab(props: *) {
+  const activeStyle = {
+    paddingBottom: '5px',
+    borderBottom: `3px solid ${props.theme.slateLight}`,
+  };
+
+  return <NavItem {...props} activeStyle={activeStyle} />;
+}
+
+export default withTheme(Tab);
diff --git a/app/components/Tabs.js b/app/components/Tabs.js
new file mode 100644
index 000000000..78fd63123
--- /dev/null
+++ b/app/components/Tabs.js
@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+
+const Tabs = styled.nav`
+  border-bottom: 1px solid ${props => props.theme.slateLight};
+  margin-top: 22px;
+  margin-bottom: 10px;
+`;
+
+export default Tabs;
diff --git a/app/index.js b/app/index.js
index 8a92ce64c..3f9b7b277 100644
--- a/app/index.js
+++ b/app/index.js
@@ -3,54 +3,23 @@ import * as React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'mobx-react';
 import { ThemeProvider } from 'styled-components';
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Redirect,
-} from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 
 import stores from 'stores';
 import theme from 'shared/styles/theme';
 import globalStyles from 'shared/styles/globals';
 import 'shared/styles/prism.css';
 
-import Home from 'scenes/Home';
-import Dashboard from 'scenes/Dashboard';
-import Starred from 'scenes/Starred';
-import Drafts from 'scenes/Drafts';
-import Collection from 'scenes/Collection';
-import Document from 'scenes/Document';
-import Search from 'scenes/Search';
-import Settings from 'scenes/Settings';
-import Details from 'scenes/Settings/Details';
-import People from 'scenes/Settings/People';
-import Slack from 'scenes/Settings/Slack';
-import Shares from 'scenes/Settings/Shares';
-import Tokens from 'scenes/Settings/Tokens';
-import Export from 'scenes/Settings/Export';
-import Error404 from 'scenes/Error404';
-
 import ErrorBoundary from 'components/ErrorBoundary';
 import ScrollToTop from 'components/ScrollToTop';
 import ScrollToAnchor from 'components/ScrollToAnchor';
-import Layout from 'components/Layout';
-import Auth from 'components/Auth';
-import RouteSidebarHidden from 'components/RouteSidebarHidden';
-
-import { matchDocumentSlug } from 'utils/routeHelpers';
+import Routes from './routes';
 
 let DevTools;
 if (__DEV__) {
   DevTools = require('mobx-react-devtools').default; // eslint-disable-line global-require
 }
 
-const notFoundSearch = () => <Search notFound />;
-const DocumentNew = () => <Document newDocument />;
-const RedirectDocument = ({ match }: { match: Object }) => (
-  <Redirect to={`/doc/${match.params.documentSlug}`} />
-);
-
 globalStyles();
 
 const element = document.getElementById('root');
@@ -64,92 +33,7 @@ if (element) {
             <Router>
               <ScrollToTop>
                 <ScrollToAnchor>
-                  <Switch>
-                    <Route exact path="/" component={Home} />
-                    <Route exact path="/share/:shareId" component={Document} />
-                    <Auth>
-                      <Layout>
-                        <Switch>
-                          <Route
-                            exact
-                            path="/dashboard"
-                            component={Dashboard}
-                          />
-                          <Route exact path="/starred" component={Starred} />
-                          <Route exact path="/drafts" component={Drafts} />
-                          <Route exact path="/settings" component={Settings} />
-                          <Route
-                            exact
-                            path="/settings/details"
-                            component={Details}
-                          />
-                          <Route
-                            exact
-                            path="/settings/people"
-                            component={People}
-                          />
-                          <Route
-                            exact
-                            path="/settings/shares"
-                            component={Shares}
-                          />
-                          <Route
-                            exact
-                            path="/settings/tokens"
-                            component={Tokens}
-                          />
-                          <Route
-                            exact
-                            path="/settings/integrations/slack"
-                            component={Slack}
-                          />
-                          <Route
-                            exact
-                            path="/settings/export"
-                            component={Export}
-                          />
-                          <Route
-                            exact
-                            path="/collections/:id"
-                            component={Collection}
-                          />
-                          <Route
-                            exact
-                            path={`/d/${matchDocumentSlug}`}
-                            component={RedirectDocument}
-                          />
-                          <Route
-                            exact
-                            path={`/doc/${matchDocumentSlug}`}
-                            component={Document}
-                          />
-                          <Route
-                            exact
-                            path={`/doc/${matchDocumentSlug}/move`}
-                            component={Document}
-                          />
-                          <Route exact path="/search" component={Search} />
-                          <Route
-                            exact
-                            path="/search/:query"
-                            component={Search}
-                          />
-                          <Route path="/404" component={Error404} />
-                          <RouteSidebarHidden
-                            exact
-                            path={`/doc/${matchDocumentSlug}/edit`}
-                            component={Document}
-                          />
-                          <RouteSidebarHidden
-                            exact
-                            path="/collections/:id/new"
-                            component={DocumentNew}
-                          />
-                          <Route component={notFoundSearch} />
-                        </Switch>
-                      </Layout>
-                    </Auth>
-                  </Switch>
+                  <Routes />
                 </ScrollToAnchor>
               </ScrollToTop>
             </Router>
diff --git a/app/routes.js b/app/routes.js
new file mode 100644
index 000000000..b2be2b839
--- /dev/null
+++ b/app/routes.js
@@ -0,0 +1,78 @@
+// @flow
+import * as React from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+
+import Home from 'scenes/Home';
+import Dashboard from 'scenes/Dashboard';
+import Starred from 'scenes/Starred';
+import Drafts from 'scenes/Drafts';
+import Collection from 'scenes/Collection';
+import Document from 'scenes/Document';
+import Search from 'scenes/Search';
+import Settings from 'scenes/Settings';
+import Details from 'scenes/Settings/Details';
+import People from 'scenes/Settings/People';
+import Slack from 'scenes/Settings/Slack';
+import Shares from 'scenes/Settings/Shares';
+import Tokens from 'scenes/Settings/Tokens';
+import Export from 'scenes/Settings/Export';
+import Error404 from 'scenes/Error404';
+
+import Layout from 'components/Layout';
+import Auth from 'components/Auth';
+import RouteSidebarHidden from 'components/RouteSidebarHidden';
+import { matchDocumentSlug as slug } from 'utils/routeHelpers';
+
+const NotFound = () => <Search notFound />;
+const DocumentNew = () => <Document newDocument />;
+const RedirectDocument = ({ match }: { match: Object }) => (
+  <Redirect to={`/doc/${match.params.documentSlug}`} />
+);
+
+export default function Routes() {
+  return (
+    <Switch>
+      <Route exact path="/" component={Home} />
+      <Route exact path="/share/:shareId" component={Document} />
+      <Auth>
+        <Layout>
+          <Switch>
+            <Route path="/dashboard/:tab" component={Dashboard} />
+            <Route path="/dashboard" component={Dashboard} />
+            <Route exact path="/starred" component={Starred} />
+            <Route exact path="/drafts" component={Drafts} />
+            <Route exact path="/settings" component={Settings} />
+            <Route exact path="/settings/details" component={Details} />
+            <Route exact path="/settings/people" component={People} />
+            <Route exact path="/settings/shares" component={Shares} />
+            <Route exact path="/settings/tokens" component={Tokens} />
+            <Route
+              exact
+              path="/settings/integrations/slack"
+              component={Slack}
+            />
+            <Route exact path="/settings/export" component={Export} />
+            <Route exact path="/collections/:id" component={Collection} />
+            <Route exact path={`/d/${slug}`} component={RedirectDocument} />
+            <Route exact path={`/doc/${slug}`} component={Document} />
+            <Route exact path={`/doc/${slug}/move`} component={Document} />
+            <Route exact path="/search" component={Search} />
+            <Route exact path="/search/:query" component={Search} />
+            <Route path="/404" component={Error404} />
+            <RouteSidebarHidden
+              exact
+              path={`/doc/${slug}/edit`}
+              component={Document}
+            />
+            <RouteSidebarHidden
+              exact
+              path="/collections/:id/new"
+              component={DocumentNew}
+            />
+            <Route component={NotFound} />
+          </Switch>
+        </Layout>
+      </Auth>
+    </Switch>
+  );
+}
diff --git a/app/scenes/Dashboard.js b/app/scenes/Dashboard.js
index 5b0a5ea02..d5ca3ddfc 100644
--- a/app/scenes/Dashboard.js
+++ b/app/scenes/Dashboard.js
@@ -1,20 +1,25 @@
 // @flow
 import * as React from 'react';
+import { Switch, Route } from 'react-router-dom';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { NewDocumentIcon } from 'outline-icons';
 
 import DocumentsStore from 'stores/DocumentsStore';
+import AuthStore from 'stores/AuthStore';
 import NewDocumentMenu from 'menus/NewDocumentMenu';
 import Actions, { Action } from 'components/Actions';
 import CenteredContent from 'components/CenteredContent';
 import DocumentList from 'components/DocumentList';
 import PageTitle from 'components/PageTitle';
 import Subheading from 'components/Subheading';
+import Tabs from 'components/Tabs';
+import Tab from 'components/Tab';
 import { ListPlaceholder } from 'components/LoadingPlaceholder';
 
 type Props = {
   documents: DocumentsStore,
+  auth: AuthStore,
 };
 
 @observer
@@ -27,16 +32,20 @@ class Dashboard extends React.Component<Props> {
 
   loadContent = async () => {
     await Promise.all([
-      this.props.documents.fetchRecentlyModified({ limit: 5 }),
-      this.props.documents.fetchRecentlyViewed({ limit: 5 }),
+      this.props.documents.fetchRecentlyModified({ limit: 15 }),
+      this.props.documents.fetchRecentlyViewed({ limit: 15 }),
     ]);
     this.isLoaded = true;
   };
 
   render() {
-    const { documents } = this.props;
+    const { documents, auth } = this.props;
+    if (!auth.user) return;
+
     const hasRecentlyViewed = documents.recentlyViewed.length > 0;
     const hasRecentlyEdited = documents.recentlyEdited.length > 0;
+
+    const owned = documents.owned(auth.user.id);
     const showContent =
       this.isLoaded || (hasRecentlyViewed && hasRecentlyEdited);
 
@@ -44,28 +53,34 @@ class Dashboard extends React.Component<Props> {
       <CenteredContent>
         <PageTitle title="Home" />
         <h1>Home</h1>
+        <Tabs>
+          <Tab to="/dashboard" exact>
+            Recently edited
+          </Tab>
+          <Tab to="/dashboard/recent" exact>
+            Recently viewed
+          </Tab>
+          <Tab to="/dashboard/owned">Created by me</Tab>
+        </Tabs>
         {showContent ? (
           <React.Fragment>
-            {hasRecentlyViewed && (
-              <React.Fragment>
-                <Subheading key="viewed">Recently viewed</Subheading>
+            <Switch>
+              <Route path="/dashboard/recent">
                 <DocumentList
-                  key="viewedDocuments"
                   documents={documents.recentlyViewed}
                   showCollection
                 />
-              </React.Fragment>
-            )}
-            {hasRecentlyEdited && (
-              <React.Fragment>
-                <Subheading key="edited">Recently edited</Subheading>
+              </Route>
+              <Route path="/dashboard/owned">
+                <DocumentList documents={owned} showCollection />
+              </Route>
+              <Route path="/dashboard">
                 <DocumentList
-                  key="editedDocuments"
                   documents={documents.recentlyEdited}
                   showCollection
                 />
-              </React.Fragment>
-            )}
+              </Route>
+            </Switch>
             <Actions align="center" justify="flex-end">
               <Action>
                 <NewDocumentMenu label={<NewDocumentIcon />} />
@@ -80,4 +95,4 @@ class Dashboard extends React.Component<Props> {
   }
 }
 
-export default inject('documents')(Dashboard);
+export default inject('documents', 'auth')(Dashboard);
diff --git a/app/stores/DocumentsStore.js b/app/stores/DocumentsStore.js
index dbe746f54..dea90d0ed 100644
--- a/app/stores/DocumentsStore.js
+++ b/app/stores/DocumentsStore.js
@@ -29,10 +29,8 @@ class DocumentsStore extends BaseStore {
 
   ui: UiStore;
 
-  /* Computed */
-
   @computed
-  get recentlyViewed(): Array<Document> {
+  get recentlyViewed(): Document[] {
     const docs = [];
     this.recentlyViewedIds.forEach(id => {
       const doc = this.getById(id);
@@ -51,6 +49,17 @@ class DocumentsStore extends BaseStore {
     return docs;
   }
 
+  owned(userId: string): Document[] {
+    return _.orderBy(
+      _.filter(
+        this.data.values(),
+        document => document.createdBy.id === userId
+      ),
+      'updatedAt',
+      'desc'
+    );
+  }
+
   pinnedInCollection(collectionId: string): Document[] {
     return _.filter(
       this.recentlyEditedInCollection(collectionId),
@@ -152,6 +161,11 @@ class DocumentsStore extends BaseStore {
     await this.fetchPage('pinned', options);
   };
 
+  @action
+  fetchOwned = async (options: ?PaginationParams): Promise<*> => {
+    await this.fetchPage('owned', options);
+  };
+
   @action
   search = async (
     query: string,

From 266b4d735c912c8bf649ca8459f952831c1f8a50 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 10 Aug 2018 00:11:58 -0700
Subject: [PATCH 2/3] Tidy, tidy

---
 .../components/PublishingInfo.js              |  3 +-
 app/scenes/Dashboard.js                       | 66 ++++++++-----------
 app/stores/DocumentsStore.js                  |  2 +-
 server/api/documents.js                       |  8 +--
 4 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/app/components/DocumentPreview/components/PublishingInfo.js b/app/components/DocumentPreview/components/PublishingInfo.js
index 11f2254a7..1adfcb46b 100644
--- a/app/components/DocumentPreview/components/PublishingInfo.js
+++ b/app/components/DocumentPreview/components/PublishingInfo.js
@@ -31,10 +31,11 @@ function PublishingInfo({ collection, document }: Props) {
     publishedAt,
     isDraft,
   } = document;
+  const neverUpdated = publishedAt === updatedAt;
 
   return (
     <Container align="center">
-      {publishedAt && publishedAt === updatedAt ? (
+      {publishedAt && neverUpdated ? (
         <span>
           {updatedBy.name} published <Time dateTime={publishedAt} /> ago
         </span>
diff --git a/app/scenes/Dashboard.js b/app/scenes/Dashboard.js
index d5ca3ddfc..0c6f67f6e 100644
--- a/app/scenes/Dashboard.js
+++ b/app/scenes/Dashboard.js
@@ -12,7 +12,6 @@ import Actions, { Action } from 'components/Actions';
 import CenteredContent from 'components/CenteredContent';
 import DocumentList from 'components/DocumentList';
 import PageTitle from 'components/PageTitle';
-import Subheading from 'components/Subheading';
 import Tabs from 'components/Tabs';
 import Tab from 'components/Tab';
 import { ListPlaceholder } from 'components/LoadingPlaceholder';
@@ -31,23 +30,34 @@ class Dashboard extends React.Component<Props> {
   }
 
   loadContent = async () => {
+    const { auth } = this.props;
+    const user = auth.user ? auth.user.id : undefined;
+
     await Promise.all([
       this.props.documents.fetchRecentlyModified({ limit: 15 }),
       this.props.documents.fetchRecentlyViewed({ limit: 15 }),
+      this.props.documents.fetchOwned({ limit: 15, user }),
     ]);
     this.isLoaded = true;
   };
 
+  renderTab = (path, documents) => {
+    return (
+      <Route path={path}>
+        {this.isLoaded || documents.length ? (
+          <DocumentList documents={documents} showCollection />
+        ) : (
+          <ListPlaceholder count={5} />
+        )}
+      </Route>
+    );
+  };
+
   render() {
     const { documents, auth } = this.props;
     if (!auth.user) return;
 
-    const hasRecentlyViewed = documents.recentlyViewed.length > 0;
-    const hasRecentlyEdited = documents.recentlyEdited.length > 0;
-
-    const owned = documents.owned(auth.user.id);
-    const showContent =
-      this.isLoaded || (hasRecentlyViewed && hasRecentlyEdited);
+    const createdDocuments = documents.owned(auth.user.id);
 
     return (
       <CenteredContent>
@@ -55,41 +65,23 @@ class Dashboard extends React.Component<Props> {
         <h1>Home</h1>
         <Tabs>
           <Tab to="/dashboard" exact>
-            Recently edited
+            Recently updated
           </Tab>
           <Tab to="/dashboard/recent" exact>
             Recently viewed
           </Tab>
-          <Tab to="/dashboard/owned">Created by me</Tab>
+          <Tab to="/dashboard/created">Created by me</Tab>
         </Tabs>
-        {showContent ? (
-          <React.Fragment>
-            <Switch>
-              <Route path="/dashboard/recent">
-                <DocumentList
-                  documents={documents.recentlyViewed}
-                  showCollection
-                />
-              </Route>
-              <Route path="/dashboard/owned">
-                <DocumentList documents={owned} showCollection />
-              </Route>
-              <Route path="/dashboard">
-                <DocumentList
-                  documents={documents.recentlyEdited}
-                  showCollection
-                />
-              </Route>
-            </Switch>
-            <Actions align="center" justify="flex-end">
-              <Action>
-                <NewDocumentMenu label={<NewDocumentIcon />} />
-              </Action>
-            </Actions>
-          </React.Fragment>
-        ) : (
-          <ListPlaceholder count={5} />
-        )}
+        <Switch>
+          {this.renderTab('/dashboard/recent', documents.recentlyViewed)}
+          {this.renderTab('/dashboard/created', createdDocuments)}
+          {this.renderTab('/dashboard', documents.recentlyEdited)}
+        </Switch>
+        <Actions align="center" justify="flex-end">
+          <Action>
+            <NewDocumentMenu label={<NewDocumentIcon />} />
+          </Action>
+        </Actions>
       </CenteredContent>
     );
   }
diff --git a/app/stores/DocumentsStore.js b/app/stores/DocumentsStore.js
index dea90d0ed..79c1e3b9a 100644
--- a/app/stores/DocumentsStore.js
+++ b/app/stores/DocumentsStore.js
@@ -163,7 +163,7 @@ class DocumentsStore extends BaseStore {
 
   @action
   fetchOwned = async (options: ?PaginationParams): Promise<*> => {
-    await this.fetchPage('owned', options);
+    await this.fetchPage('list', options);
   };
 
   @action
diff --git a/server/api/documents.js b/server/api/documents.js
index 5c3f55130..f582275b3 100644
--- a/server/api/documents.js
+++ b/server/api/documents.js
@@ -14,14 +14,14 @@ const { authorize, cannot } = policy;
 const router = new Router();
 
 router.post('documents.list', auth(), pagination(), async ctx => {
-  let { sort = 'updatedAt', direction, collection } = ctx.body;
+  let { sort = 'updatedAt', direction, collection, user } = ctx.body;
   if (direction !== 'ASC') direction = 'DESC';
 
-  const user = ctx.state.user;
-  let where = { teamId: user.teamId };
+  let where = { teamId: ctx.state.user.teamId };
   if (collection) where = { ...where, collectionId: collection };
+  if (user) where = { ...where, userId: collection };
 
-  const starredScope = { method: ['withStarred', user.id] };
+  const starredScope = { method: ['withStarred', ctx.state.user.id] };
   const documents = await Document.scope('defaultScope', starredScope).findAll({
     where,
     order: [[sort, direction]],

From d308442fef9a4c6f91d9a636c8682cdee7eff602 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 10 Aug 2018 23:03:47 -0700
Subject: [PATCH 3/3] Refactor, paginate on scroll New PaginatedDocumentList
 component

---
 app/components/DocumentList.js              | 34 +++++++++
 app/components/DocumentList/DocumentList.js | 37 ----------
 app/components/DocumentList/index.js        |  3 -
 app/components/PaginatedDocumentList.js     | 78 +++++++++++++++++++++
 app/scenes/Collection.js                    |  2 +-
 app/scenes/Dashboard.js                     | 61 ++++++----------
 app/stores/DocumentsStore.js                | 30 ++++----
 server/api/documents.js                     |  2 +-
 8 files changed, 152 insertions(+), 95 deletions(-)
 create mode 100644 app/components/DocumentList.js
 delete mode 100644 app/components/DocumentList/DocumentList.js
 delete mode 100644 app/components/DocumentList/index.js
 create mode 100644 app/components/PaginatedDocumentList.js

diff --git a/app/components/DocumentList.js b/app/components/DocumentList.js
new file mode 100644
index 000000000..78c67d7f4
--- /dev/null
+++ b/app/components/DocumentList.js
@@ -0,0 +1,34 @@
+// @flow
+import * as React from 'react';
+import Document from 'models/Document';
+import DocumentPreview from 'components/DocumentPreview';
+import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
+
+type Props = {
+  documents: Document[],
+  showCollection?: boolean,
+  limit?: number,
+};
+
+export default function DocumentList({
+  limit,
+  showCollection,
+  documents,
+}: Props) {
+  const items = limit ? documents.splice(0, limit) : documents;
+
+  return (
+    <ArrowKeyNavigation
+      mode={ArrowKeyNavigation.mode.VERTICAL}
+      defaultActiveChildIndex={0}
+    >
+      {items.map(document => (
+        <DocumentPreview
+          key={document.id}
+          document={document}
+          showCollection={showCollection}
+        />
+      ))}
+    </ArrowKeyNavigation>
+  );
+}
diff --git a/app/components/DocumentList/DocumentList.js b/app/components/DocumentList/DocumentList.js
deleted file mode 100644
index 97e53008a..000000000
--- a/app/components/DocumentList/DocumentList.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// @flow
-import * as React from 'react';
-import Document from 'models/Document';
-import DocumentPreview from 'components/DocumentPreview';
-import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
-
-type Props = {
-  documents: Document[],
-  showCollection?: boolean,
-  limit?: number,
-};
-
-class DocumentList extends React.Component<Props> {
-  render() {
-    const { limit, showCollection } = this.props;
-    const documents = limit
-      ? this.props.documents.splice(0, limit)
-      : this.props.documents;
-
-    return (
-      <ArrowKeyNavigation
-        mode={ArrowKeyNavigation.mode.VERTICAL}
-        defaultActiveChildIndex={0}
-      >
-        {documents.map(document => (
-          <DocumentPreview
-            key={document.id}
-            document={document}
-            showCollection={showCollection}
-          />
-        ))}
-      </ArrowKeyNavigation>
-    );
-  }
-}
-
-export default DocumentList;
diff --git a/app/components/DocumentList/index.js b/app/components/DocumentList/index.js
deleted file mode 100644
index 35fb670b4..000000000
--- a/app/components/DocumentList/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// @flow
-import DocumentList from './DocumentList';
-export default DocumentList;
diff --git a/app/components/PaginatedDocumentList.js b/app/components/PaginatedDocumentList.js
new file mode 100644
index 000000000..1ad102e5c
--- /dev/null
+++ b/app/components/PaginatedDocumentList.js
@@ -0,0 +1,78 @@
+// @flow
+import * as React from 'react';
+import { observable, action } from 'mobx';
+import { observer } from 'mobx-react';
+import Waypoint from 'react-waypoint';
+
+import { DEFAULT_PAGINATION_LIMIT } from 'stores/DocumentsStore';
+import Document from 'models/Document';
+import DocumentList from 'components/DocumentList';
+import { ListPlaceholder } from 'components/LoadingPlaceholder';
+
+type Props = {
+  showCollection?: boolean,
+  documents: Document[],
+  fetch: (options: ?Object) => Promise<*>,
+  options?: Object,
+};
+
+@observer
+class PaginatedDocumentList extends React.Component<Props> {
+  @observable isLoaded: boolean = false;
+  @observable isFetching: boolean = false;
+  @observable offset: number = 0;
+  @observable allowLoadMore: boolean = true;
+
+  componentDidMount() {
+    this.fetchResults();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.fetch !== this.props.fetch) {
+      this.fetchResults();
+    }
+  }
+
+  fetchResults = async () => {
+    this.isFetching = true;
+
+    const limit = DEFAULT_PAGINATION_LIMIT;
+    const results = await this.props.fetch({ limit, ...this.props.options });
+
+    if (
+      results &&
+      (results.length === 0 || results.length < DEFAULT_PAGINATION_LIMIT)
+    ) {
+      this.allowLoadMore = false;
+    } else {
+      this.offset += DEFAULT_PAGINATION_LIMIT;
+    }
+
+    this.isLoaded = true;
+    this.isFetching = false;
+  };
+
+  @action
+  loadMoreResults = async () => {
+    // Don't paginate if there aren't more results or we’re in the middle of fetching
+    if (!this.allowLoadMore || this.isFetching) return;
+    await this.fetchResults();
+  };
+
+  render() {
+    const { showCollection, documents } = this.props;
+
+    return this.isLoaded || documents.length ? (
+      <React.Fragment>
+        <DocumentList documents={documents} showCollection={showCollection} />
+        {this.allowLoadMore && (
+          <Waypoint key={this.offset} onEnter={this.loadMoreResults} />
+        )}
+      </React.Fragment>
+    ) : (
+      <ListPlaceholder count={5} />
+    );
+  }
+}
+
+export default PaginatedDocumentList;
diff --git a/app/scenes/Collection.js b/app/scenes/Collection.js
index 1de8ea2a5..99cd8e2da 100644
--- a/app/scenes/Collection.js
+++ b/app/scenes/Collection.js
@@ -61,7 +61,7 @@ class CollectionScene extends React.Component<Props> {
       this.collection = collection;
 
       await Promise.all([
-        this.props.documents.fetchRecentlyModified({
+        this.props.documents.fetchRecentlyEdited({
           limit: 10,
           collection: id,
         }),
diff --git a/app/scenes/Dashboard.js b/app/scenes/Dashboard.js
index 0c6f67f6e..38f98a1bc 100644
--- a/app/scenes/Dashboard.js
+++ b/app/scenes/Dashboard.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import { Switch, Route } from 'react-router-dom';
-import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { NewDocumentIcon } from 'outline-icons';
 
@@ -10,11 +9,10 @@ import AuthStore from 'stores/AuthStore';
 import NewDocumentMenu from 'menus/NewDocumentMenu';
 import Actions, { Action } from 'components/Actions';
 import CenteredContent from 'components/CenteredContent';
-import DocumentList from 'components/DocumentList';
 import PageTitle from 'components/PageTitle';
 import Tabs from 'components/Tabs';
 import Tab from 'components/Tab';
-import { ListPlaceholder } from 'components/LoadingPlaceholder';
+import PaginatedDocumentList from '../components/PaginatedDocumentList';
 
 type Props = {
   documents: DocumentsStore,
@@ -23,41 +21,10 @@ type Props = {
 
 @observer
 class Dashboard extends React.Component<Props> {
-  @observable isLoaded: boolean = false;
-
-  componentDidMount() {
-    this.loadContent();
-  }
-
-  loadContent = async () => {
-    const { auth } = this.props;
-    const user = auth.user ? auth.user.id : undefined;
-
-    await Promise.all([
-      this.props.documents.fetchRecentlyModified({ limit: 15 }),
-      this.props.documents.fetchRecentlyViewed({ limit: 15 }),
-      this.props.documents.fetchOwned({ limit: 15, user }),
-    ]);
-    this.isLoaded = true;
-  };
-
-  renderTab = (path, documents) => {
-    return (
-      <Route path={path}>
-        {this.isLoaded || documents.length ? (
-          <DocumentList documents={documents} showCollection />
-        ) : (
-          <ListPlaceholder count={5} />
-        )}
-      </Route>
-    );
-  };
-
   render() {
     const { documents, auth } = this.props;
     if (!auth.user) return;
-
-    const createdDocuments = documents.owned(auth.user.id);
+    const user = auth.user.id;
 
     return (
       <CenteredContent>
@@ -73,9 +40,27 @@ class Dashboard extends React.Component<Props> {
           <Tab to="/dashboard/created">Created by me</Tab>
         </Tabs>
         <Switch>
-          {this.renderTab('/dashboard/recent', documents.recentlyViewed)}
-          {this.renderTab('/dashboard/created', createdDocuments)}
-          {this.renderTab('/dashboard', documents.recentlyEdited)}
+          <Route path="/dashboard/recent">
+            <PaginatedDocumentList
+              key="recent"
+              documents={documents.recentlyViewed}
+              fetch={documents.fetchRecentlyViewed}
+            />
+          </Route>
+          <Route path="/dashboard/created">
+            <PaginatedDocumentList
+              key="created"
+              documents={documents.createdByUser(user)}
+              fetch={documents.fetchOwned}
+              options={{ user }}
+            />
+          </Route>
+          <Route path="/dashboard">
+            <PaginatedDocumentList
+              documents={documents.recentlyEdited}
+              fetch={documents.fetchRecentlyEdited}
+            />
+          </Route>
         </Switch>
         <Actions align="center" justify="flex-end">
           <Action>
diff --git a/app/stores/DocumentsStore.js b/app/stores/DocumentsStore.js
index 79c1e3b9a..eb940512b 100644
--- a/app/stores/DocumentsStore.js
+++ b/app/stores/DocumentsStore.js
@@ -21,8 +21,8 @@ type FetchOptions = {
 };
 
 class DocumentsStore extends BaseStore {
-  @observable recentlyViewedIds: Array<string> = [];
-  @observable recentlyEditedIds: Array<string> = [];
+  @observable recentlyViewedIds: string[] = [];
+  @observable recentlyEditedIds: string[] = [];
   @observable data: Map<string, Document> = new ObservableMap([]);
   @observable isLoaded: boolean = false;
   @observable isFetching: boolean = false;
@@ -49,7 +49,7 @@ class DocumentsStore extends BaseStore {
     return docs;
   }
 
-  owned(userId: string): Document[] {
+  createdByUser(userId: string): Document[] {
     return _.orderBy(
       _.filter(
         this.data.values(),
@@ -127,10 +127,10 @@ class DocumentsStore extends BaseStore {
   };
 
   @action
-  fetchRecentlyModified = async (options: ?PaginationParams): Promise<*> => {
+  fetchRecentlyEdited = async (options: ?PaginationParams): Promise<*> => {
     const data = await this.fetchPage('list', options);
 
-    runInAction('DocumentsStore#fetchRecentlyModified', () => {
+    runInAction('DocumentsStore#fetchRecentlyEdited', () => {
       this.recentlyEditedIds = _.map(data, 'id');
     });
     return data;
@@ -147,23 +147,23 @@ class DocumentsStore extends BaseStore {
   };
 
   @action
-  fetchStarred = async (options: ?PaginationParams): Promise<*> => {
-    await this.fetchPage('starred', options);
+  fetchStarred = (options: ?PaginationParams): Promise<*> => {
+    return this.fetchPage('starred', options);
   };
 
   @action
-  fetchDrafts = async (options: ?PaginationParams): Promise<*> => {
-    await this.fetchPage('drafts', options);
+  fetchDrafts = (options: ?PaginationParams): Promise<*> => {
+    return this.fetchPage('drafts', options);
   };
 
   @action
-  fetchPinned = async (options: ?PaginationParams): Promise<*> => {
-    await this.fetchPage('pinned', options);
+  fetchPinned = (options: ?PaginationParams): Promise<*> => {
+    return this.fetchPage('pinned', options);
   };
 
   @action
-  fetchOwned = async (options: ?PaginationParams): Promise<*> => {
-    await this.fetchPage('list', options);
+  fetchOwned = (options: ?PaginationParams): Promise<*> => {
+    return this.fetchPage('list', options);
   };
 
   @action
@@ -275,11 +275,11 @@ class DocumentsStore extends BaseStore {
 
     // Re-fetch dashboard content so that we don't show deleted documents
     this.on('collections.delete', () => {
-      this.fetchRecentlyModified();
+      this.fetchRecentlyEdited();
       this.fetchRecentlyViewed();
     });
     this.on('documents.delete', () => {
-      this.fetchRecentlyModified();
+      this.fetchRecentlyEdited();
       this.fetchRecentlyViewed();
     });
   }
diff --git a/server/api/documents.js b/server/api/documents.js
index f582275b3..cccd902d3 100644
--- a/server/api/documents.js
+++ b/server/api/documents.js
@@ -19,7 +19,7 @@ router.post('documents.list', auth(), pagination(), async ctx => {
 
   let where = { teamId: ctx.state.user.teamId };
   if (collection) where = { ...where, collectionId: collection };
-  if (user) where = { ...where, userId: collection };
+  if (user) where = { ...where, createdById: user };
 
   const starredScope = { method: ['withStarred', ctx.state.user.id] };
   const documents = await Document.scope('defaultScope', starredScope).findAll({