Refactor history sidebar, reduce thrashing on doc render

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<Props> {
   @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<Props> {
     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<Props> {
   };
 
   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<Props> {
   @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<Props> {
               <Revision
                 key={revision.id}
                 revision={revision}
-                document={this.props.document}
+                document={this.document}
                 showMenu={index !== 0}
               />
             ))}
@@ -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);

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<Props> {
         {this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
         {this.props.notifications}
 
-        <Flex auto>
+        <Container auto>
           {showSidebar && (
             <Switch>
               <Route path="/settings" component={SettingsSidebar} />
@@ -102,7 +108,14 @@ class Layout extends React.Component<Props> {
           <Content auto justify="center" editMode={ui.editMode}>
             {this.props.children}
           </Content>
-        </Flex>
+
+          <Switch>
+            <Route
+              path={`/doc/${slug}/history/:revisionId?`}
+              component={DocumentHistory}
+            />
+          </Switch>
+        </Container>
         <Modals ui={ui} />
         <GlobalStyles />
       </Container>
@@ -112,8 +125,8 @@ class Layout extends React.Component<Props> {
 
 const Container = styled(Flex)`
   position: relative;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  min-height: 100%;
 `;
 
 const Content = styled(Flex)`

app/components/Sidebar/components/DocumentLink.js

@@ -62,6 +62,7 @@ class DocumentLink extends React.Component<Props> {
             expanded={showChildren}
             label={document.title}
             depth={depth}
+            exact={false}
           >
             {hasChildren && (
               <DocumentChildren column>

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<Props> {
   @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<Props> {
     } 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> {
               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<Props> {
   };
 
   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<Props> {
       <ErrorBoundary>
         <Container
           key={revision ? revision.id : document.id}
-          sidebar={isHistory}
           isShare={isShare}
           column
           auto
@@ -378,9 +375,6 @@ class DocumentScene extends React.Component<Props> {
             </MaxWidth>
           </Container>
         </Container>
-        {isHistory && (
-          <DocumentHistory revision={revision} document={document} />
-        )}
         {isShare && <Branding />}
       </ErrorBoundary>
     );
@@ -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)`

app/scenes/Settings/Notifications.js

@@ -93,8 +93,8 @@ class Notifications extends React.Component<Props> {
           Manage when you receive email notifications from Outline.
         </HelpText>
 
-        {options.map(option => {
-          if (option.separator) return <Separator />;
+        {options.map((option, index) => {
+          if (option.separator) return <Separator key={`separator-${index}`} />;
 
           const setting = notificationSettings.getByEvent(option.event);
 

app/stores/RevisionsStore.js

@@ -63,6 +63,7 @@ export default class RevisionsStore extends BaseStore<Revision> {
         });
         this.isLoaded = true;
       });
+      return res.data;
     } finally {
       this.isFetching = false;
     }