More withRouter removal

app/components/Sidebar/components/Collections.js

@@ -1,8 +1,6 @@
 // @flow
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
-import { withRouter } from 'react-router-dom';
-import type { Location } from 'react-router-dom';
 import Flex from 'shared/components/Flex';
 import { PlusIcon } from 'outline-icons';
 
@@ -16,8 +14,6 @@ import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
 
 type Props = {
-  history: Object,
-  location: Location,
   collections: CollectionsStore,
   documents: DocumentsStore,
   onCreateCollection: () => void,
@@ -33,15 +29,13 @@ class Collections extends React.Component<Props> {
   }
 
   render() {
-    const { history, location, collections, ui, documents } = this.props;
+    const { collections, ui, documents } = this.props;
     const content = (
       <Flex column>
         <Header>Collections</Header>
         {collections.orderedData.map(collection => (
           <CollectionLink
             key={collection.id}
-            history={history}
-            location={location}
             collection={collection}
             activeDocument={documents.active}
             prefetchDocument={documents.prefetchDocument}
@@ -63,6 +57,4 @@ class Collections extends React.Component<Props> {
   }
 }
 
-export default inject('collections', 'ui', 'documents')(
-  withRouter(Collections)
-);
+export default inject('collections', 'ui', 'documents')(Collections);

app/routes.js

@@ -31,12 +31,15 @@ const DocumentNew = () => <Document newDocument />;
 const RedirectDocument = ({ match }: { match: Object }) => (
   <Redirect to={`/doc/${match.params.documentSlug}`} />
 );
+const RemountDocument = props => (
+  <Document key={props.location.pathname} {...props} />
+);
 
 export default function Routes() {
   return (
     <Switch>
       <Route exact path="/" component={Home} />
-      <Route exact path="/share/:shareId" component={Document} />
+      <Route exact path="/share/:shareId" component={RemountDocument} />
       <Authenticated>
         <Layout>
           <Switch>
@@ -79,14 +82,14 @@ export default function Routes() {
             <Route
               exact
               path={`/doc/${slug}/history/:revisionId?`}
-              component={Document}
+              component={RemountDocument}
             />
             <RouteSidebarHidden
               exact
               path={`/doc/${slug}/edit`}
-              component={Document}
+              component={RemountDocument}
             />
-            <Route path={`/doc/${slug}`} component={Document} />
+            <Route path={`/doc/${slug}`} component={RemountDocument} />
             <Route exact path="/search" component={Search} />
             <Route exact path="/search/:query" component={Search} />
             <Route path="/404" component={Error404} />

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, Route } from 'react-router-dom';
+import { Prompt, Route } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 import keydown from 'react-keydown';
 import Flex from 'shared/components/Flex';
@@ -74,11 +74,11 @@ class DocumentScene extends React.Component<Props> {
   @observable document: ?Document;
   @observable revision: ?Revision;
   @observable newDocument: ?Document;
-  @observable isUploading = false;
-  @observable isSaving = false;
-  @observable isPublishing = false;
-  @observable isDirty = false;
-  @observable notFound = false;
+  @observable isUploading: boolean = false;
+  @observable isSaving: boolean = false;
+  @observable isPublishing: boolean = false;
+  @observable isDirty: boolean = false;
+  @observable notFound: boolean = false;
   @observable moveModalOpen: boolean = false;
 
   componentDidMount() {
@@ -86,18 +86,6 @@ class DocumentScene extends React.Component<Props> {
     this.loadEditor();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (
-      nextProps.match.params.documentSlug !==
-        this.props.match.params.documentSlug ||
-      this.props.match.params.revisionId !== nextProps.match.params.revisionId
-    ) {
-      this.notFound = false;
-      clearTimeout(this.viewTimeout);
-      this.loadDocument(nextProps);
-    }
-  }
-
   componentWillUnmount() {
     clearTimeout(this.viewTimeout);
     this.props.ui.clearActiveDocument();
@@ -284,6 +272,8 @@ 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;
@@ -421,6 +411,4 @@ const LoadingState = styled(LoadingPlaceholder)`
   margin: 40px 0;
 `;
 
-export default withRouter(
-  inject('ui', 'auth', 'documents', 'revisions')(DocumentScene)
-);
+export default inject('ui', 'auth', 'documents', 'revisions')(DocumentScene);

app/scenes/Search/Search.js

@@ -6,7 +6,6 @@ import Waypoint from 'react-waypoint';
 import { observable, action } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { debounce } from 'lodash';
-import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 
@@ -217,4 +216,4 @@ class Search extends React.Component<Props> {
   }
 }
 
-export default withRouter(inject('documents')(Search));
+export default inject('documents')(Search);