Linting fixes

frontend/src/Collection/Overview/CollectionOverviews.js

@@ -110,7 +110,7 @@ class CollectionOverviews extends Component {
     }
 
     if (navigateToId) {
-      this.scrollToItem(navigateToId)
+      this.scrollToItem(navigateToId);
     }
   }
 
@@ -199,7 +199,7 @@ class CollectionOverviews extends Component {
       this._grid.scrollToCell({
         columnIndex: 0,
         rowIndex: index,
-        align: 'start',
+        align: 'start'
       });
     }
   };
@@ -283,7 +283,8 @@ CollectionOverviews.propTypes = {
   isSmallScreen: PropTypes.bool.isRequired,
   timeFormat: PropTypes.string.isRequired,
   selectedState: PropTypes.object.isRequired,
-  onSelectedChange: PropTypes.func.isRequired
+  onSelectedChange: PropTypes.func.isRequired,
+  location: PropTypes.object.isRequired
 };
 
 export default CollectionOverviews;

frontend/src/Components/Link/Link.tsx

@@ -8,18 +8,13 @@ import React, {
 import { Link as RouterLink } from 'react-router-dom';
 import styles from './Link.css';
 
-interface ReactRouterLinkProps {
-  to?: any;
-}
-
 export interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
   className?: string;
   component?:
     | string
     | FunctionComponent<LinkProps>
     | ComponentClass<LinkProps, unknown>;
-  to?: string;
-  toState?: string;
+  to?: string | { pathname: string; state?: object };
   target?: string;
   isDisabled?: boolean;
   noRouter?: boolean;
@@ -47,26 +42,38 @@ function Link(props: LinkProps) {
     [isDisabled, onPress]
   );
 
-  const linkProps: React.HTMLProps<HTMLAnchorElement> & ReactRouterLinkProps = {
+  const linkProps: React.HTMLProps<HTMLAnchorElement> & LinkProps = {
     target,
   };
   let el = component;
 
   if (to) {
-    if (/\w+?:\/\//.test(to)) {
-      el = 'a';
-      linkProps.href = to;
-      linkProps.target = target || '_blank';
-      linkProps.rel = 'noreferrer';
-    } else if (noRouter) {
-      el = 'a';
-      linkProps.href = to;
-      linkProps.target = target || '_self';
+    if (typeof to === 'string') {
+      if (/\w+?:\/\//.test(to)) {
+        el = 'a';
+        linkProps.href = to;
+        linkProps.target = target || '_blank';
+        linkProps.rel = 'noreferrer';
+      } else if (noRouter) {
+        el = 'a';
+        linkProps.href = to;
+        linkProps.target = target || '_self';
+      } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        el = RouterLink;
+        linkProps.to = `${window.Radarr.urlBase}/${to.replace(/^\//, '')}`;
+        linkProps.target = target;
+      }
     } else {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       el = RouterLink;
-      linkProps.to = `${window.Radarr.urlBase}/${to.replace(/^\//, '')}`;
+      const url = `${window.Radarr.urlBase}/${to.pathname.replace(/^\//, '')}`;
+      linkProps.to = {
+        pathname: url,
+        ...(to.state && { state: to.state }),
+      };
       linkProps.target = target;
     }
   }

frontend/src/Movie/MovieCollectionLabel.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Link from 'Components/Link/Link';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import styles from './MovieCollectionLabel.css';
-import Link from '../Components/Link/Link';
 
 class MovieCollectionLabel extends Component {
 
@@ -34,8 +34,11 @@ class MovieCollectionLabel extends Component {
           onPress={onMonitorTogglePress}
         />
         <Link
-          to={'/collections'}
-          toState={{ navigateToId: id}}>
+          to={{
+            pathname: '/collections',
+            state: { navigateToId: id }
+          }}
+        >
           {title}
         </Link>
       </div>
@@ -46,7 +49,8 @@ class MovieCollectionLabel extends Component {
 MovieCollectionLabel.propTypes = {
   title: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,
-  onMonitorTogglePress: PropTypes.func.isRequired
+  onMonitorTogglePress: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired
 };
 
 export default MovieCollectionLabel;