New: Include year in interactive searches title

Fixes #11070

frontend/src/Movie/Details/MovieDetails.tsx

@@ -968,7 +968,6 @@ function MovieDetails({ movieId }: MovieDetailsProps) {
         <MovieInteractiveSearchModal
           isOpen={isInteractiveSearchModalOpen}
           movieId={id}
-          movieTitle={title}
           onModalClose={handleInteractiveSearchModalClose}
         />
       </PageContentBody>

frontend/src/Movie/MovieSearchCell.tsx

@@ -14,12 +14,9 @@ import styles from './MovieSearchCell.css';
 
 interface MovieSearchCellProps {
   movieId: number;
-  movieTitle: string;
 }
 
-function MovieSearchCell(props: MovieSearchCellProps) {
+function MovieSearchCell({ movieId }: MovieSearchCellProps) {
-  const { movieId, movieTitle } = props;
-
   const executingCommands = useSelector(createExecutingCommandsSelector());
   const isSearching = executingCommands.some(({ name, body }) => {
     const { movieIds = [] } = body;
@@ -61,7 +58,6 @@ function MovieSearchCell(props: MovieSearchCellProps) {
       <MovieInteractiveSearchModal
         isOpen={isInteractiveSearchModalOpen}
         movieId={movieId}
-        movieTitle={movieTitle}
         onModalClose={setInteractiveSearchModalClosed}
       />
     </TableRowCell>

frontend/src/Movie/Search/MovieInteractiveSearchModal.tsx

@@ -17,9 +17,11 @@ interface MovieInteractiveSearchModalProps
   isOpen: boolean;
 }
 
-function MovieInteractiveSearchModal(props: MovieInteractiveSearchModalProps) {
+function MovieInteractiveSearchModal({
-  const { isOpen, movieId, movieTitle, onModalClose } = props;
+  isOpen,
-
+  movieId,
+  onModalClose,
+}: MovieInteractiveSearchModalProps) {
   const dispatch = useDispatch();
 
   const handleModalClose = useCallback(() => {
@@ -41,7 +43,6 @@ function MovieInteractiveSearchModal(props: MovieInteractiveSearchModalProps) {
     >
       <MovieInteractiveSearchModalContent
         movieId={movieId}
-        movieTitle={movieTitle}
         onModalClose={handleModalClose}
       />
     </Modal>

frontend/src/Movie/Search/MovieInteractiveSearchModalContent.tsx

@@ -7,6 +7,8 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { scrollDirections } from 'Helpers/Props';
 import InteractiveSearch from 'InteractiveSearch/InteractiveSearch';
+import Movie from 'Movie/Movie';
+import useMovie from 'Movie/useMovie';
 import { clearMovieBlocklist } from 'Store/Actions/movieBlocklistActions';
 import { clearMovieHistory } from 'Store/Actions/movieHistoryActions';
 import {
@@ -17,17 +19,17 @@ import translate from 'Utilities/String/translate';
 
 export interface MovieInteractiveSearchModalContentProps {
   movieId: number;
-  movieTitle?: string;
   onModalClose(): void;
 }
 
 function MovieInteractiveSearchModalContent({
   movieId,
-  movieTitle,
   onModalClose,
 }: MovieInteractiveSearchModalContentProps) {
   const dispatch = useDispatch();
 
+  const { title, year } = useMovie(movieId) as Movie;
+
   useEffect(() => {
     return () => {
       dispatch(cancelFetchReleases());
@@ -38,6 +40,8 @@ function MovieInteractiveSearchModalContent({
     };
   }, [dispatch]);
 
+  const movieTitle = `${title}${year > 0 ? ` (${year})` : ''}`;
+
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>

frontend/src/Wanted/CutoffUnmet/CutoffUnmetRow.js

@@ -141,7 +141,6 @@ function CutoffUnmetRow(props) {
               <MovieSearchCell
                 key={name}
                 movieId={id}
-                movieTitle={title}
                 movieEntity={movieEntities.WANTED_CUTOFF_UNMET}
               />
             );

frontend/src/Wanted/Missing/MissingRow.js

@@ -131,7 +131,6 @@ function MissingRow(props) {
               <MovieSearchCell
                 key={name}
                 movieId={id}
-                movieTitle={title}
                 movieEntity={movieEntities.WANTED_MISSING}
               />
             );