From 451b6ad058eb440d54eee0881e6e144e577369c9 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Wed, 17 May 2017 20:31:33 -0700 Subject: [PATCH] Router fixes --- frontend/scenes/Document/Document.js | 60 +++++++++++---------- frontend/scenes/Document/DocumentStore.js | 17 ++++-- frontend/scenes/Document/components/Menu.js | 9 ++-- 3 files changed, 50 insertions(+), 36 deletions(-) diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index 2eea552b9..26704de57 100644 --- a/frontend/scenes/Document/Document.js +++ b/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 = ( ); - 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 = ( @@ -107,7 +111,7 @@ class Document extends Component { ? : Edit} @@ -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} />} ); diff --git a/frontend/scenes/Document/DocumentStore.js b/frontend/scenes/Document/DocumentStore.js index 608331c31..9a5aa2da2 100644 --- a/frontend/scenes/Document/DocumentStore.js +++ b/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; diff --git a/frontend/scenes/Document/components/Menu.js b/frontend/scenes/Document/components/Menu.js index 665a941cb..38e493d8c 100644 --- a/frontend/scenes/Document/components/Menu.js +++ b/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);