Fixed: Movie status on Wanted pages

(cherry picked from commit c9c8d4ad400f9e7066063236da180cf85ff63031)

frontend/src/Wanted/CutoffUnmet/CutoffUnmet.tsx

@@ -18,9 +18,19 @@ import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptions
 import TablePager from 'Components/Table/TablePager';
 import usePaging from 'Components/Table/usePaging';
 import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
+import usePrevious from 'Helpers/Hooks/usePrevious';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { align, icons, kinds } from 'Helpers/Props';
+import Movie from 'Movie/Movie';
 import { executeCommand } from 'Store/Actions/commandActions';
+import {
+  clearMovieFiles,
+  fetchMovieFiles,
+} from 'Store/Actions/movieFileActions';
+import {
+  clearQueueDetails,
+  fetchQueueDetails,
+} from 'Store/Actions/queueActions';
 import {
   batchToggleCutoffUnmetMovies,
   clearCutoffUnmet,
@@ -35,6 +45,8 @@ import { CheckInputChanged } from 'typings/inputs';
 import { SelectStateInputProps } from 'typings/props';
 import { TableOptionsChangePayload } from 'typings/Table';
 import getFilterValue from 'Utilities/Filter/getFilterValue';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import {
   registerPagePopulator,
   unregisterPagePopulator,
@@ -108,6 +120,8 @@ function CutoffUnmet() {
   const isSearchingForMovies =
     isSearchingForAllMovies || isSearchingForSelectedMovies;
 
+  const previousItems = usePrevious(items);
+
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
       setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
@@ -204,6 +218,8 @@ function CutoffUnmet() {
 
     return () => {
       dispatch(clearCutoffUnmet());
+      dispatch(clearQueueDetails());
+      dispatch(clearMovieFiles());
     };
   }, [requestCurrentPage, dispatch]);
 
@@ -223,6 +239,21 @@ function CutoffUnmet() {
     };
   }, [dispatch]);
 
+  useEffect(() => {
+    if (!previousItems || hasDifferentItems(items, previousItems)) {
+      const movieIds = selectUniqueIds<Movie, number>(items, 'id');
+      const movieFileIds = selectUniqueIds<Movie, number>(items, 'movieFileId');
+
+      if (movieIds.length) {
+        dispatch(fetchQueueDetails({ movieIds }));
+      }
+
+      if (movieFileIds.length) {
+        dispatch(fetchMovieFiles({ movieFileIds }));
+      }
+    }
+  }, [items, previousItems, dispatch]);
+
   return (
     <PageContent title={translate('CutoffUnmet')}>
       <PageToolbar>

frontend/src/Wanted/Missing/Missing.tsx

@@ -18,10 +18,16 @@ import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptions
 import TablePager from 'Components/Table/TablePager';
 import usePaging from 'Components/Table/usePaging';
 import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
+import usePrevious from 'Helpers/Hooks/usePrevious';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { align, icons, kinds } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import Movie from 'Movie/Movie';
 import { executeCommand } from 'Store/Actions/commandActions';
+import {
+  clearQueueDetails,
+  fetchQueueDetails,
+} from 'Store/Actions/queueActions';
 import {
   batchToggleMissingMovies,
   clearMissing,
@@ -36,6 +42,8 @@ import { CheckInputChanged } from 'typings/inputs';
 import { SelectStateInputProps } from 'typings/props';
 import { TableOptionsChangePayload } from 'typings/Table';
 import getFilterValue from 'Utilities/Filter/getFilterValue';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import {
   registerPagePopulator,
   unregisterPagePopulator,
@@ -112,6 +120,8 @@ function Missing() {
   const isSearchingForMovies =
     isSearchingForAllMovies || isSearchingForSelectedMovies;
 
+  const previousItems = usePrevious(items);
+
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
       setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
@@ -216,6 +226,7 @@ function Missing() {
 
     return () => {
       dispatch(clearMissing());
+      dispatch(clearQueueDetails());
     };
   }, [requestCurrentPage, dispatch]);
 
@@ -235,6 +246,16 @@ function Missing() {
     };
   }, [dispatch]);
 
+  useEffect(() => {
+    if (!previousItems || hasDifferentItems(items, previousItems)) {
+      const movieIds = selectUniqueIds<Movie, number>(items, 'id');
+
+      if (movieIds.length) {
+        dispatch(fetchQueueDetails({ movieIds }));
+      }
+    }
+  }, [items, previousItems, dispatch]);
+
   return (
     <PageContent title={translate('Missing')}>
       <PageToolbar>