From 497e499c622f0830989359ef26c35f5dc4c13e5b Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 2 Apr 2019 00:30:19 -0400
Subject: [PATCH] temp fix to scroll to top on navigate

---
 src/ui/component/app/view.jsx    |  4 +--
 src/ui/component/router/view.jsx | 61 ++++++++++++++++++++------------
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/ui/component/app/view.jsx b/src/ui/component/app/view.jsx
index 8f2ea7f64..74be7a2d6 100644
--- a/src/ui/component/app/view.jsx
+++ b/src/ui/component/app/view.jsx
@@ -70,14 +70,14 @@ class App extends React.PureComponent<Props> {
     return (
       <div id="window" onContextMenu={e => openContextMenu(e)}>
         <Header />
-        <main className="page">
+        <section className="page">
           {enhancedLayout && <Yrbl className="yrbl--enhanced" />}
           <SideBar />
           <div className="content" id="content">
             <Router />
             <ModalRouter />
           </div>
-        </main>
+        </section>
       </div>
     );
   }
diff --git a/src/ui/component/router/view.jsx b/src/ui/component/router/view.jsx
index 6f8de4ae9..03cd902fc 100644
--- a/src/ui/component/router/view.jsx
+++ b/src/ui/component/router/view.jsx
@@ -1,5 +1,5 @@
 import * as PAGES from 'constants/pages';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Router } from '@reach/router';
 import SettingsPage from 'page/settings';
 import HelpPage from 'page/help';
@@ -21,31 +21,46 @@ import UserHistoryPage from 'page/userHistory';
 import SendCreditsPage from 'page/sendCredits';
 import NavigationHistory from 'page/navigationHistory';
 
-export default function AppRouter(props) {
+const ScrollHandler = props => {
+  const { key } = props.location;
+
+  useEffect(() => {
+    // This shouldn't scroll to top when you click "back"
+    // Might take some more work but fixes scroll position being stuck on navigation for now
+    const main = document.querySelector('main');
+    main.scrollIntoView();
+  }, [key]);
+
+  return props.children;
+};
+
+export default function AppRouter() {
   return (
     <Router>
-      <DiscoverPage path="/" />
-      <ShowPage path="/:claimName/:claimId" />
-      <ShowPage path="/:claimName" />
+      <ScrollHandler path="/">
+        <DiscoverPage path="/" />
+        <ShowPage path="/:claimName/:claimId" />
+        <ShowPage path="/:claimName" />
 
-      <AuthPage path={`$/${PAGES.AUTH}`} />
-      <BackupPage path={`$/${PAGES.BACKUP}`} />
-      <InvitePage path={`$/${PAGES.INVITE}`} />
-      <FileListDownloaded path={`$/${PAGES.DOWNLOADED}`} />
-      <FileListPublished path={`$/${PAGES.PUBLISHED}`} />
-      <HelpPage path={`$/${PAGES.HELP}`} />
-      <PublishPage path={`$/${PAGES.PUBLISH}`} />
-      <ReportPage path={`$/${PAGES.REPORT}`} />
-      <RewardsPage path={`$/${PAGES.REWARDS}`} />
-      <SearchPage path={`$/${PAGES.SEARCH}`} />
-      <SettingsPage path={`$/${PAGES.SETTINGS}`} />
-      <SubscriptionsPage path={`$/${PAGES.SUBSCRIPTIONS}`} />
-      <TransactionHistoryPage path={`$/${PAGES.TRANSACTIONS}`} />
-      <UserHistoryPage path={`$/${PAGES.HISTORY}`} />
-      <AccountPage path={`$/${PAGES.ACCOUNT}`} />
-      <SendCreditsPage path={`$/${PAGES.SEND}`} />
-      <UserHistoryPage path={`$/${PAGES.HISTORY}`} />
-      <NavigationHistory path={`$/${PAGES.HISTORY}/all`} />
+        <AuthPage path={`$/${PAGES.AUTH}`} />
+        <BackupPage path={`$/${PAGES.BACKUP}`} />
+        <InvitePage path={`$/${PAGES.INVITE}`} />
+        <FileListDownloaded path={`$/${PAGES.DOWNLOADED}`} />
+        <FileListPublished path={`$/${PAGES.PUBLISHED}`} />
+        <HelpPage path={`$/${PAGES.HELP}`} />
+        <PublishPage path={`$/${PAGES.PUBLISH}`} />
+        <ReportPage path={`$/${PAGES.REPORT}`} />
+        <RewardsPage path={`$/${PAGES.REWARDS}`} />
+        <SearchPage path={`$/${PAGES.SEARCH}`} />
+        <SettingsPage path={`$/${PAGES.SETTINGS}`} />
+        <SubscriptionsPage path={`$/${PAGES.SUBSCRIPTIONS}`} />
+        <TransactionHistoryPage path={`$/${PAGES.TRANSACTIONS}`} />
+        <UserHistoryPage path={`$/${PAGES.HISTORY}`} />
+        <AccountPage path={`$/${PAGES.ACCOUNT}`} />
+        <SendCreditsPage path={`$/${PAGES.SEND}`} />
+        <UserHistoryPage path={`$/${PAGES.HISTORY}`} />
+        <NavigationHistory path={`$/${PAGES.HISTORY}/all`} />
+      </ScrollHandler>
     </Router>
   );
 }