diff --git a/frontend/src/Activity/Queue/RemoveQueueItemModal.tsx b/frontend/src/Activity/Queue/RemoveQueueItemModal.tsx index a0ac0a663..e15285bd0 100644 --- a/frontend/src/Activity/Queue/RemoveQueueItemModal.tsx +++ b/frontend/src/Activity/Queue/RemoveQueueItemModal.tsx @@ -1,4 +1,6 @@ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useMemo } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import AppState from 'App/State/AppState'; import FormGroup from 'Components/Form/FormGroup'; import FormInputGroup from 'Components/Form/FormInputGroup'; import FormLabel from 'Components/Form/FormLabel'; @@ -10,6 +12,8 @@ import ModalContent from 'Components/Modal/ModalContent'; import ModalFooter from 'Components/Modal/ModalFooter'; import ModalHeader from 'Components/Modal/ModalHeader'; import { inputTypes, kinds, sizes } from 'Helpers/Props'; +import { setQueueRemovalOption } from 'Store/Actions/queueActions'; +import { InputChanged } from 'typings/inputs'; import translate from 'Utilities/String/translate'; import styles from './RemoveQueueItemModal.css'; @@ -31,12 +35,6 @@ interface RemoveQueueItemModalProps { onModalClose: () => void; } -type RemovalMethod = 'removeFromClient' | 'changeCategory' | 'ignore'; -type BlocklistMethod = - | 'doNotBlocklist' - | 'blocklistAndSearch' - | 'blocklistOnly'; - function RemoveQueueItemModal(props: RemoveQueueItemModalProps) { const { isOpen, @@ -49,12 +47,13 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) { onModalClose, } = props; + const dispatch = useDispatch(); + const multipleSelected = selectedCount && selectedCount > 1; - const [removalMethod, setRemovalMethod] = - useState('removeFromClient'); - const [blocklistMethod, setBlocklistMethod] = - useState('doNotBlocklist'); + const { removalMethod, blocklistMethod } = useSelector( + (state: AppState) => state.queue.removalOptions + ); const { title, message } = useMemo(() => { if (!selectedCount) { @@ -138,18 +137,11 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) { return options; }, [isPending, multipleSelected]); - const handleRemovalMethodChange = useCallback( - ({ value }: { value: RemovalMethod }) => { - setRemovalMethod(value); + const handleRemovalOptionInputChange = useCallback( + ({ name, value }: InputChanged) => { + dispatch(setQueueRemovalOption({ [name]: value })); }, - [setRemovalMethod] - ); - - const handleBlocklistMethodChange = useCallback( - ({ value }: { value: BlocklistMethod }) => { - setBlocklistMethod(value); - }, - [setBlocklistMethod] + [dispatch] ); const handleConfirmRemove = useCallback(() => { @@ -159,23 +151,11 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) { blocklist: blocklistMethod !== 'doNotBlocklist', skipRedownload: blocklistMethod === 'blocklistOnly', }); - - setRemovalMethod('removeFromClient'); - setBlocklistMethod('doNotBlocklist'); - }, [ - removalMethod, - blocklistMethod, - setRemovalMethod, - setBlocklistMethod, - onRemovePress, - ]); + }, [removalMethod, blocklistMethod, onRemovePress]); const handleModalClose = useCallback(() => { - setRemovalMethod('removeFromClient'); - setBlocklistMethod('doNotBlocklist'); - onModalClose(); - }, [setRemovalMethod, setBlocklistMethod, onModalClose]); + }, [onModalClose]); return ( @@ -198,7 +178,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) { helpTextWarning={translate( 'RemoveQueueItemRemovalMethodHelpTextWarning' )} - onChange={handleRemovalMethodChange} + onChange={handleRemovalOptionInputChange} /> )} @@ -216,7 +196,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) { value={blocklistMethod} values={blocklistMethodOptions} helpText={translate('BlocklistReleaseHelpText')} - onChange={handleBlocklistMethodChange} + onChange={handleRemovalOptionInputChange} /> diff --git a/frontend/src/App/State/QueueAppState.ts b/frontend/src/App/State/QueueAppState.ts index 954d649a2..77b2ce2ff 100644 --- a/frontend/src/App/State/QueueAppState.ts +++ b/frontend/src/App/State/QueueAppState.ts @@ -32,6 +32,17 @@ export interface QueuePagedAppState removeError: Error; } +export type RemovalMethod = 'removeFromClient' | 'changeCategory' | 'ignore'; +export type BlocklistMethod = + | 'doNotBlocklist' + | 'blocklistAndSearch' + | 'blocklistOnly'; + +interface RemovalOptions { + removalMethod: RemovalMethod; + blocklistMethod: BlocklistMethod; +} + interface QueueAppState { status: AppSectionItemState; details: QueueDetailsAppState; @@ -39,6 +50,7 @@ interface QueueAppState { options: { includeUnknownSeriesItems: boolean; }; + removalOptions: RemovalOptions; } export default QueueAppState; diff --git a/frontend/src/Store/Actions/queueActions.js b/frontend/src/Store/Actions/queueActions.js index ca97e5213..3bc90f1fd 100644 --- a/frontend/src/Store/Actions/queueActions.js +++ b/frontend/src/Store/Actions/queueActions.js @@ -31,6 +31,11 @@ export const defaultState = { includeUnknownSeriesItems: true }, + removalOptions: { + removalMethod: 'removeFromClient', + blocklistMethod: 'doNotBlocklist' + }, + status: { isFetching: false, isPopulated: false, @@ -225,6 +230,7 @@ export const defaultState = { export const persistState = [ 'queue.options', + 'queue.removalOptions', 'queue.paged.pageSize', 'queue.paged.sortKey', 'queue.paged.sortDirection', @@ -257,6 +263,7 @@ export const SET_QUEUE_SORT = 'queue/setQueueSort'; export const SET_QUEUE_FILTER = 'queue/setQueueFilter'; export const SET_QUEUE_TABLE_OPTION = 'queue/setQueueTableOption'; export const SET_QUEUE_OPTION = 'queue/setQueueOption'; +export const SET_QUEUE_REMOVAL_OPTION = 'queue/setQueueRemoveOption'; export const CLEAR_QUEUE = 'queue/clearQueue'; export const GRAB_QUEUE_ITEM = 'queue/grabQueueItem'; @@ -282,6 +289,7 @@ export const setQueueSort = createThunk(SET_QUEUE_SORT); export const setQueueFilter = createThunk(SET_QUEUE_FILTER); export const setQueueTableOption = createAction(SET_QUEUE_TABLE_OPTION); export const setQueueOption = createAction(SET_QUEUE_OPTION); +export const setQueueRemovalOption = createAction(SET_QUEUE_REMOVAL_OPTION); export const clearQueue = createAction(CLEAR_QUEUE); export const grabQueueItem = createThunk(GRAB_QUEUE_ITEM); @@ -529,6 +537,18 @@ export const reducers = createHandleActions({ }; }, + [SET_QUEUE_REMOVAL_OPTION]: function(state, { payload }) { + const queueRemovalOptions = state.removalOptions; + + return { + ...state, + removalOptions: { + ...queueRemovalOptions, + ...payload + } + }; + }, + [CLEAR_QUEUE]: createClearReducer(paged, { isFetching: false, isPopulated: false,