From fa8de52d81139ac960f64d3f9681f685d3e9d705 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 15 Sep 2020 05:35:01 -0700
Subject: [PATCH] scroll to top on navigation

---
 src/app/App.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/App.js b/src/app/App.js
index 16b13ad..03b37a9 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -3,7 +3,12 @@ import { ApolloProvider } from "@apollo/client";
 import { Auth0Provider } from "@auth0/auth0-react";
 import { CSSReset, ChakraProvider } from "@chakra-ui/core";
 import defaultTheme from "@chakra-ui/theme";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  useLocation,
+} from "react-router-dom";
 import loadable from "@loadable/component";
 import { useAuth0 } from "@auth0/auth0-react";
 
@@ -53,6 +58,7 @@ const theme = {
 function App() {
   return (
     <Router>
+      <ScrollToTop />
       <Auth0Provider
         domain="openneo.us.auth0.com"
         clientId="8LjFauVox7shDxVufQqnviUIywMuuC4r"
@@ -95,6 +101,16 @@ function App() {
   );
 }
 
+/**
+ * ScrollToTop scrolls to the top of the page when you navigate.
+ * Copied from https://reactrouter.com/web/guides/scroll-restoration/scroll-to-top.
+ */
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  React.useEffect(() => window.scrollTo(0, 0), [pathname]);
+  return null;
+}
+
 function ApolloProviderWithAuth0({ children }) {
   const auth0 = useAuth0();
   const auth0Ref = React.useRef(auth0);