diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.tsx b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.tsx index 48270cfa8..2444ecbc5 100644 --- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.tsx +++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import QueueDetailsProvider from 'Activity/Queue/Details/QueueDetailsProvider'; import { SelectProvider, useSelect } from 'App/Select/SelectContext'; import AppState, { Filter } from 'App/State/AppState'; import * as commandNames from 'Commands/commandNames'; @@ -22,6 +23,7 @@ import Episode from 'Episode/Episode'; import useCurrentPage from 'Helpers/Hooks/useCurrentPage'; import { align, icons, kinds } from 'Helpers/Props'; import { executeCommand } from 'Store/Actions/commandActions'; +import { fetchEpisodeFiles } from 'Store/Actions/episodeFileActions'; import { batchToggleCutoffUnmetEpisodes, clearCutoffUnmet, @@ -35,6 +37,7 @@ import createCommandExecutingSelector from 'Store/Selectors/createCommandExecuti import { CheckInputChanged } from 'typings/inputs'; import { TableOptionsChangePayload } from 'typings/Table'; import getFilterValue from 'Utilities/Filter/getFilterValue'; +import selectUniqueIds from 'Utilities/Object/selectUniqueIds'; import { registerPagePopulator, unregisterPagePopulator, @@ -108,6 +111,14 @@ function CutoffUnmetContent() { const isSearchingForEpisodes = isSearchingForAllEpisodes || isSearchingForSelectedEpisodes; + const episodeIds = useMemo(() => { + return selectUniqueIds(items, 'id'); + }, [items]); + + const episodeFileIds = useMemo(() => { + return selectUniqueIds(items, 'episodeFileId'); + }, [items]); + const handleSelectAllChange = useCallback( ({ value }: CheckInputChanged) => { if (value) { @@ -214,128 +225,144 @@ function CutoffUnmetContent() { }; }, [dispatch]); + useEffect(() => { + if (episodeFileIds.length) { + dispatch(fetchEpisodeFiles({ episodeFileIds })); + } + }, [episodeFileIds, dispatch]); + return ( - - - - - - - - - - - - + + + + - - - - + - - {isFetching && !isPopulated ? : null} + + - {!isFetching && error ? ( - {translate('CutoffUnmetLoadError')} - ) : null} - - {isPopulated && !error && !items.length ? ( - {translate('CutoffUnmetNoItems')} - ) : null} - - {isPopulated && !error && !!items.length ? ( -
- + - - {items.map((item) => { - return ( - - ); - })} - -
+ + - + + - + + {isFetching && !isPopulated ? : null} + + {!isFetching && error ? ( + + {translate('CutoffUnmetLoadError')} + + ) : null} + + {isPopulated && !error && !items.length ? ( + {translate('CutoffUnmetNoItems')} + ) : null} + + {isPopulated && !error && !!items.length ? ( +
+ + + {items.map((item) => { + return ( + + ); + })} + +
+ + + + - {translate( - 'SearchForCutoffUnmetEpisodesConfirmationCount', - { totalRecords } - )} +
+ {translate( + 'SearchForCutoffUnmetEpisodesConfirmationCount', + { totalRecords } + )} +
+
{translate('MassSearchCancelWarning')}
-
{translate('MassSearchCancelWarning')}
-
- } - confirmLabel={translate('Search')} - onConfirm={handleSearchAllCutoffUnmetConfirmed} - onCancel={handleConfirmSearchAllCutoffUnmetModalClose} - /> - - ) : null} -
-
+ } + confirmLabel={translate('Search')} + onConfirm={handleSearchAllCutoffUnmetConfirmed} + onCancel={handleConfirmSearchAllCutoffUnmetModalClose} + /> + + ) : null} + + + ); } diff --git a/frontend/src/Wanted/Missing/Missing.tsx b/frontend/src/Wanted/Missing/Missing.tsx index d8a042ab4..e97fe7273 100644 --- a/frontend/src/Wanted/Missing/Missing.tsx +++ b/frontend/src/Wanted/Missing/Missing.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import QueueDetailsProvider from 'Activity/Queue/Details/QueueDetailsProvider'; import { SelectProvider, useSelect } from 'App/Select/SelectContext'; import AppState, { Filter } from 'App/State/AppState'; import * as commandNames from 'Commands/commandNames'; @@ -36,6 +37,7 @@ import createCommandExecutingSelector from 'Store/Selectors/createCommandExecuti import { CheckInputChanged } from 'typings/inputs'; import { TableOptionsChangePayload } from 'typings/Table'; import getFilterValue from 'Utilities/Filter/getFilterValue'; +import selectUniqueIds from 'Utilities/Object/selectUniqueIds'; import { registerPagePopulator, unregisterPagePopulator, @@ -112,6 +114,10 @@ function MissingContent() { const isSearchingForEpisodes = isSearchingForAllEpisodes || isSearchingForSelectedEpisodes; + const episodeIds = useMemo(() => { + return selectUniqueIds(items, 'id'); + }, [items]); + const handleSelectAllChange = useCallback( ({ value }: CheckInputChanged) => { if (value) { @@ -227,139 +233,146 @@ function MissingContent() { }, [dispatch]); return ( - - - - - - - - - - - - - - - - + + + + - - - - + - - {isFetching && !isPopulated ? : null} + - {!isFetching && error ? ( - {translate('MissingLoadError')} - ) : null} + - {isPopulated && !error && !items.length ? ( - {translate('MissingNoItems')} - ) : null} + + - {isPopulated && !error && !!items.length ? ( -
- + - - {items.map((item) => { - return ( - - ); - })} - -
+ + - + + - + + {isFetching && !isPopulated ? : null} + + {!isFetching && error ? ( + {translate('MissingLoadError')} + ) : null} + + {isPopulated && !error && !items.length ? ( + {translate('MissingNoItems')} + ) : null} + + {isPopulated && !error && !!items.length ? ( +
+ + + {items.map((item) => { + return ( + + ); + })} + +
+ + + + - {translate('SearchForAllMissingEpisodesConfirmationCount', { - totalRecords, - })} +
+ {translate( + 'SearchForAllMissingEpisodesConfirmationCount', + { + totalRecords, + } + )} +
+
{translate('MassSearchCancelWarning')}
-
{translate('MassSearchCancelWarning')}
-
- } - confirmLabel={translate('Search')} - onConfirm={handleSearchAllMissingConfirmed} - onCancel={handleConfirmSearchAllMissingModalClose} - /> - - ) : null} -
+ } + confirmLabel={translate('Search')} + onConfirm={handleSearchAllMissingConfirmed} + onCancel={handleConfirmSearchAllMissingModalClose} + /> + + ) : null} + - -
+ + + ); }