Use react-query for queue UI

New: Season packs and multi-episode releases will show as a single item in the queue
Closes #6537

frontend/src/Activity/Queue/QueueOptions.tsx

@@ -1,33 +1,30 @@
 import React, { useCallback } 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';
+import { OptionChanged } from 'Helpers/Hooks/useOptionsStore';
 import { inputTypes } from 'Helpers/Props';
-import { gotoQueuePage, setQueueOption } from 'Store/Actions/queueActions';
-import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
+import {
+  QueueOptions as QueueOptionsType,
+  setQueueOption,
+  useQueueOption,
+} from './queueOptionsStore';
+import useQueue from './useQueue';
 
 function QueueOptions() {
-  const dispatch = useDispatch();
-  const { includeUnknownSeriesItems } = useSelector(
-    (state: AppState) => state.queue.options
-  );
+  const includeUnknownSeriesItems = useQueueOption('includeUnknownSeriesItems');
+  const { goToPage } = useQueue();
 
   const handleOptionChange = useCallback(
-    ({ name, value }: InputChanged<boolean>) => {
-      dispatch(
-        setQueueOption({
-          [name]: value,
-        })
-      );
+    ({ name, value }: OptionChanged<QueueOptionsType>) => {
+      setQueueOption(name, value);
 
       if (name === 'includeUnknownSeriesItems') {
-        dispatch(gotoQueuePage({ page: 1 }));
+        goToPage(1);
       }
     },
-    [dispatch]
+    [goToPage]
   );
 
   return (
@@ -39,6 +36,7 @@ function QueueOptions() {
         name="includeUnknownSeriesItems"
         value={includeUnknownSeriesItems}
         helpText={translate('ShowUnknownSeriesItemsHelpText')}
+        // @ts-expect-error - The typing for inputs needs more work
         onChange={handleOptionChange}
       />
     </FormGroup>