refactored document setState to mobx & cancel reload

frontend/scenes/Document/Document.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import get from 'lodash/get';
 import styled from 'styled-components';
+import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import Flex from 'components/Flex';
@@ -39,17 +40,13 @@ type Props = {
 @observer class DocumentScene extends Component {
   props: Props;
   savedTimeout: number;
-  state: {
+
-    newDocument?: Document,
+  @observable newDocument: ?Document;
-  };
+  @observable isDragging = false;
-  state = {
+  @observable isLoading = false;
-    isDragging: false,
+  @observable isSaving = false;
-    isLoading: false,
+  @observable showAsSaved = false;
-    isSaving: false,
+  @observable notFound = false;
-    newDocument: undefined,
-    showAsSaved: false,
-    notFound: false,
-  };
 
   componentDidMount() {
     this.loadDocument(this.props);
@@ -60,7 +57,7 @@ type Props = {
       nextProps.match.params.documentSlug !==
       this.props.match.params.documentSlug
     ) {
-      this.setState({ notFound: false });
+      this.notFound = false;
       this.loadDocument(nextProps);
     }
   }
@@ -77,7 +74,7 @@ type Props = {
         title: '',
         text: '',
       });
-      this.setState({ newDocument });
+      this.newDocument = newDocument;
     } else {
       let document = this.document;
       if (document) {
@@ -92,13 +89,13 @@ type Props = {
         document.view();
       } else {
         // Render 404 with search
-        this.setState({ notFound: true });
+        this.notFound = true;
       }
     }
   };
 
   get document() {
-    if (this.state.newDocument) return this.state.newDocument;
+    if (this.newDocument) return this.newDocument;
     return this.props.documents.getByUrl(
       `/doc/${this.props.match.params.documentSlug}`
     );
@@ -120,31 +117,30 @@ type Props = {
     let document = this.document;
 
     if (!document) return;
-    this.setState({ isLoading: true, isSaving: true });
+    this.isLoading = true;
+    this.isSaving = true;
     document = await document.save();
-    this.setState({ isLoading: false });
+    this.isLoading = false;
 
     if (redirect || this.props.newDocument) {
       this.props.history.push(document.url);
     } else {
-      this.showAsSaved();
+      this.toggleShowAsSaved();
     }
   };
 
-  showAsSaved() {
+  toggleShowAsSaved() {
-    this.setState({ showAsSaved: true, isSaving: false });
+    this.showAsSaved = true;
-    this.savedTimeout = setTimeout(
+    this.isSaving = false;
-      () => this.setState({ showAsSaved: false }),
+    this.savedTimeout = setTimeout(() => (this.showAsSaved = false), 2000);
-      2000
-    );
   }
 
   onImageUploadStart = () => {
-    this.setState({ isLoading: true });
+    this.isLoading = true;
   };
 
   onImageUploadStop = () => {
-    this.setState({ isLoading: false });
+    this.isLoading = false;
   };
 
   onChange = text => {
@@ -152,10 +148,11 @@ type Props = {
     this.document.updateData({ text }, true);
   };
 
-  onCancel = () => {
+  onCancel = async () => {
     let url;
     if (this.document && this.document.url) {
       url = this.document.url;
+      await this.document.fetch();
     } else {
       url = collectionUrl(this.props.match.params.id);
     }
@@ -163,11 +160,11 @@ type Props = {
   };
 
   onStartDragging = () => {
-    this.setState({ isDragging: true });
+    this.isDragging = true;
   };
 
   onStopDragging = () => {
-    this.setState({ isDragging: false });
+    this.isDragging = false;
   };
 
   renderNotFound() {
@@ -181,18 +178,18 @@ type Props = {
     const titleText = get(this.document, 'title', '');
     const document = this.document;
 
-    if (this.state.notFound) {
+    if (this.notFound) {
       return this.renderNotFound();
     }
 
     return (
       <Container column auto>
-        {this.state.isDragging &&
+        {this.isDragging &&
           <DropHere align="center" justify="center">
             Drop files here to import into Atlas.
           </DropHere>}
         {titleText && <PageTitle title={titleText} />}
-        {this.state.isLoading && <LoadingIndicator />}
+        {this.isLoading && <LoadingIndicator />}
         {isFetching &&
           <CenteredContent>
             <LoadingState />
@@ -232,11 +229,11 @@ type Props = {
                   <HeaderAction>
                     {isEditing
                       ? <SaveAction
-                          isSaving={this.state.isSaving}
+                          isSaving={this.isSaving}
                           onClick={this.onSave.bind(this, true)}
                           disabled={
                             !(this.document && this.document.allowSave) ||
-                              this.state.isSaving
+                              this.isSaving
                           }
                           isNew={!!isNew}
                         />