Add Series with ReactQuery Mutation

frontend/src/AddSeries/ImportSeries/Import/ImportSeries.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
+import {
+  setAddSeriesOption,
+  useAddSeriesOption,
+} from 'AddSeries/addSeriesOptionsStore';
 import { SelectProvider } from 'App/SelectContext';
 import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
@@ -8,7 +12,6 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import { kinds } from 'Helpers/Props';
-import { setAddSeriesDefault } from 'Store/Actions/addSeriesActions';
 import { clearImportSeries } from 'Store/Actions/importSeriesActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import translate from 'Utilities/String/translate';
@@ -48,9 +51,7 @@ function ImportSeries() {
     (state: AppState) => state.settings.qualityProfiles.items
   );
 
-  const defaultQualityProfileId = useSelector(
-    (state: AppState) => state.addSeries.defaults.qualityProfileId
-  );
+  const defaultQualityProfileId = useAddSeriesOption('qualityProfileId');
 
   const scrollerRef = useRef<HTMLDivElement>(null);
 
@@ -76,9 +77,7 @@ function ImportSeries() {
       !defaultQualityProfileId ||
       !qualityProfiles.some((p) => p.id === defaultQualityProfileId)
     ) {
-      dispatch(
-        setAddSeriesDefault({ qualityProfileId: qualityProfiles[0].id })
-      );
+      setAddSeriesOption('qualityProfileId', qualityProfiles[0].id);
     }
   }, [defaultQualityProfileId, qualityProfiles, dispatch]);
 

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import {
+  AddSeriesOptions,
+  setAddSeriesOption,
+  useAddSeriesOptions,
+} from 'AddSeries/addSeriesOptionsStore';
 import { useSelect } from 'App/SelectContext';
 import AppState from 'App/State/AppState';
 import CheckInput from 'Components/Form/CheckInput';
@@ -12,7 +17,6 @@ import PageContentFooter from 'Components/Page/PageContentFooter';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
 import { SeriesMonitor, SeriesType } from 'Series/Series';
-import { setAddSeriesDefault } from 'Store/Actions/addSeriesActions';
 import {
   cancelLookupSeries,
   importSeries,
@@ -33,7 +37,7 @@ function ImportSeriesFooter() {
     qualityProfileId: defaultQualityProfileId,
     seriesType: defaultSeriesType,
     seasonFolder: defaultSeasonFolder,
-  } = useSelector((state: AppState) => state.addSeries.defaults);
+  } = useAddSeriesOptions();
 
   const { isLookingUpSeries, isImporting, items, importError } = useSelector(
     (state: AppState) => state.importSeries
@@ -110,7 +114,7 @@ function ImportSeriesFooter() {
   ]);
 
   const handleInputChange = useCallback(
-    ({ name, value }: InputChanged) => {
+    ({ name, value }: InputChanged<string | number | boolean | number[]>) => {
       if (name === 'monitor') {
         setMonitor(value as SeriesMonitor);
       } else if (name === 'qualityProfileId') {
@@ -121,7 +125,7 @@ function ImportSeriesFooter() {
         setSeasonFolder(value as boolean);
       }
 
-      dispatch(setAddSeriesDefault({ [name]: value }));
+      setAddSeriesOption(name as keyof AddSeriesOptions, value);
 
       selectedIds.forEach((id) => {
         dispatch(

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTable.tsx

@@ -1,6 +1,7 @@
 import React, { RefObject, useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { useAddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
 import { useSelect } from 'App/SelectContext';
 import AppState from 'App/State/AppState';
 import { ImportSeries } from 'App/State/ImportSeriesAppState';
@@ -59,9 +60,8 @@ function ImportSeriesTable({
 }: ImportSeriesTableProps) {
   const dispatch = useDispatch();
 
-  const { monitor, qualityProfileId, seriesType, seasonFolder } = useSelector(
-    (state: AppState) => state.addSeries.defaults
-  );
+  const { monitor, qualityProfileId, seriesType, seasonFolder } =
+    useAddSeriesOptions();
 
   const items = useSelector((state: AppState) => state.importSeries.items);
   const { isSmallScreen } = useSelector(createDimensionsSelector());