diff --git a/app/components/DocumentHistory/DocumentHistory.js b/app/components/DocumentHistory/DocumentHistory.js index 5d0e0f7ef..82cd35047 100644 --- a/app/components/DocumentHistory/DocumentHistory.js +++ b/app/components/DocumentHistory/DocumentHistory.js @@ -1,6 +1,5 @@ // @flow import * as React from 'react'; -import { withRouter } from 'react-router-dom'; import { observable, action } from 'mobx'; import { observer, inject } from 'mobx-react'; import styled from 'styled-components'; @@ -8,8 +7,9 @@ import Waypoint from 'react-waypoint'; import ArrowKeyNavigation from 'boundless-arrow-key-navigation'; import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore'; -import Document from 'models/Document'; +import DocumentsStore from 'stores/DocumentsStore'; import RevisionsStore from 'stores/RevisionsStore'; +import Document from 'models/Document'; import Flex from 'shared/components/Flex'; import { ListPlaceholder } from 'components/LoadingPlaceholder'; @@ -18,9 +18,8 @@ import { documentHistoryUrl } from 'utils/routeHelpers'; type Props = { match: Object, - document: Document, + documents: DocumentsStore, revisions: RevisionsStore, - revision?: Object, history: Object, }; @@ -30,13 +29,29 @@ class DocumentHistory extends React.Component { @observable isFetching: boolean = false; @observable offset: number = 0; @observable allowLoadMore: boolean = true; + @observable document: Document; + + constructor(props) { + super(); + this.document = props.documents.getByUrl(props.match.params.documentSlug); + } async componentDidMount() { - this.selectFirstRevision(); await this.loadMoreResults(); this.selectFirstRevision(); } + async componentWillReceiveProps(nextProps) { + const document = nextProps.documents.getByUrl( + nextProps.match.params.documentSlug + ); + if (!this.document && document) { + this.document = document; + await this.loadMoreResults(); + this.selectFirstRevision(); + } + } + fetchResults = async () => { this.isFetching = true; @@ -44,7 +59,7 @@ class DocumentHistory extends React.Component { const results = await this.props.revisions.fetchPage({ limit, offset: this.offset, - id: this.props.document.id, + id: this.document.id, }); if ( @@ -61,10 +76,9 @@ class DocumentHistory extends React.Component { }; selectFirstRevision = () => { - const revisions = this.revisions; - if (revisions.length && !this.props.revision) { + if (this.revisions.length) { this.props.history.replace( - documentHistoryUrl(this.props.document, this.revisions[0].id) + documentHistoryUrl(this.document, this.revisions[0].id) ); } }; @@ -72,12 +86,13 @@ class DocumentHistory extends React.Component { @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; + if (!this.allowLoadMore || this.isFetching || !this.document) return; await this.fetchResults(); }; get revisions() { - return this.props.revisions.getDocumentRevisions(this.props.document.id); + if (!this.document) return []; + return this.props.revisions.getDocumentRevisions(this.document.id); } render() { @@ -98,7 +113,7 @@ class DocumentHistory extends React.Component { ))} @@ -117,15 +132,10 @@ const Loading = styled.div` `; const Wrapper = styled(Flex)` - position: fixed; - top: 0; - right: 0; - bottom: 0; - min-width: ${props => props.theme.sidebarWidth}; border-left: 1px solid ${props => props.theme.slateLight}; overflow: scroll; overscroll-behavior: none; `; -export default withRouter(inject('revisions')(DocumentHistory)); +export default inject('documents', 'revisions')(DocumentHistory); diff --git a/app/components/Layout.js b/app/components/Layout.js index afd724417..c5af87ee7 100644 --- a/app/components/Layout.js +++ b/app/components/Layout.js @@ -9,13 +9,19 @@ import { observer, inject } from 'mobx-react'; import keydown from 'react-keydown'; import Analytics from 'components/Analytics'; import Flex from 'shared/components/Flex'; -import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers'; +import { + documentEditUrl, + homeUrl, + searchUrl, + matchDocumentSlug as slug, +} from 'utils/routeHelpers'; import { LoadingIndicatorBar } from 'components/LoadingIndicator'; import { GlobalStyles } from 'components/DropToImport'; import Sidebar from 'components/Sidebar'; import SettingsSidebar from 'components/Sidebar/Settings'; import Modals from 'components/Modals'; +import DocumentHistory from 'components/DocumentHistory'; import ErrorSuspended from 'scenes/ErrorSuspended'; import AuthStore from 'stores/AuthStore'; import UiStore from 'stores/UiStore'; @@ -91,7 +97,7 @@ class Layout extends React.Component { {this.props.ui.progressBarVisible && } {this.props.notifications} - + {showSidebar && ( @@ -102,7 +108,14 @@ class Layout extends React.Component { {this.props.children} - + + + + + @@ -112,8 +125,8 @@ class Layout extends React.Component { const Container = styled(Flex)` position: relative; - width: 100%; - height: 100%; + width: 100vw; + min-height: 100%; `; const Content = styled(Flex)` diff --git a/app/components/Sidebar/components/DocumentLink.js b/app/components/Sidebar/components/DocumentLink.js index 7ae36caf3..0838888af 100644 --- a/app/components/Sidebar/components/DocumentLink.js +++ b/app/components/Sidebar/components/DocumentLink.js @@ -62,6 +62,7 @@ class DocumentLink extends React.Component { expanded={showChildren} label={document.title} depth={depth} + exact={false} > {hasChildren && ( diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js index d3deb1a6b..d383070e7 100644 --- a/app/scenes/Document/Document.js +++ b/app/scenes/Document/Document.js @@ -23,7 +23,6 @@ import Header from './components/Header'; import DocumentMove from './components/DocumentMove'; import Branding from './components/Branding'; import ErrorBoundary from 'components/ErrorBoundary'; -import DocumentHistory from 'components/DocumentHistory'; import LoadingPlaceholder from 'components/LoadingPlaceholder'; import LoadingIndicator from 'components/LoadingIndicator'; import CenteredContent from 'components/CenteredContent'; @@ -81,8 +80,10 @@ class DocumentScene extends React.Component { @observable notFound: boolean = false; @observable moveModalOpen: boolean = false; - componentDidMount() { - this.loadDocument(this.props); + constructor(props) { + super(); + this.document = props.documents.getByUrl(props.match.params.documentSlug); + this.loadDocument(props); this.loadEditor(); } @@ -129,13 +130,13 @@ class DocumentScene extends React.Component { } else { const { shareId, revisionId } = props.match.params; - this.document = await this.props.documents.fetch( + this.document = await props.documents.fetch( props.match.params.documentSlug, { shareId } ); if (revisionId) { - this.revision = await this.props.revisions.fetch( + this.revision = await props.revisions.fetch( props.match.params.documentSlug, { revisionId } ); @@ -160,8 +161,8 @@ class DocumentScene extends React.Component { props.match.url, document.url ); - if (this.props.location.pathname !== canonicalUrl) { - this.props.history.replace(canonicalUrl); + if (props.location.pathname !== canonicalUrl) { + props.history.replace(canonicalUrl); } } } @@ -272,15 +273,12 @@ class DocumentScene extends React.Component { }; render() { - console.log('render', this.props); - const { location, auth, match } = this.props; const team = auth.team; const Editor = this.editorComponent; const document = this.document; const revision = this.revision; const isShare = match.params.shareId; - const isHistory = match.url.match(/\/history(\/|$)/); // Can't match on history alone as that can be in the user-generated slug if (this.notFound) { return navigator.onLine ? ( @@ -313,7 +311,6 @@ class DocumentScene extends React.Component { { - {isHistory && ( - - )} {isShare && } ); @@ -404,7 +398,6 @@ const MaxWidth = styled(Flex)` const Container = styled(Flex)` position: relative; margin-top: ${props => (props.isShare ? '50px' : '0')}; - margin-right: ${props => (props.sidebar ? props.theme.sidebarWidth : 0)}; `; const LoadingState = styled(LoadingPlaceholder)` diff --git a/app/scenes/Settings/Notifications.js b/app/scenes/Settings/Notifications.js index 694151f20..8eeea3bfc 100644 --- a/app/scenes/Settings/Notifications.js +++ b/app/scenes/Settings/Notifications.js @@ -93,8 +93,8 @@ class Notifications extends React.Component { Manage when you receive email notifications from Outline. - {options.map(option => { - if (option.separator) return ; + {options.map((option, index) => { + if (option.separator) return ; const setting = notificationSettings.getByEvent(option.event); diff --git a/app/stores/RevisionsStore.js b/app/stores/RevisionsStore.js index 44f82eb68..c432b927a 100644 --- a/app/stores/RevisionsStore.js +++ b/app/stores/RevisionsStore.js @@ -63,6 +63,7 @@ export default class RevisionsStore extends BaseStore { }); this.isLoaded = true; }); + return res.data; } finally { this.isFetching = false; }