diff --git a/frontend/components/DocumentList/DocumentList.js b/frontend/components/DocumentList/DocumentList.js
index 583c0c662..bfd0b2d43 100644
--- a/frontend/components/DocumentList/DocumentList.js
+++ b/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 {
{this.props.documents &&
this.props.documents.map(document => (
-
+
))}
);
diff --git a/frontend/components/DocumentPreview/DocumentPreview.js b/frontend/components/DocumentPreview/DocumentPreview.js
index aef5e09b3..6b974e20d 100644
--- a/frontend/components/DocumentPreview/DocumentPreview.js
+++ b/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 (
+ {document.title}
-
);
}
diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js
index 302dbbb60..4890fc969 100644
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -106,7 +106,7 @@ type Props = {
Search
- Dashboard
+ Home
Starred
diff --git a/frontend/components/PublishingInfo/PublishingInfo.js b/frontend/components/PublishingInfo/PublishingInfo.js
index 1cd946bec..166c23fc4 100644
--- a/frontend/components/PublishingInfo/PublishingInfo.js
+++ b/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,
+ collaborators?: Array,
createdAt: string,
createdBy: User,
updatedAt: string,
@@ -35,13 +35,16 @@ class PublishingInfo extends Component {
};
render() {
+ const { collaborators } = this.props;
+
return (
-
- {this.props.collaborators.map(user => (
-
- ))}
-
+ {collaborators &&
+
+ {collaborators.map(user => (
+
+ ))}
+ }
{this.props.createdBy.name}
{' '}
diff --git a/frontend/scenes/Dashboard/Dashboard.js b/frontend/scenes/Dashboard/Dashboard.js
index d470b9da3..5eccaafca 100644
--- a/frontend/scenes/Dashboard/Dashboard.js
+++ b/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 (
Home
-
- {!collections.isLoaded
- ?
- : collections.data.map(collection => (
-
- ))}
-
+ Recently viewed
+
+
);
}
}
-export default inject('collections')(Dashboard);
+export default Dashboard;
diff --git a/frontend/scenes/Dashboard/RecentDocumentsStore.js b/frontend/scenes/Dashboard/RecentDocumentsStore.js
new file mode 100644
index 000000000..8b955bdcf
--- /dev/null
+++ b/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 = [];
+ @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;
diff --git a/frontend/scenes/Search/Search.js b/frontend/scenes/Search/Search.js
index 543992e68..34c35b22e 100644
--- a/frontend/scenes/Search/Search.js
+++ b/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}
/>
))}