Fixed: restoring scroll position when going back to index page (#6308)

(cherry picked from commit 1bc52d0138c7bcb94ffce31ec05f675387612a62)

Co-authored-by: ta264 <ta264@users.noreply.github.com>

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;
@@ -53,6 +53,18 @@ class Link extends Component {
         linkProps.to = `${window.Radarr.urlBase}/${to.replace(/^\//, '')}`;
         linkProps.target = target;
       }
+    } else if (to && typeof to === 'object') {
+      el = RouterLink;
+      linkProps.target = target;
+      if (to.pathname.startsWith(`${window.Radarr.urlBase}/`)) {
+        linkProps.to = to;
+      } else {
+        const pathname = `${window.Radarr.urlBase}/${to.pathname.replace(/^\//, '')}`;
+        linkProps.to = {
+          ...to,
+          pathname
+        };
+      }
     }
 
     if (el === 'button' || el === 'input') {
@@ -83,7 +95,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,

frontend/src/Components/Page/Header/PageHeader.js

@@ -53,7 +53,13 @@ class PageHeader extends Component {
     return (
       <div className={styles.header}>
         <div className={styles.logoContainer}>
-          <Link to={'/'}>
+          <Link
+            className={styles.logoLink}
+            to={{
+              pathname: '/',
+              state: { restoreScrollPosition: true }
+            }}
+          >
             <img
               className={isSmallScreen ? styles.logo : styles.logoFull}
               src={isSmallScreen ? `${window.Radarr.urlBase}/Content/Images/logo.png` : `${window.Radarr.urlBase}/Content/Images/logo-full.png`}

frontend/src/Components/Table/VirtualTable.js

@@ -39,7 +39,8 @@ class VirtualTable extends Component {
     super(props, context);
 
     this.state = {
-      width: 0
+      width: 0,
+      scrollRestored: false
     };
 
     this._grid = null;
@@ -48,11 +49,13 @@ class VirtualTable extends Component {
   componentDidUpdate(prevProps, prevState) {
     const {
       items,
-      scrollIndex
+      scrollIndex,
+      scrollTop
     } = this.props;
 
     const {
-      width
+      width,
+      scrollRestored
     } = this.state;
 
     if (this._grid &&
@@ -68,6 +71,11 @@ class VirtualTable extends Component {
         columnIndex: 0
       });
     }
+
+    if (this._grid && scrollTop !== undefined && scrollTop !== 0 && !scrollRestored) {
+      this.setState({ scrollRestored: true });
+      this._grid.scrollToPosition({ scrollTop });
+    }
   }
 
   //
@@ -96,6 +104,7 @@ class VirtualTable extends Component {
       items,
       scroller,
       focusScroller,
+      scrollTop: ignored,
       header,
       headerHeight,
       rowRenderer,
@@ -180,6 +189,7 @@ VirtualTable.propTypes = {
   className: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   scrollIndex: PropTypes.number,
+  scrollTop: PropTypes.number,
   scroller: PropTypes.instanceOf(Element).isRequired,
   focusScroller: PropTypes.bool.isRequired,
   header: PropTypes.node.isRequired,

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;
 

frontend/src/Movie/Index/Overview/MovieIndexOverviews.js

@@ -60,7 +60,8 @@ class MovieIndexOverviews extends Component {
       columnCount: 1,
       posterWidth: 162,
       posterHeight: 238,
-      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
+      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}),
+      scrollRestored: false
     };
 
     this._grid = null;
@@ -72,13 +73,15 @@ class MovieIndexOverviews extends Component {
       sortKey,
       overviewOptions,
       jumpToCharacter,
+      scrollTop,
       isMovieEditorActive,
       isSmallScreen
     } = this.props;
 
     const {
       width,
-      rowHeight
+      rowHeight,
+      scrollRestored
     } = this.state;
 
     if (prevProps.sortKey !== sortKey ||
@@ -97,6 +100,11 @@ class MovieIndexOverviews extends Component {
       this._grid.recomputeGridSize();
     }
 
+    if (this._grid && scrollTop !== 0 && !scrollRestored) {
+      this.setState({ scrollRestored: true });
+      this._grid.scrollToPosition({ scrollTop });
+    }
+
     if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
       const index = getIndexOfFirstCharacter(items, jumpToCharacter);
 
@@ -262,6 +270,7 @@ MovieIndexOverviews.propTypes = {
   sortKey: PropTypes.string,
   overviewOptions: PropTypes.object.isRequired,
   jumpToCharacter: PropTypes.string,
+  scrollTop: PropTypes.number.isRequired,
   scroller: PropTypes.instanceOf(Element).isRequired,
   showRelativeDates: PropTypes.bool.isRequired,
   shortDateFormat: PropTypes.string.isRequired,

frontend/src/Movie/Index/Posters/MovieIndexPosters.js

@@ -104,7 +104,8 @@ class MovieIndexPosters extends Component {
       columnCount: 1,
       posterWidth: 162,
       posterHeight: 238,
-      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
+      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}),
+      scrollRestored: false
     };
 
     this._isInitialized = false;
@@ -119,14 +120,16 @@ class MovieIndexPosters extends Component {
       posterOptions,
       jumpToCharacter,
       isSmallScreen,
-      isMovieEditorActive
+      isMovieEditorActive,
+      scrollTop
     } = this.props;
 
     const {
       width,
       columnWidth,
       columnCount,
-      rowHeight
+      rowHeight,
+      scrollRestored
     } = this.state;
 
     if (prevProps.sortKey !== sortKey ||
@@ -145,6 +148,11 @@ class MovieIndexPosters extends Component {
       this._grid.recomputeGridSize();
     }
 
+    if (this._grid && scrollTop !== 0 && !scrollRestored) {
+      this.setState({ scrollRestored: true });
+      this._grid.scrollToPosition({ scrollTop });
+    }
+
     if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
       const index = getIndexOfFirstCharacter(items, jumpToCharacter);
 
@@ -157,6 +165,10 @@ class MovieIndexPosters extends Component {
         });
       }
     }
+
+    if (this._grid && scrollTop !== 0) {
+      this._grid.scrollToPosition({ scrollTop });
+    }
   }
 
   //
@@ -332,6 +344,7 @@ MovieIndexPosters.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,

frontend/src/Movie/Index/Table/MovieIndexTable.js

@@ -87,6 +87,7 @@ class MovieIndexTable extends Component {
       isSmallScreen,
       onSortPress,
       scroller,
+      scrollTop,
       allSelected,
       allUnselected,
       onSelectAllChange,
@@ -100,6 +101,7 @@ class MovieIndexTable extends Component {
         items={items}
         scrollIndex={this.state.scrollIndex}
         isSmallScreen={isSmallScreen}
+        scrollTop={scrollTop}
         scroller={scroller}
         rowHeight={38}
         overscanRowCount={2}
@@ -130,6 +132,7 @@ MovieIndexTable.propTypes = {
   sortDirection: PropTypes.oneOf(sortDirections.all),
   jumpToCharacter: PropTypes.string,
   isSmallScreen: PropTypes.bool.isRequired,
+  scrollTop: PropTypes.number,
   scroller: PropTypes.instanceOf(Element).isRequired,
   onSortPress: PropTypes.func.isRequired,
   allSelected: PropTypes.bool.isRequired,