Version History (#768)

* Stash. Super rough progress

* Stash

* 'h' how toggles history panel
Add documents.restore endpoint

* Add tests for documents.restore endpoint

* Document restore endpoint

* Tiding, RevisionMenu, remove scroll dep

* Add history menu item

* Paginate loading

* Fixed: Error boundary styling
Select first revision faster

* Diff summary, styling

* Add history loading placeholder
Fix move modal not opening

* Fixes: Refreshing page on specific revision

* documentation for document.revision

* Better handle versions with no text changes (will no longer be created)

app/scenes/Document/Document.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
-import { withRouter, Prompt } from 'react-router-dom';
+import { withRouter, Prompt, Route } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 import keydown from 'react-keydown';
 import Flex from 'shared/components/Flex';
@@ -13,21 +13,20 @@ import {
   collectionUrl,
   updateDocumentUrl,
   documentMoveUrl,
+  documentHistoryUrl,
   documentEditUrl,
   matchDocumentEdit,
-  matchDocumentMove,
 } from 'utils/routeHelpers';
 import { uploadFile } from 'utils/uploadFile';
 import { emojiToUrl } from 'utils/emoji';
 import isInternalUrl from 'utils/isInternalUrl';
+import type { Revision } from 'types';
 
 import Document from 'models/Document';
 import Header from './components/Header';
 import DocumentMove from './components/DocumentMove';
-import UiStore from 'stores/UiStore';
-import AuthStore from 'stores/AuthStore';
-import DocumentsStore from 'stores/DocumentsStore';
 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';
@@ -36,6 +35,11 @@ import Search from 'scenes/Search';
 import Error404 from 'scenes/Error404';
 import ErrorOffline from 'scenes/ErrorOffline';
 
+import UiStore from 'stores/UiStore';
+import AuthStore from 'stores/AuthStore';
+import DocumentsStore from 'stores/DocumentsStore';
+import RevisionsStore from 'stores/RevisionsStore';
+
 const AUTOSAVE_DELAY = 3000;
 const IS_DIRTY_DELAY = 500;
 const MARK_AS_VIEWED_AFTER = 3000;
@@ -53,6 +57,7 @@ type Props = {
   history: Object,
   location: Location,
   documents: DocumentsStore,
+  revisions: RevisionsStore,
   newDocument?: boolean,
   auth: AuthStore,
   ui: UiStore,
@@ -65,6 +70,7 @@ class DocumentScene extends React.Component<Props> {
 
   @observable editorComponent;
   @observable document: ?Document;
+  @observable revision: ?Revision;
   @observable newDocument: ?Document;
   @observable isUploading = false;
   @observable isSaving = false;
@@ -81,7 +87,8 @@ class DocumentScene extends React.Component<Props> {
   componentWillReceiveProps(nextProps) {
     if (
       nextProps.match.params.documentSlug !==
-      this.props.match.params.documentSlug
+        this.props.match.params.documentSlug ||
+      this.props.match.params.revisionId !== nextProps.match.params.revisionId
     ) {
       this.notFound = false;
       clearTimeout(this.viewTimeout);
@@ -100,6 +107,18 @@ class DocumentScene extends React.Component<Props> {
     if (this.document) this.props.history.push(documentMoveUrl(this.document));
   }
 
+  @keydown('h')
+  goToHistory(ev) {
+    ev.preventDefault();
+    if (!this.document) return;
+
+    if (this.revision) {
+      this.props.history.push(this.document.url);
+    } else {
+      this.props.history.push(documentHistoryUrl(this.document));
+    }
+  }
+
   loadDocument = async props => {
     if (props.newDocument) {
       this.document = new Document({
@@ -111,11 +130,22 @@ class DocumentScene extends React.Component<Props> {
         text: '',
       });
     } else {
-      const { shareId } = props.match.params;
+      const { shareId, revisionId } = props.match.params;
+
       this.document = await this.props.documents.fetch(
         props.match.params.documentSlug,
         { shareId }
       );
+
+      if (revisionId) {
+        this.revision = await this.props.revisions.fetch(
+          props.match.params.documentSlug,
+          revisionId
+        );
+      } else {
+        this.revision = undefined;
+      }
+
       this.isDirty = false;
 
       const document = this.document;
@@ -128,10 +158,12 @@ class DocumentScene extends React.Component<Props> {
             this.viewTimeout = setTimeout(document.view, MARK_AS_VIEWED_AFTER);
           }
 
-          // Update url to match the current one
-          this.props.history.replace(
-            updateDocumentUrl(props.match.url, document.url)
-          );
+          if (!this.revision) {
+            // Update url to match the current one
+            this.props.history.replace(
+              updateDocumentUrl(props.match.url, document.url)
+            );
+          }
         }
       } else {
         // Render 404 with search
@@ -275,9 +307,10 @@ class DocumentScene extends React.Component<Props> {
   render() {
     const { location, match } = this.props;
     const Editor = this.editorComponent;
-    const isMoving = match.path === matchDocumentMove;
     const document = this.document;
+    const revision = this.revision;
     const isShare = match.params.shareId;
+    const isHistory = match.url.match(/history/);
 
     if (this.notFound) {
       return navigator.onLine ? (
@@ -304,8 +337,17 @@ class DocumentScene extends React.Component<Props> {
 
     return (
       <ErrorBoundary>
-        <Container key={document.id} isShare={isShare} column auto>
-          {isMoving && <DocumentMove document={document} />}
+        <Container
+          key={revision ? revision.id : document.id}
+          sidebar={isHistory}
+          isShare={isShare}
+          column
+          auto
+        >
+          <Route
+            path={`${match.url}/move`}
+            component={() => <DocumentMove document={document} />}
+          />
           <PageTitle
             title={document.title.replace(document.emoji, '')}
             favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
@@ -336,7 +378,7 @@ class DocumentScene extends React.Component<Props> {
               <Editor
                 titlePlaceholder="Start with a title…"
                 bodyPlaceholder="…the rest is your canvas"
-                defaultValue={document.text}
+                defaultValue={revision ? revision.text : document.text}
                 pretitle={document.emoji}
                 uploadImage={this.onUploadImage}
                 onImageUploadStart={this.onImageUploadStart}
@@ -348,11 +390,14 @@ class DocumentScene extends React.Component<Props> {
                 onCancel={this.onDiscard}
                 onShowToast={this.onShowToast}
                 readOnly={!this.isEditing}
-                toc
+                toc={!revision}
               />
             </MaxWidth>
           </Container>
         </Container>
+        {isHistory && (
+          <DocumentHistory revision={revision} document={document} />
+        )}
       </ErrorBoundary>
     );
   }
@@ -375,10 +420,13 @@ 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)`
   margin: 40px 0;
 `;
 
-export default withRouter(inject('ui', 'auth', 'documents')(DocumentScene));
+export default withRouter(
+  inject('ui', 'auth', 'documents', 'revisions')(DocumentScene)
+);