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} /> ))}