Add recently viewed docs to dashboard

frontend/components/DocumentList/DocumentList.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import type { Document } from 'types';
 import DocumentPreview from 'components/DocumentPreview';
-import Divider from 'components/Divider';
 
 class DocumentList extends React.Component {
   props: {
@@ -14,10 +13,7 @@ class DocumentList extends React.Component {
       <div>
         {this.props.documents &&
           this.props.documents.map(document => (
-            <div>
             <DocumentPreview document={document} />
-              <Divider />
-            </div>
           ))}
       </div>
     );

frontend/components/DocumentPreview/DocumentPreview.js

@@ -1,21 +1,20 @@
 // @flow
 import React, { Component } from 'react';
-import { toJS } from 'mobx';
 import { Link } from 'react-router-dom';
 import type { Document } from 'types';
 import styled from 'styled-components';
 import { color } from 'styles/constants';
-import Markdown from 'components/Markdown';
 import PublishingInfo from 'components/PublishingInfo';
 
 type Props = {
   document: Document,
+  highlight?: string,
   innerRef?: Function,
 };
 
 const DocumentLink = styled(Link)`
   display: block;
-  margin: 16px -16px;
+  margin: 0 -16px;
   padding: 16px;
   border-radius: 8px;
   border: 2px solid transparent;
@@ -35,16 +34,11 @@ const DocumentLink = styled(Link)`
     border: 2px solid ${color.slateDark};
   }
 
-  h1 {
+  h3 {
     margin-top: 0;
   }
 `;
 
-// $FlowIssue
-const TruncatedMarkdown = styled(Markdown)`
-  pointer-events: none;
-`;
-
 class DocumentPreview extends Component {
   props: Props;
 
@@ -53,14 +47,13 @@ class DocumentPreview extends Component {
 
     return (
       <DocumentLink to={document.url} innerRef={innerRef} {...rest}>
+        <h3>{document.title}</h3>
         <PublishingInfo
           createdAt={document.createdAt}
           createdBy={document.createdBy}
           updatedAt={document.updatedAt}
           updatedBy={document.updatedBy}
-          collaborators={toJS(document.collaborators)}
         />
-        <TruncatedMarkdown text={document.text} limit={150} />
       </DocumentLink>
     );
   }

frontend/components/Layout/Layout.js

@@ -106,7 +106,7 @@ type Props = {
                   <SidebarLink to="/search">Search</SidebarLink>
                 </LinkSection>
                 <LinkSection>
-                  <SidebarLink to="/dashboard">Dashboard</SidebarLink>
+                  <SidebarLink to="/dashboard">Home</SidebarLink>
                   <SidebarLink to="/starred">Starred</SidebarLink>
                 </LinkSection>
                 <LinkSection>

frontend/components/PublishingInfo/PublishingInfo.js

@@ -7,7 +7,7 @@ import { Flex } from 'reflexbox';
 
 const Container = styled(Flex)`
   justify-content: space-between;
-  color: #ccc;
+  color: #bbb;
   font-size: 13px;
 `;
 
@@ -26,7 +26,7 @@ const Avatar = styled.img`
 
 class PublishingInfo extends Component {
   props: {
-    collaborators: Array<User>,
+    collaborators?: Array<User>,
     createdAt: string,
     createdBy: User,
     updatedAt: string,
@@ -35,13 +35,16 @@ class PublishingInfo extends Component {
   };
 
   render() {
+    const { collaborators } = this.props;
+
     return (
       <Container align="center">
+        {collaborators &&
           <Avatars>
-          {this.props.collaborators.map(user => (
+            {collaborators.map(user => (
               <Avatar key={user.id} src={user.avatarUrl} title={user.name} />
             ))}
-        </Avatars>
+          </Avatars>}
         <span>
           {this.props.createdBy.name}
           {' '}

frontend/scenes/Dashboard/Dashboard.js

@@ -1,38 +1,49 @@
 // @flow
 import React from 'react';
-import { observer, inject } from 'mobx-react';
-import { Flex } from 'reflexbox';
+import { observer } from 'mobx-react';
+import styled from 'styled-components';
 
-import CollectionsStore from 'stores/CollectionsStore';
+import DocumentList from 'components/DocumentList';
 import PageTitle from 'components/PageTitle';
-import Collection from 'components/Collection';
 import CenteredContent from 'components/CenteredContent';
-import PreviewLoading from 'components/PreviewLoading';
+import RecentDocumentsStore from './RecentDocumentsStore';
 
-type Props = {
-  collections: CollectionsStore,
-};
+const Subheading = styled.h3`
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: #9FA6AB;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 10px;
+`;
+
+type Props = {};
 
 @observer class Dashboard extends React.Component {
   props: Props;
+  store: RecentDocumentsStore;
+
+  constructor(props: Props) {
+    super(props);
+    this.store = new RecentDocumentsStore();
+  }
+
+  componentDidMount() {
+    this.store.fetchDocuments();
+  }
 
   render() {
-    const { collections } = this.props;
-
     return (
       <CenteredContent>
         <PageTitle title="Home" />
         <h1>Home</h1>
-        <Flex column auto>
-          {!collections.isLoaded
-            ? <PreviewLoading />
-            : collections.data.map(collection => (
-                <Collection key={collection.id} data={collection} />
-              ))}
-        </Flex>
+        <Subheading>Recently viewed</Subheading>
+        <DocumentList documents={this.store.documents} />
+
       </CenteredContent>
     );
   }
 }
 
-export default inject('collections')(Dashboard);
+export default Dashboard;

frontend/scenes/Dashboard/RecentDocumentsStore.js

@@ -0,0 +1,29 @@
+// @flow
+import { observable, action, runInAction } from 'mobx';
+import invariant from 'invariant';
+import { client } from 'utils/ApiClient';
+import type { Document } from 'types';
+
+class RecentDocumentsStore {
+  @observable documents: Array<Document> = [];
+  @observable isFetching = false;
+
+  @action fetchDocuments = async () => {
+    this.isFetching = true;
+
+    try {
+      const res = await client.get('/documents.viewed');
+      invariant(res && res.data, 'res or res.data missing');
+      const { data } = res;
+      runInAction('update state after fetching data', () => {
+        this.documents = data;
+      });
+    } catch (e) {
+      console.error('Something went wrong');
+    }
+
+    this.isFetching = false;
+  };
+}
+
+export default RecentDocumentsStore;

frontend/scenes/Search/Search.js

@@ -109,6 +109,7 @@ const ResultsWrapper = styled(Flex)`
                 innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)}
                 key={document.id}
                 document={document}
+                highlight={this.store.searchTerm}
               />
             ))}
           </ArrowKeyNavigation>