From cf83f3677509163a1675376d2fe1e4e6b0f30e37 Mon Sep 17 00:00:00 2001
From: Jinksi <ericjinks@gmail.com>
Date: Mon, 3 Jul 2017 10:34:35 +1000
Subject: [PATCH] ScrollToTop on router nav

---
 src/App.js                    | 47 +++++++++++++++++++----------------
 src/components/ScrollToTop.js | 16 ++++++++++++
 yarn.lock                     |  8 +++---
 3 files changed, 46 insertions(+), 25 deletions(-)
 create mode 100644 src/components/ScrollToTop.js

diff --git a/src/App.js b/src/App.js
index 6323eae..01c7354 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import Helmet from 'react-helmet'
 
+import ScrollToTop from './components/ScrollToTop'
 import Home from './views/Home'
 import About from './views/About'
 import NoMatch from './views/NoMatch'
@@ -28,30 +29,34 @@ class App extends Component {
   componentWillMount () {
     globalStyles()
   }
+
   render () {
     return (
       <Router>
-        <div>
-          <Helmet titleTemplate={`${siteTitle} | %s`} />
-          <Nav>
-            <Logo>
-              <span role='img' aria-label='Watermelon'>🍉</span>
-            </Logo>
-            {routes.map((route, i) => (
-              <NavLink key={i} {...route} />
-            ))}
-          </Nav>
-          <Switch>
-            {routes.map((route, i) => (
-              <Route
-                {...route}
-                key={i}
-                render={() => <route.comp {...route} />}
-              />
-            ))}
-            <Route component={NoMatch} />
-          </Switch>
-        </div>
+        <ScrollToTop>
+
+          <div>
+            <Helmet titleTemplate={`${siteTitle} | %s`} />
+            <Nav>
+              <Logo>
+                <span role='img' aria-label='Watermelon'>🍉</span>
+              </Logo>
+              {routes.map((route, i) => (
+                <NavLink key={i} {...route} />
+              ))}
+            </Nav>
+            <Switch>
+              {routes.map((route, i) => (
+                <Route
+                  {...route}
+                  key={i}
+                  render={() => <route.comp {...route} />}
+                />
+              ))}
+              <Route component={NoMatch} />
+            </Switch>
+          </div>
+        </ScrollToTop>
       </Router>
     )
   }
diff --git a/src/components/ScrollToTop.js b/src/components/ScrollToTop.js
new file mode 100644
index 0000000..15f40c4
--- /dev/null
+++ b/src/components/ScrollToTop.js
@@ -0,0 +1,16 @@
+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/yarn.lock b/yarn.lock
index 79964dd..0f933ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1790,13 +1790,13 @@ debug@2.2.0, debug@~2.2.0:
   dependencies:
     ms "0.7.1"
 
-debug@2.6.7, debug@^2.1.1, debug@^2.2.0:
+debug@2.6.7, debug@^2.1.1, debug@^2.2.0, debug@^2.6.0, debug@^2.6.6:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
   dependencies:
     ms "2.0.0"
 
-debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8:
+debug@^2.6.3, debug@^2.6.8:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
@@ -3105,11 +3105,11 @@ iconv-lite@0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
 
-iconv-lite@^0.4.13, iconv-lite@~0.4.13:
+iconv-lite@^0.4.13:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
 
-iconv-lite@^0.4.17:
+iconv-lite@^0.4.17, iconv-lite@~0.4.13:
   version "0.4.17"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.17.tgz#4fdaa3b38acbc2c031b045d0edcdfe1ecab18c8d"