From 5fa9029caa3c226ed7e7a694c7f9e2e70bf2f865 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 2 Jul 2017 22:16:48 -0700
Subject: [PATCH] Closes #103 - Scroll to top on nav

---
 .../components/ScrollToTop/ScrollToTop.js     | 18 +++++
 frontend/components/ScrollToTop/index.js      |  3 +
 frontend/index.js                             | 71 ++++++++++---------
 3 files changed, 58 insertions(+), 34 deletions(-)
 create mode 100644 frontend/components/ScrollToTop/ScrollToTop.js
 create mode 100644 frontend/components/ScrollToTop/index.js

diff --git a/frontend/components/ScrollToTop/ScrollToTop.js b/frontend/components/ScrollToTop/ScrollToTop.js
new file mode 100644
index 000000000..44e52f7f7
--- /dev/null
+++ b/frontend/components/ScrollToTop/ScrollToTop.js
@@ -0,0 +1,18 @@
+// @flow
+// based on: https://reacttraining.com/react-router/web/guides/scroll-restoration
+import { Component } from 'react';
+import { withRouter } from 'react-router';
+
+class ScrollToTop extends Component {
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      window.scrollTo(0, 0);
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default withRouter(ScrollToTop);
diff --git a/frontend/components/ScrollToTop/index.js b/frontend/components/ScrollToTop/index.js
new file mode 100644
index 000000000..0f8823a18
--- /dev/null
+++ b/frontend/components/ScrollToTop/index.js
@@ -0,0 +1,3 @@
+// @flow
+import ScrollToTop from './ScrollToTop';
+export default ScrollToTop;
diff --git a/frontend/index.js b/frontend/index.js
index 0f050e1ab..7fe3a575c 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -33,6 +33,7 @@ import Flatpage from 'scenes/Flatpage';
 import ErrorAuth from 'scenes/ErrorAuth';
 import Error404 from 'scenes/Error404';
 
+import ScrollToTop from 'components/ScrollToTop';
 import Layout from 'components/Layout';
 
 import flatpages from 'static/flatpages';
@@ -91,46 +92,48 @@ render(
   <div style={{ display: 'flex', flex: 1, height: '100%' }}>
     <Provider {...stores}>
       <Router>
-        <Switch>
-          <Route exact path="/" component={Home} />
+        <ScrollToTop>
+          <Switch>
+            <Route exact path="/" component={Home} />
 
-          <Route exact path="/auth/slack" component={SlackAuth} />
-          <Route exact path="/auth/slack/commands" component={SlackAuth} />
-          <Route exact path="/auth/error" component={ErrorAuth} />
+            <Route exact path="/auth/slack" component={SlackAuth} />
+            <Route exact path="/auth/slack/commands" component={SlackAuth} />
+            <Route exact path="/auth/error" component={ErrorAuth} />
 
-          <Auth>
-            <Layout>
-              <Switch>
-                <Route exact path="/dashboard" component={Dashboard} />
-                <Route exact path="/starred" component={Starred} />
-                <Route exact path="/collections/:id" component={Collection} />
-                <Route exact path="/d/:id" component={Document} />
+            <Auth>
+              <Layout>
+                <Switch>
+                  <Route exact path="/dashboard" component={Dashboard} />
+                  <Route exact path="/starred" component={Starred} />
+                  <Route exact path="/collections/:id" component={Collection} />
+                  <Route exact path="/d/:id" component={Document} />
 
-                <Route exact path="/d/:id/:edit" component={Document} />
-                <Route
-                  exact
-                  path="/collections/:id/new"
-                  component={DocumentNew}
-                />
-                <Route exact path="/d/:id/new" component={DocumentNewChild} />
+                  <Route exact path="/d/:id/:edit" component={Document} />
+                  <Route
+                    exact
+                    path="/collections/:id/new"
+                    component={DocumentNew}
+                  />
+                  <Route exact path="/d/:id/new" component={DocumentNewChild} />
 
-                <Route exact path="/search" component={Search} />
-                <Route exact path="/search/:query" component={Search} />
-                <Route exact path="/settings" component={Settings} />
+                  <Route exact path="/search" component={Search} />
+                  <Route exact path="/search/:query" component={Search} />
+                  <Route exact path="/settings" component={Settings} />
 
-                <Route
-                  exact
-                  path="/keyboard-shortcuts"
-                  component={KeyboardShortcuts}
-                />
-                <Route exact path="/developers" component={Api} />
+                  <Route
+                    exact
+                    path="/keyboard-shortcuts"
+                    component={KeyboardShortcuts}
+                  />
+                  <Route exact path="/developers" component={Api} />
 
-                <Route path="/404" component={Error404} />
-                <Route component={notFoundSearch} />
-              </Switch>
-            </Layout>
-          </Auth>
-        </Switch>
+                  <Route path="/404" component={Error404} />
+                  <Route component={notFoundSearch} />
+                </Switch>
+              </Layout>
+            </Auth>
+          </Switch>
+        </ScrollToTop>
       </Router>
     </Provider>
     {DevTools && <DevTools position={{ bottom: 0, right: 0 }} />}