From c990180e884f504c4d7cb7e442bd6a4e0651cbae Mon Sep 17 00:00:00 2001 From: John Bednarczyk Date: Sun, 12 Nov 2023 18:26:13 -0600 Subject: [PATCH 1/8] Navigate to collection from movie page --- .../Overview/CollectionOverviews.js | 22 +++++++++++++++++-- frontend/src/Components/Link/Link.tsx | 3 ++- frontend/src/Movie/MovieCollectionLabel.js | 8 ++++++- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/frontend/src/Collection/Overview/CollectionOverviews.js b/frontend/src/Collection/Overview/CollectionOverviews.js index c2faffb18..26d5c291d 100644 --- a/frontend/src/Collection/Overview/CollectionOverviews.js +++ b/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 diff --git a/frontend/src/Components/Link/Link.tsx b/frontend/src/Components/Link/Link.tsx index a7a7cd9b6..4e4110388 100644 --- a/frontend/src/Components/Link/Link.tsx +++ b/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 { @@ -19,6 +19,7 @@ export interface LinkProps extends React.HTMLProps { | FunctionComponent | ComponentClass; to?: string; + toState?: string; target?: string; isDisabled?: boolean; noRouter?: boolean; diff --git a/frontend/src/Movie/MovieCollectionLabel.js b/frontend/src/Movie/MovieCollectionLabel.js index fb071f91c..f637491d0 100644 --- a/frontend/src/Movie/MovieCollectionLabel.js +++ b/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} /> - {title} + + {title} + ); } From 5d702eebb753a9cc44c98d253c6fd5077c451a9c Mon Sep 17 00:00:00 2001 From: "john.bednarczyk" Date: Sat, 18 Nov 2023 14:30:44 -0600 Subject: [PATCH 2/8] Linting fixes --- .../Overview/CollectionOverviews.js | 7 ++-- frontend/src/Components/Link/Link.tsx | 41 +++++++++++-------- frontend/src/Movie/MovieCollectionLabel.js | 12 ++++-- 3 files changed, 36 insertions(+), 24 deletions(-) diff --git a/frontend/src/Collection/Overview/CollectionOverviews.js b/frontend/src/Collection/Overview/CollectionOverviews.js index 26d5c291d..7d843b641 100644 --- a/frontend/src/Collection/Overview/CollectionOverviews.js +++ b/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; diff --git a/frontend/src/Components/Link/Link.tsx b/frontend/src/Components/Link/Link.tsx index 4e4110388..7e304584c 100644 --- a/frontend/src/Components/Link/Link.tsx +++ b/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 { className?: string; component?: | string | FunctionComponent | ComponentClass; - 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 & ReactRouterLinkProps = { + const linkProps: React.HTMLProps & 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; } } diff --git a/frontend/src/Movie/MovieCollectionLabel.js b/frontend/src/Movie/MovieCollectionLabel.js index f637491d0..76abeb377 100644 --- a/frontend/src/Movie/MovieCollectionLabel.js +++ b/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} /> + to={{ + pathname: '/collections', + state: { navigateToId: id } + }} + > {title} @@ -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; From d7341aa0c1e9c2fe90909d6ffce57d7bf1dc1fca Mon Sep 17 00:00:00 2001 From: "john.bednarczyk" Date: Sun, 26 Nov 2023 08:04:07 -0600 Subject: [PATCH 3/8] Change movie collection title color --- frontend/src/Movie/MovieCollectionLabel.css | 4 ++++ frontend/src/Movie/MovieCollectionLabel.css.d.ts | 1 + frontend/src/Movie/MovieCollectionLabel.js | 1 + 3 files changed, 6 insertions(+) diff --git a/frontend/src/Movie/MovieCollectionLabel.css b/frontend/src/Movie/MovieCollectionLabel.css index 7a75a4a1c..041c1ead4 100644 --- a/frontend/src/Movie/MovieCollectionLabel.css +++ b/frontend/src/Movie/MovieCollectionLabel.css @@ -7,3 +7,7 @@ color: var(--iconButtonHoverLightColor); } } + +.titleLink { + color: inherit; +} diff --git a/frontend/src/Movie/MovieCollectionLabel.css.d.ts b/frontend/src/Movie/MovieCollectionLabel.css.d.ts index 0e1588bee..0b1225152 100644 --- a/frontend/src/Movie/MovieCollectionLabel.css.d.ts +++ b/frontend/src/Movie/MovieCollectionLabel.css.d.ts @@ -2,6 +2,7 @@ // Please do not change this file! interface CssExports { 'monitorToggleButton': string; + 'titleLink': string; } export const cssExports: CssExports; export default cssExports; diff --git a/frontend/src/Movie/MovieCollectionLabel.js b/frontend/src/Movie/MovieCollectionLabel.js index 76abeb377..135ce2ae7 100644 --- a/frontend/src/Movie/MovieCollectionLabel.js +++ b/frontend/src/Movie/MovieCollectionLabel.js @@ -38,6 +38,7 @@ class MovieCollectionLabel extends Component { pathname: '/collections', state: { navigateToId: id } }} + className={styles.titleLink} > {title} From 6baefe7a5c15b099011109eec196c19f23e52983 Mon Sep 17 00:00:00 2001 From: "john.bednarczyk" Date: Fri, 19 Jan 2024 16:48:16 -0600 Subject: [PATCH 4/8] Use tmdbId instead of collection id --- frontend/src/Collection/Overview/CollectionOverviews.js | 2 +- frontend/src/Movie/MovieCollectionLabel.js | 6 +++--- .../createCollectionClientSideCollectionItemsSelector.js | 2 ++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/Collection/Overview/CollectionOverviews.js b/frontend/src/Collection/Overview/CollectionOverviews.js index 7d843b641..c1842e860 100644 --- a/frontend/src/Collection/Overview/CollectionOverviews.js +++ b/frontend/src/Collection/Overview/CollectionOverviews.js @@ -193,7 +193,7 @@ class CollectionOverviews extends Component { }; scrollToItem = (itemId) => { - const index = this.props.items.findIndex((item) => item.id === itemId); + const index = this.props.items.findIndex((item) => item.tmdbId === itemId); if (index !== -1 && this._grid) { this._grid.scrollToCell({ diff --git a/frontend/src/Movie/MovieCollectionLabel.js b/frontend/src/Movie/MovieCollectionLabel.js index 135ce2ae7..5f7400144 100644 --- a/frontend/src/Movie/MovieCollectionLabel.js +++ b/frontend/src/Movie/MovieCollectionLabel.js @@ -19,7 +19,7 @@ class MovieCollectionLabel extends Component { render() { const { - id, + tmdbId, title, monitored, onMonitorTogglePress @@ -36,7 +36,7 @@ class MovieCollectionLabel extends Component { @@ -51,7 +51,7 @@ MovieCollectionLabel.propTypes = { title: PropTypes.string.isRequired, monitored: PropTypes.bool.isRequired, onMonitorTogglePress: PropTypes.func.isRequired, - id: PropTypes.string.isRequired + tmdbId: PropTypes.string.isRequired }; export default MovieCollectionLabel; diff --git a/frontend/src/Store/Selectors/createCollectionClientSideCollectionItemsSelector.js b/frontend/src/Store/Selectors/createCollectionClientSideCollectionItemsSelector.js index fd925a81c..0ff24f289 100644 --- a/frontend/src/Store/Selectors/createCollectionClientSideCollectionItemsSelector.js +++ b/frontend/src/Store/Selectors/createCollectionClientSideCollectionItemsSelector.js @@ -9,11 +9,13 @@ function createUnoptimizedSelector(uiSection) { const items = movies.items.map((s) => { const { id, + tmdbId, sortTitle } = s; return { id, + tmdbId, sortTitle }; }); From ecfcf2ef637a93d46bd4fac389f7443703c94679 Mon Sep 17 00:00:00 2001 From: "john.bednarczyk" Date: Sat, 3 Feb 2024 11:48:21 -0600 Subject: [PATCH 5/8] Prevent navigating to item on re-renders --- frontend/src/Collection/Overview/CollectionOverviews.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/Collection/Overview/CollectionOverviews.js b/frontend/src/Collection/Overview/CollectionOverviews.js index c1842e860..1e9fbef95 100644 --- a/frontend/src/Collection/Overview/CollectionOverviews.js +++ b/frontend/src/Collection/Overview/CollectionOverviews.js @@ -202,6 +202,9 @@ class CollectionOverviews extends Component { align: 'start' }); } + + // Replacing the history to prevent navigating back to this item on re-renders + window.history.replaceState({}, '') }; // From d2bec496649aadff3cdd4a185d3aedf319a9136d Mon Sep 17 00:00:00 2001 From: "john.bednarczyk" Date: Sat, 3 Feb 2024 11:48:34 -0600 Subject: [PATCH 6/8] Code review fixes --- frontend/src/Collection/Overview/CollectionOverviews.js | 2 +- frontend/src/Movie/MovieCollectionLabel.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/Collection/Overview/CollectionOverviews.js b/frontend/src/Collection/Overview/CollectionOverviews.js index 1e9fbef95..5ba0c5509 100644 --- a/frontend/src/Collection/Overview/CollectionOverviews.js +++ b/frontend/src/Collection/Overview/CollectionOverviews.js @@ -54,7 +54,7 @@ class CollectionOverviews extends Component { posterWidth: 162, posterHeight: 238, rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}), - navigateToId: props.location.state ? props.location.state.navigateToId : 0 + navigateToId: props.location.state?.navigateToId ?? 0 }; this._grid = null; diff --git a/frontend/src/Movie/MovieCollectionLabel.js b/frontend/src/Movie/MovieCollectionLabel.js index 5f7400144..8789adb43 100644 --- a/frontend/src/Movie/MovieCollectionLabel.js +++ b/frontend/src/Movie/MovieCollectionLabel.js @@ -51,7 +51,7 @@ MovieCollectionLabel.propTypes = { title: PropTypes.string.isRequired, monitored: PropTypes.bool.isRequired, onMonitorTogglePress: PropTypes.func.isRequired, - tmdbId: PropTypes.string.isRequired + tmdbId: PropTypes.number.isRequired }; export default MovieCollectionLabel; From 4792b45b1335e21528fd1a92b909671a34f7c976 Mon Sep 17 00:00:00 2001 From: "john.bednarczyk" Date: Sat, 3 Feb 2024 11:53:53 -0600 Subject: [PATCH 7/8] Fix linting issues --- frontend/src/Collection/Overview/CollectionOverviews.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Collection/Overview/CollectionOverviews.js b/frontend/src/Collection/Overview/CollectionOverviews.js index 5ba0c5509..776021f1a 100644 --- a/frontend/src/Collection/Overview/CollectionOverviews.js +++ b/frontend/src/Collection/Overview/CollectionOverviews.js @@ -204,7 +204,7 @@ class CollectionOverviews extends Component { } // Replacing the history to prevent navigating back to this item on re-renders - window.history.replaceState({}, '') + window.history.replaceState({}, ''); }; // From 56b084ebcfd86fc7ebcccba50c2cd3b03997b48d Mon Sep 17 00:00:00 2001 From: "john.bednarczyk" Date: Sat, 3 Feb 2024 12:37:26 -0600 Subject: [PATCH 8/8] Fix issue with navigating collection names --- frontend/src/Collection/Overview/CollectionOverviews.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/Collection/Overview/CollectionOverviews.js b/frontend/src/Collection/Overview/CollectionOverviews.js index 776021f1a..a64adceb7 100644 --- a/frontend/src/Collection/Overview/CollectionOverviews.js +++ b/frontend/src/Collection/Overview/CollectionOverviews.js @@ -205,6 +205,10 @@ class CollectionOverviews extends Component { // Replacing the history to prevent navigating back to this item on re-renders window.history.replaceState({}, ''); + + this.setState({ + navigateToId: 0 + }); }; //