Navigate to collection from movie page

frontend/src/Collection/Overview/CollectionOverviews.js

@@ -53,7 +53,8 @@ class CollectionOverviews extends Component {
       columnCount: 1,
       posterWidth: 162,
       posterHeight: 238,
-      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
+      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}),
+      navigateToId: props.location.state ? props.location.state.navigateToId : 0
     };
 
     this._grid = null;
@@ -72,7 +73,8 @@ class CollectionOverviews extends Component {
     const {
       width,
       rowHeight,
-      scrollRestored
+      scrollRestored,
+      navigateToId
     } = this.state;
 
     if (prevProps.sortKey !== sortKey ||
@@ -106,6 +108,10 @@ class CollectionOverviews extends Component {
         });
       }
     }
+
+    if (navigateToId) {
+      this.scrollToItem(navigateToId)
+    }
   }
 
   //
@@ -186,6 +192,18 @@ class CollectionOverviews extends Component {
     );
   };
 
+  scrollToItem = (itemId) => {
+    const index = this.props.items.findIndex((item) => item.id === itemId);
+
+    if (index !== -1 && this._grid) {
+      this._grid.scrollToCell({
+        columnIndex: 0,
+        rowIndex: index,
+        align: 'start',
+      });
+    }
+  };
+
   //
   // Listeners
 

frontend/src/Components/Link/Link.tsx

@@ -9,7 +9,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import styles from './Link.css';
 
 interface ReactRouterLinkProps {
-  to?: string;
+  to?: any;
 }
 
 export interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
@@ -19,6 +19,7 @@ export interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
     | FunctionComponent<LinkProps>
     | ComponentClass<LinkProps, unknown>;
   to?: string;
+  toState?: string;
   target?: string;
   isDisabled?: boolean;
   noRouter?: boolean;

frontend/src/Movie/MovieCollectionLabel.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import styles from './MovieCollectionLabel.css';
+import Link from '../Components/Link/Link';
 
 class MovieCollectionLabel extends Component {
 
@@ -18,6 +19,7 @@ class MovieCollectionLabel extends Component {
 
   render() {
     const {
+      id,
       title,
       monitored,
       onMonitorTogglePress
@@ -31,7 +33,11 @@ class MovieCollectionLabel extends Component {
           size={15}
           onPress={onMonitorTogglePress}
         />
+        <Link
+          to={'/collections'}
+          toState={{ navigateToId: id}}>
           {title}
+        </Link>
       </div>
     );
   }