New: Persist queue removal option in browser

Closes #7938

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] =
+  const { removalMethod, blocklistMethod } = useSelector(
-    useState<RemovalMethod>('removeFromClient');
+    (state: AppState) => state.queue.removalOptions
-  const [blocklistMethod, setBlocklistMethod] =
+  );
-    useState<BlocklistMethod>('doNotBlocklist');
 
   const { title, message } = useMemo(() => {
     if (!selectedCount) {
@@ -138,18 +137,11 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
     return options;
   }, [isPending, multipleSelected]);
 
-  const handleRemovalMethodChange = useCallback(
+  const handleRemovalOptionInputChange = useCallback(
-    ({ value }: { value: RemovalMethod }) => {
+    ({ name, value }: InputChanged) => {
-      setRemovalMethod(value);
+      dispatch(setQueueRemovalOption({ [name]: value }));
     },
-    [setRemovalMethod]
+    [dispatch]
-  );
-
-  const handleBlocklistMethodChange = useCallback(
-    ({ value }: { value: BlocklistMethod }) => {
-      setBlocklistMethod(value);
-    },
-    [setBlocklistMethod]
   );
 
   const handleConfirmRemove = useCallback(() => {
@@ -159,23 +151,11 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
       blocklist: blocklistMethod !== 'doNotBlocklist',
       skipRedownload: blocklistMethod === 'blocklistOnly',
     });
-
+  }, [removalMethod, blocklistMethod, onRemovePress]);
-    setRemovalMethod('removeFromClient');
-    setBlocklistMethod('doNotBlocklist');
-  }, [
-    removalMethod,
-    blocklistMethod,
-    setRemovalMethod,
-    setBlocklistMethod,
-    onRemovePress,
-  ]);
 
   const handleModalClose = useCallback(() => {
-    setRemovalMethod('removeFromClient');
-    setBlocklistMethod('doNotBlocklist');
-
     onModalClose();
-  }, [setRemovalMethod, setBlocklistMethod, onModalClose]);
+  }, [onModalClose]);
 
   return (
     <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={handleModalClose}>
@@ -198,7 +178,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
                 helpTextWarning={translate(
                   'RemoveQueueItemRemovalMethodHelpTextWarning'
                 )}
-                onChange={handleRemovalMethodChange}
+                onChange={handleRemovalOptionInputChange}
               />
             </FormGroup>
           )}
@@ -216,7 +196,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
               value={blocklistMethod}
               values={blocklistMethodOptions}
               helpText={translate('BlocklistReleaseHelpText')}
-              onChange={handleBlocklistMethodChange}
+              onChange={handleRemovalOptionInputChange}
             />
           </FormGroup>
         </ModalBody>

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<QueueStatus>;
   details: QueueDetailsAppState;
@@ -39,6 +50,7 @@ interface QueueAppState {
   options: {
     includeUnknownSeriesItems: boolean;
   };
+  removalOptions: RemovalOptions;
 }
 
 export default QueueAppState;

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,