Router fixes

frontend/scenes/Document/Document.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import get from 'lodash/get';
 import { observer } from 'mobx-react';
-import { browserHistory, withRouter } from 'react-router';
+import { withRouter } from 'react-router';
 import { Flex } from 'reflexbox';
 
 import DocumentStore from './DocumentStore';
@@ -19,10 +19,12 @@ Are you sure you want to discard them?
 `;
 
 type Props = {
-  route: Object,
-  router: Object,
-  params: Object,
+  match: Object,
+  history: Object,
   keydown: Object,
+  editDocument?: boolean,
+  newChildDocument?: boolean,
+  editDocument?: boolean,
 };
 
 @withRouter
@@ -33,39 +35,39 @@ class Document extends Component {
 
   constructor(props: Props) {
     super(props);
-    this.store = new DocumentStore({});
+    this.store = new DocumentStore({ history: this.props.history });
   }
 
   componentDidMount = () => {
-    if (this.props.route.newDocument) {
-      this.store.collectionId = this.props.params.id;
+    if (this.props.newDocument) {
+      this.store.collectionId = this.props.match.params.id;
       this.store.newDocument = true;
-    } else if (this.props.route.editDocument) {
-      this.store.documentId = this.props.params.id;
+    } else if (this.props.editDocument) {
+      this.store.documentId = this.props.match.params.id;
       this.store.fetchDocument();
-    } else if (this.props.route.newChildDocument) {
-      this.store.documentId = this.props.params.id;
+    } else if (this.props.newChildDocument) {
+      this.store.documentId = this.props.match.params.id;
       this.store.newChildDocument = true;
       this.store.fetchDocument();
     } else {
-      this.store.documentId = this.props.params.id;
+      this.store.documentId = this.props.match.params.id;
       this.store.newDocument = false;
       this.store.fetchDocument();
     }
 
-    // Prevent user from accidentally leaving with unsaved changes
-    const remove = this.props.router.setRouteLeaveHook(this.props.route, () => {
-      if (this.store.hasPendingChanges) {
-        return confirm(DISCARD_CHANGES);
-      }
-      remove();
-      return null;
-    });
+    // // Prevent user from accidentally leaving with unsaved changes
+    // const remove = this.props.router.setRouteLeaveHook(this.props.route, () => {
+    //   if (this.store.hasPendingChanges) {
+    //     return confirm(DISCARD_CHANGES);
+    //   }
+    //   remove();
+    //   return null;
+    // });
   };
 
   onEdit = () => {
     const url = `${this.store.document.url}/edit`;
-    browserHistory.push(url);
+    this.props.history.push(url);
   };
 
   onSave = (options: { redirect?: boolean } = {}) => {
@@ -85,20 +87,22 @@ class Document extends Component {
   };
 
   onCancel = () => {
-    browserHistory.goBack();
+    this.props.history.goBack();
   };
 
   render() {
-    const { route } = this.props;
-    const isNew = route.newDocument || route.newChildDocument;
-    const isEditing = route.editDocument;
+    const isNew = this.props.newDocument || this.props.newChildDocument;
+    const isEditing = this.props.editDocument;
     const title = (
       <Breadcrumbs
         document={this.store.document}
         pathToDocument={this.store.pathToDocument}
       />
     );
-    const titleText = `${get(this.store, 'document.collection.name')} - ${get(this.store, 'document.title')}`;
+
+    const titleText =
+      this.store.document &&
+      `${get(this.store, 'document.collection.name')} - ${get(this.store, 'document.title')}`;
 
     const actions = (
       <Flex>
@@ -107,7 +111,7 @@ class Document extends Component {
             ? <SaveAction
                 onClick={this.onSave}
                 disabled={this.store.isSaving}
-                isNew={isNew}
+                isNew={!!isNew}
               />
             : <a onClick={this.onEdit}>Edit</a>}
         </HeaderAction>
@@ -140,7 +144,7 @@ class Document extends Component {
             onChange={this.store.updateText}
             onSave={this.onSave}
             onCancel={this.onCancel}
-            readOnly={!this.props.route.editDocument}
+            readOnly={!this.props.editDocument}
           />}
       </Layout>
     );

frontend/scenes/Document/DocumentStore.js

@@ -1,6 +1,5 @@
 // @flow
 import { observable, action, computed, toJS } from 'mobx';
-import { browserHistory } from 'react-router';
 import get from 'lodash/get';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
@@ -23,6 +22,10 @@ const parseHeader = text => {
   return '';
 };
 
+type Options = {
+  history: Object,
+};
+
 class DocumentStore {
   @observable collapsedNodes: string[] = [];
   @observable documentId = null;
@@ -38,6 +41,8 @@ class DocumentStore {
   @observable isSaving: boolean = false;
   @observable isUploading: boolean = false;
 
+  history: Object;
+
   /* Computed */
 
   @computed get isCollection(): boolean {
@@ -136,7 +141,7 @@ class DocumentStore {
       const { url } = res.data;
 
       this.hasPendingChanges = false;
-      if (redirect) browserHistory.push(url);
+      if (redirect) this.history.push(url);
     } catch (e) {
       console.error('Something went wrong');
     }
@@ -162,7 +167,7 @@ class DocumentStore {
       const { url } = res.data;
 
       this.hasPendingChanges = false;
-      if (redirect) browserHistory.push(url);
+      if (redirect) this.history.push(url);
     } catch (e) {
       console.error('Something went wrong');
     }
@@ -174,7 +179,7 @@ class DocumentStore {
 
     try {
       await client.post('/documents.delete', { id: this.documentId });
-      browserHistory.push(this.document.collection.id);
+      this.history.push(this.document.collection.url);
     } catch (e) {
       console.error('Something went wrong');
     }
@@ -192,6 +197,10 @@ class DocumentStore {
   @action updateUploading = (uploading: boolean) => {
     this.isUploading = uploading;
   };
+
+  constructor(options: Options) {
+    this.history = options.history;
+  }
 }
 
 export default DocumentStore;

frontend/scenes/Document/components/Menu.js

@@ -2,13 +2,14 @@
 import React, { Component } from 'react';
 import invariant from 'invariant';
 import get from 'lodash/get';
-import { browserHistory } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import type { Document as DocumentType } from 'types';
 import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
 import DocumentStore from '../DocumentStore';
 
 type Props = {
+  history: Object,
   document: DocumentType,
   collectionTree: ?Object,
   store: DocumentStore,
@@ -19,12 +20,12 @@ type Props = {
 
   onCreateDocument = () => {
     invariant(this.props.collectionTree, 'collectionTree is not available');
-    browserHistory.push(`${this.props.collectionTree.url}/new`);
+    this.props.history.push(`${this.props.collectionTree.url}/new`);
   };
 
   onCreateChild = () => {
     invariant(this.props.document, 'Document is not available');
-    browserHistory.push(`${this.props.document.url}/new`);
+    this.props.history.push(`${this.props.document.url}/new`);
   };
 
   onDelete = () => {
@@ -75,4 +76,4 @@ type Props = {
   }
 }
 
-export default Menu;
+export default withRouter(Menu);