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/AddSeries/AddNewSeries/AddNewSeriesModalContent.tsx

@@ -47,11 +47,7 @@ function AddNewSeriesModalContent({
   const { isSmallScreen } = useSelector(createDimensionsSelector());
   const isWindows = useIsWindows();
 
-  const {
-    isPending: isAdding,
-    error: addError,
-    mutate: addSeries,
-  } = useAddSeries();
+  const { isAdding, addError, addSeries } = useAddSeries();
 
   const { settings, validationErrors, validationWarnings } = useMemo(() => {
     return selectSettings(options, {}, addError);

frontend/src/AddSeries/AddNewSeries/useAddSeries.ts

@@ -33,11 +33,19 @@ export const useAddSeries = () => {
     [dispatch]
   );
 
-  return useApiMutation<Series, AddSeriesPayload>({
-    path: '/series',
-    method: 'POST',
-    mutationOptions: {
-      onSuccess: onAddSuccess,
-    },
-  });
+  const { isPending, error, mutate } = useApiMutation<Series, AddSeriesPayload>(
+    {
+      path: '/series',
+      method: 'POST',
+      mutationOptions: {
+        onSuccess: onAddSuccess,
+      },
+    }
+  );
+
+  return {
+    isAdding: isPending,
+    addError: error,
+    addSeries: mutate,
+  };
 };

frontend/src/AddSeries/addSeriesOptionsStore.ts

@@ -1,4 +1,4 @@
-import { createPersist } from 'Helpers/createPersist';
+import { createOptionsStore } from 'Helpers/Hooks/useOptionsStore';
 import { SeriesMonitor, SeriesType } from 'Series/Series';
 
 export interface AddSeriesOptions {
@@ -12,9 +12,8 @@ export interface AddSeriesOptions {
   tags: number[];
 }
 
-const addSeriesOptionsStore = createPersist<AddSeriesOptions>(
-  'add_series_options',
-  () => {
+const { useOptions, useOption, setOption } =
+  createOptionsStore<AddSeriesOptions>('add_series_options', () => {
     return {
       rootFolderPath: '',
       monitor: 'all',
@@ -25,25 +24,8 @@ const addSeriesOptionsStore = createPersist<AddSeriesOptions>(
       searchForCutoffUnmetEpisodes: false,
       tags: [],
     };
-  }
-);
+  });
 
-export const useAddSeriesOptions = () => {
-  return addSeriesOptionsStore((state) => state);
-};
-
-export const useAddSeriesOption = <K extends keyof AddSeriesOptions>(
-  key: K
-) => {
-  return addSeriesOptionsStore((state) => state[key]);
-};
-
-export const setAddSeriesOption = <K extends keyof AddSeriesOptions>(
-  key: K,
-  value: AddSeriesOptions[K]
-) => {
-  addSeriesOptionsStore.setState((state) => ({
-    ...state,
-    [key]: value,
-  }));
-};
+export const useAddSeriesOptions = useOptions;
+export const useAddSeriesOption = useOption;
+export const setAddSeriesOption = setOption;