From 8af7c3c264eec89afe05a1c0d935e3c38f2588b5 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 17 Feb 2019 00:38:35 -0800
Subject: [PATCH] Closes #894 - Sidebar jumping regression

---
 app/components/DropToImport.js       |  5 +++++
 app/routes.js                        | 17 +++++++----------
 app/scenes/Document/Document.js      |  1 -
 app/scenes/Document/KeyedDocument.js | 16 ++++++++++++++++
 4 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 app/scenes/Document/KeyedDocument.js

diff --git a/app/components/DropToImport.js b/app/components/DropToImport.js
index e43eb1db..68e53f30 100644
--- a/app/components/DropToImport.js
+++ b/app/components/DropToImport.js
@@ -20,6 +20,8 @@ type Props = {
   rejectClassName?: string,
   documents: DocumentsStore,
   disabled: boolean,
+  location: Object,
+  match: Object,
   history: Object,
 };
 
@@ -76,6 +78,9 @@ class DropToImport extends React.Component<Props> {
       collectionId,
       documents,
       disabled,
+      location,
+      match,
+      history,
       ...rest
     } = this.props;
 
diff --git a/app/routes.js b/app/routes.js
index 6beb6bfa..6c9002eb 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -1,13 +1,13 @@
 // @flow
 import * as React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
-
 import Home from 'scenes/Home';
 import Dashboard from 'scenes/Dashboard';
 import Starred from 'scenes/Starred';
 import Drafts from 'scenes/Drafts';
 import Collection from 'scenes/Collection';
 import Document from 'scenes/Document';
+import KeyedDocument from 'scenes/Document/KeyedDocument';
 import Search from 'scenes/Search';
 import Settings from 'scenes/Settings';
 import Details from 'scenes/Settings/Details';
@@ -27,19 +27,16 @@ import RouteSidebarHidden from 'components/RouteSidebarHidden';
 import { matchDocumentSlug as slug } from 'utils/routeHelpers';
 
 const NotFound = () => <Search notFound />;
-const DocumentNew = () => <Document newDocument />;
+const NewDocument = () => <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={RemountDocument} />
+      <Route exact path="/share/:shareId" component={KeyedDocument} />
       <Authenticated>
         <Layout>
           <Switch>
@@ -74,7 +71,7 @@ export default function Routes() {
             <RouteSidebarHidden
               exact
               path="/collections/:id/new"
-              component={DocumentNew}
+              component={NewDocument}
             />
             <Route exact path="/collections/:id/:tab" component={Collection} />
             <Route exact path="/collections/:id" component={Collection} />
@@ -82,14 +79,14 @@ export default function Routes() {
             <Route
               exact
               path={`/doc/${slug}/history/:revisionId?`}
-              component={RemountDocument}
+              component={KeyedDocument}
             />
             <RouteSidebarHidden
               exact
               path={`/doc/${slug}/edit`}
-              component={RemountDocument}
+              component={KeyedDocument}
             />
-            <Route path={`/doc/${slug}`} component={RemountDocument} />
+            <Route path={`/doc/${slug}`} component={KeyedDocument} />
             <Route exact path="/search" component={Search} />
             <Route exact path="/search/:query" component={Search} />
             <Route path="/404" component={Error404} />
diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js
index 534ff0c6..3c829988 100644
--- a/app/scenes/Document/Document.js
+++ b/app/scenes/Document/Document.js
@@ -89,7 +89,6 @@ class DocumentScene extends React.Component<Props> {
 
   componentWillUnmount() {
     clearTimeout(this.viewTimeout);
-    this.props.ui.clearActiveDocument();
   }
 
   goToDocumentCanonical = () => {
diff --git a/app/scenes/Document/KeyedDocument.js b/app/scenes/Document/KeyedDocument.js
new file mode 100644
index 00000000..72dd69d9
--- /dev/null
+++ b/app/scenes/Document/KeyedDocument.js
@@ -0,0 +1,16 @@
+// @flow
+import * as React from 'react';
+import { inject } from 'mobx-react';
+import Document from '.';
+
+class KeyedDocument extends React.Component<*> {
+  componentWillUnmount() {
+    this.props.ui.clearActiveDocument();
+  }
+
+  render() {
+    return <Document key={this.props.location.pathname} {...this.props} />;
+  }
+}
+
+export default inject('ui')(KeyedDocument);