Fixed: Restoring scroll position when going back to index page

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 && (prevState.width !== width || hasDifferentItemsOrOrder(prevProps.items, items))) {
@@ -60,6 +63,11 @@ class VirtualTable extends Component {
       this._grid.recomputeGridSize();
     }
 
+    if (this._grid && scrollTop !== undefined && scrollTop !== 0 && !scrollRestored) {
+      this.setState({ scrollRestored: true });
+      this._grid.scrollToPosition({ scrollTop });
+    }
+
     if (scrollIndex != null && scrollIndex !== prevProps.scrollIndex) {
       this._grid.scrollToCell({
         rowIndex: scrollIndex,
@@ -137,6 +145,7 @@ class VirtualTable extends Component {
                 {header}
                 <div ref={registerChild}>
                   <Grid
+                    {...otherProps}
                     ref={this.setGridRef}
                     autoContainerWidth={true}
                     autoHeight={true}
@@ -158,7 +167,6 @@ class VirtualTable extends Component {
                     className={styles.tableBodyContainer}
                     style={gridStyle}
                     containerStyle={containerStyle}
-                    {...otherProps}
                   />
                 </div>
               </Scroller>
@@ -176,6 +184,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,

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/Series/Index/Overview/SeriesIndexOverviews.js

@@ -60,7 +60,8 @@ class SeriesIndexOverviews 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,12 +73,14 @@ class SeriesIndexOverviews extends Component {
       sortKey,
       overviewOptions,
       jumpToCharacter,
+      scrollTop,
       isSmallScreen
     } = this.props;
 
     const {
       width,
-      rowHeight
+      rowHeight,
+      scrollRestored
     } = this.state;
 
     if (prevProps.sortKey !== sortKey ||
@@ -97,6 +100,11 @@ class SeriesIndexOverviews 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);
 
@@ -255,6 +263,7 @@ SeriesIndexOverviews.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   sortKey: PropTypes.string,
   overviewOptions: PropTypes.object.isRequired,
+  scrollTop: PropTypes.number.isRequired,
   jumpToCharacter: PropTypes.string,
   scroller: PropTypes.instanceOf(Element).isRequired,
   showRelativeDates: PropTypes.bool.isRequired,

frontend/src/Series/Index/Posters/SeriesIndexPosters.js

@@ -101,7 +101,8 @@ class SeriesIndexPosters 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;
@@ -115,6 +116,7 @@ class SeriesIndexPosters extends Component {
       sortKey,
       posterOptions,
       jumpToCharacter,
+      scrollTop,
       isSmallScreen
     } = this.props;
 
@@ -122,7 +124,8 @@ class SeriesIndexPosters extends Component {
       width,
       columnWidth,
       columnCount,
-      rowHeight
+      rowHeight,
+      scrollRestored
     } = this.state;
 
     if (prevProps.sortKey !== sortKey ||
@@ -140,6 +143,11 @@ class SeriesIndexPosters 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);
 
@@ -315,6 +323,7 @@ SeriesIndexPosters.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/Series/Index/Table/SeriesIndexTable.js

@@ -82,7 +82,8 @@ class SeriesIndexTable extends Component {
       showBanners,
       isSmallScreen,
       onSortPress,
-      scroller
+      scroller,
+      scrollTop
     } = this.props;
 
     return (
@@ -90,6 +91,7 @@ class SeriesIndexTable extends Component {
         className={styles.tableContainer}
         items={items}
         scrollIndex={this.state.scrollIndex}
+        scrollTop={scrollTop}
         scroller={scroller}
         isSmallScreen={isSmallScreen}
         rowHeight={showBanners ? 70 : 38}
@@ -117,6 +119,7 @@ SeriesIndexTable.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