From 1bc52d0138c7bcb94ffce31ec05f675387612a62 Mon Sep 17 00:00:00 2001
From: ta264 <ta264@users.noreply.github.com>
Date: Wed, 26 Aug 2020 22:38:48 +0100
Subject: [PATCH] Fixed: restoring scroll position when going back to index
 page

---
 frontend/src/Artist/Details/ArtistDetails.js     |  5 ++++-
 .../Artist/Index/Banners/ArtistIndexBanners.js   |  8 +++++++-
 .../Index/Overview/ArtistIndexOverviews.js       |  7 ++++++-
 .../Artist/Index/Posters/ArtistIndexPosters.js   |  8 +++++++-
 .../src/Artist/Index/Table/ArtistIndexTable.js   |  5 ++++-
 frontend/src/Components/Link/Link.js             | 16 ++++++++++++++--
 .../src/Components/Page/Header/PageHeader.js     |  5 ++++-
 frontend/src/Components/Table/VirtualTable.js    |  7 +++++++
 frontend/src/Components/withScrollPosition.js    |  2 +-
 9 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Artist/Details/ArtistDetails.js b/frontend/src/Artist/Details/ArtistDetails.js
index 879e5ebd2..cedfb466b 100644
--- a/frontend/src/Artist/Details/ArtistDetails.js
+++ b/frontend/src/Artist/Details/ArtistDetails.js
@@ -408,7 +408,10 @@ class ArtistDetails extends Component {
                       name={icons.ARROW_UP}
                       size={30}
                       title={'Go to artist listing'}
-                      to={'/'}
+                      to={{
+                        pathname: '/',
+                        state: { restoreScrollPosition: true }
+                      }}
                     />
 
                     <IconButton
diff --git a/frontend/src/Artist/Index/Banners/ArtistIndexBanners.js b/frontend/src/Artist/Index/Banners/ArtistIndexBanners.js
index b0c67a174..e697fcafe 100644
--- a/frontend/src/Artist/Index/Banners/ArtistIndexBanners.js
+++ b/frontend/src/Artist/Index/Banners/ArtistIndexBanners.js
@@ -112,7 +112,8 @@ class ArtistIndexBanners extends Component {
       items,
       sortKey,
       bannerOptions,
-      jumpToCharacter
+      jumpToCharacter,
+      scrollTop
     } = this.props;
 
     const {
@@ -149,6 +150,10 @@ class ArtistIndexBanners extends Component {
         });
       }
     }
+
+    if (this._grid && scrollTop !== 0) {
+      this._grid.scrollToPosition({ scrollTop });
+    }
   }
 
   //
@@ -307,6 +312,7 @@ ArtistIndexBanners.propTypes = {
   sortKey: PropTypes.string,
   bannerOptions: PropTypes.object.isRequired,
   jumpToCharacter: PropTypes.string,
+  scrollTop: PropTypes.number.isRequired,
   scroller: PropTypes.instanceOf(Element).isRequired,
   showRelativeDates: PropTypes.bool.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
diff --git a/frontend/src/Artist/Index/Overview/ArtistIndexOverviews.js b/frontend/src/Artist/Index/Overview/ArtistIndexOverviews.js
index ccd23755f..b5f8878e4 100644
--- a/frontend/src/Artist/Index/Overview/ArtistIndexOverviews.js
+++ b/frontend/src/Artist/Index/Overview/ArtistIndexOverviews.js
@@ -71,7 +71,8 @@ class ArtistIndexOverviews extends Component {
       items,
       sortKey,
       overviewOptions,
-      jumpToCharacter
+      jumpToCharacter,
+      scrollTop
     } = this.props;
 
     const {
@@ -103,6 +104,10 @@ class ArtistIndexOverviews extends Component {
         });
       }
     }
+
+    if (this._grid && scrollTop !== 0) {
+      this._grid.scrollToPosition({ scrollTop });
+    }
   }
 
   //
diff --git a/frontend/src/Artist/Index/Posters/ArtistIndexPosters.js b/frontend/src/Artist/Index/Posters/ArtistIndexPosters.js
index 1bada1b67..c23018597 100644
--- a/frontend/src/Artist/Index/Posters/ArtistIndexPosters.js
+++ b/frontend/src/Artist/Index/Posters/ArtistIndexPosters.js
@@ -112,7 +112,8 @@ class ArtistIndexPosters extends Component {
       items,
       sortKey,
       posterOptions,
-      jumpToCharacter
+      jumpToCharacter,
+      scrollTop
     } = this.props;
 
     const {
@@ -149,6 +150,10 @@ class ArtistIndexPosters extends Component {
         });
       }
     }
+
+    if (this._grid && scrollTop !== 0) {
+      this._grid.scrollToPosition({ scrollTop });
+    }
   }
 
   //
@@ -310,6 +315,7 @@ ArtistIndexPosters.propTypes = {
   sortKey: PropTypes.string,
   posterOptions: PropTypes.object.isRequired,
   jumpToCharacter: PropTypes.string,
+  scrollTop: PropTypes.number.isRequired,
   scroller: PropTypes.instanceOf(Element).isRequired,
   showRelativeDates: PropTypes.bool.isRequired,
   shortDateFormat: PropTypes.string.isRequired,
diff --git a/frontend/src/Artist/Index/Table/ArtistIndexTable.js b/frontend/src/Artist/Index/Table/ArtistIndexTable.js
index 6ce2a761a..43d9f3638 100644
--- a/frontend/src/Artist/Index/Table/ArtistIndexTable.js
+++ b/frontend/src/Artist/Index/Table/ArtistIndexTable.js
@@ -83,7 +83,8 @@ class ArtistIndexTable extends Component {
       showBanners,
       isSmallScreen,
       onSortPress,
-      scroller
+      scroller,
+      scrollTop
     } = this.props;
 
     return (
@@ -91,6 +92,7 @@ class ArtistIndexTable extends Component {
         className={styles.tableContainer}
         items={items}
         scrollIndex={this.state.scrollIndex}
+        scrollTop={scrollTop}
         isSmallScreen={isSmallScreen}
         scroller={scroller}
         rowHeight={showBanners ? 70 : 38}
@@ -120,6 +122,7 @@ ArtistIndexTable.propTypes = {
   sortDirection: PropTypes.oneOf(sortDirections.all),
   showBanners: PropTypes.bool.isRequired,
   jumpToCharacter: PropTypes.string,
+  scrollTop: PropTypes.number,
   scroller: PropTypes.instanceOf(Element).isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
   onSortPress: PropTypes.func.isRequired
diff --git a/frontend/src/Components/Link/Link.js b/frontend/src/Components/Link/Link.js
index b7487545c..1c36040ee 100644
--- a/frontend/src/Components/Link/Link.js
+++ b/frontend/src/Components/Link/Link.js
@@ -38,7 +38,7 @@ class Link extends Component {
     const linkProps = { target };
     let el = component;
 
-    if (to) {
+    if (to && typeof to === 'string') {
       if ((/\w+?:\/\//).test(to)) {
         el = 'a';
         linkProps.href = to;
@@ -56,6 +56,18 @@ class Link extends Component {
         linkProps.to = `${window.Lidarr.urlBase}/${to.replace(/^\//, '')}`;
         linkProps.target = target;
       }
+    } else if (to && typeof to === 'object') {
+      el = RouterLink;
+      linkProps.target = target;
+      if (to.pathname.startsWith(`${window.Lidarr.urlBase}/`)) {
+        linkProps.to = to;
+      } else {
+        const pathname = `${window.Lidarr.urlBase}/${to.pathname.replace(/^\//, '')}`;
+        linkProps.to = {
+          ...to,
+          pathname
+        };
+      }
     }
 
     if (el === 'button' || el === 'input') {
@@ -86,7 +98,7 @@ class Link extends Component {
 Link.propTypes = {
   className: PropTypes.string,
   component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  to: PropTypes.string,
+  to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   target: PropTypes.string,
   isDisabled: PropTypes.bool,
   noRouter: PropTypes.bool,
diff --git a/frontend/src/Components/Page/Header/PageHeader.js b/frontend/src/Components/Page/Header/PageHeader.js
index 87cf317b3..23622229a 100644
--- a/frontend/src/Components/Page/Header/PageHeader.js
+++ b/frontend/src/Components/Page/Header/PageHeader.js
@@ -53,7 +53,10 @@ class PageHeader extends Component {
         <div className={styles.logoContainer}>
           <Link
             className={styles.logoLink}
-            to={`${window.Lidarr.urlBase}/`}
+            to={{
+              pathname: '/',
+              state: { restoreScrollPosition: true }
+            }}
           >
             <img
               className={styles.logo}
diff --git a/frontend/src/Components/Table/VirtualTable.js b/frontend/src/Components/Table/VirtualTable.js
index b09ac153d..c406cc165 100644
--- a/frontend/src/Components/Table/VirtualTable.js
+++ b/frontend/src/Components/Table/VirtualTable.js
@@ -47,6 +47,7 @@ class VirtualTable extends Component {
     const {
       items,
       scrollIndex,
+      scrollTop,
       onRecompute
     } = this.props;
 
@@ -68,6 +69,10 @@ class VirtualTable extends Component {
         columnIndex: 0
       });
     }
+
+    if (this._grid && scrollTop !== undefined && scrollTop !== 0) {
+      this._grid.scrollToPosition({ scrollTop });
+    }
   }
 
   //
@@ -95,6 +100,7 @@ class VirtualTable extends Component {
       className,
       items,
       scroller,
+      scrollTop: ignored,
       header,
       headerHeight,
       rowHeight,
@@ -179,6 +185,7 @@ VirtualTable.propTypes = {
   className: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   scrollIndex: PropTypes.number,
+  scrollTop: PropTypes.number,
   scroller: PropTypes.instanceOf(Element).isRequired,
   header: PropTypes.node.isRequired,
   headerHeight: PropTypes.number.isRequired,
diff --git a/frontend/src/Components/withScrollPosition.js b/frontend/src/Components/withScrollPosition.js
index 110da9ab2..bb089b8b0 100644
--- a/frontend/src/Components/withScrollPosition.js
+++ b/frontend/src/Components/withScrollPosition.js
@@ -8,7 +8,7 @@ function withScrollPosition(WrappedComponent, scrollPositionKey) {
       history
     } = props;
 
-    const scrollTop = history.action === 'POP' ?
+    const scrollTop = history.action === 'POP' || (history.location.state && history.location.state.restoreScrollPosition) ?
       scrollPositions[scrollPositionKey] :
       0;