Use react-query for series import

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

@@ -1,39 +1,29 @@
 import React, { useCallback, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
 import { useSelect } from 'App/Select/SelectContext';
-import AppState from 'App/State/AppState';
-import { ImportSeries } from 'App/State/ImportSeriesAppState';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import { inputTypes } from 'Helpers/Props';
 import useExistingSeries from 'Series/useExistingSeries';
-import { setImportSeriesValue } from 'Store/Actions/importSeriesActions';
 import { InputChanged } from 'typings/inputs';
 import { SelectStateInputProps } from 'typings/props';
+import {
+  ImportSeriesItem,
+  UnamppedFolderItem,
+  updateImportSeriesItem,
+  useImportSeriesItem,
+} from './importSeriesStore';
 import ImportSeriesSelectSeries from './SelectSeries/ImportSeriesSelectSeries';
 import styles from './ImportSeriesRow.css';
 
-function createItemSelector(id: string) {
-  return createSelector(
-    (state: AppState) => state.importSeries.items,
-    (items) => {
-      return (
-        items.find((item) => {
-          return item.id === id;
-        }) || ({} as ImportSeries)
-      );
-    }
-  );
-}
-
 interface ImportSeriesRowProps {
-  id: string;
+  unmappedFolder: UnamppedFolderItem;
 }
 
-function ImportSeriesRow({ id }: ImportSeriesRowProps) {
-  const dispatch = useDispatch();
+function ImportSeriesRow({ unmappedFolder }: ImportSeriesRowProps) {
+  const id = unmappedFolder.id;
+
+  const item = useImportSeriesItem(unmappedFolder.id);
 
   const {
     relativePath,
@@ -42,24 +32,18 @@ function ImportSeriesRow({ id }: ImportSeriesRowProps) {
     seasonFolder,
     seriesType,
     selectedSeries,
-  } = useSelector(createItemSelector(id));
+  } = item ?? {};
 
   const isExistingSeries = useExistingSeries(selectedSeries?.tvdbId);
 
   const { getIsSelected, toggleSelected, toggleDisabled } =
-    useSelect<ImportSeries>();
+    useSelect<ImportSeriesItem>();
 
   const handleInputChange = useCallback(
     ({ name, value }: InputChanged) => {
-      dispatch(
-        // @ts-expect-error - actions are not typed
-        setImportSeriesValue({
-          id,
-          [name]: value,
-        })
-      );
+      updateImportSeriesItem({ id, [name]: value });
     },
-    [id, dispatch]
+    [id]
   );
 
   const handleSelectedChange = useCallback(
@@ -77,6 +61,10 @@ function ImportSeriesRow({ id }: ImportSeriesRowProps) {
     toggleDisabled(id, !selectedSeries || isExistingSeries);
   }, [id, selectedSeries, isExistingSeries, toggleDisabled]);
 
+  useEffect(() => {
+    toggleSelected({ id, isSelected: !!selectedSeries, shiftKey: false });
+  }, [id, selectedSeries, toggleSelected]);
+
   return (
     <>
       <VirtualTableSelectCell<string>