Use react-query for series

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

@@ -8,8 +8,8 @@ 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 createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
 import { InputChanged } from 'typings/inputs';
 import { SelectStateInputProps } from 'typings/props';
 import ImportSeriesSelectSeries from './SelectSeries/ImportSeriesSelectSeries';
@@ -44,9 +44,7 @@ function ImportSeriesRow({ id }: ImportSeriesRowProps) {
     selectedSeries,
   } = useSelector(createItemSelector(id));
 
-  const isExistingSeries = useSelector(
-    createExistingSeriesSelector(selectedSeries?.tvdbId)
-  );
+  const isExistingSeries = useExistingSeries(selectedSeries?.tvdbId);
 
   const { getIsSelected, toggleSelected, toggleDisabled } =
     useSelect<ImportSeries>();

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

@@ -7,11 +7,11 @@ import AppState from 'App/State/AppState';
 import { ImportSeries } from 'App/State/ImportSeriesAppState';
 import VirtualTable from 'Components/Table/VirtualTable';
 import usePrevious from 'Helpers/Hooks/usePrevious';
+import useSeries from 'Series/useSeries';
 import {
   queueLookupSeries,
   setImportSeriesValue,
 } from 'Store/Actions/importSeriesActions';
-import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import { CheckInputChanged } from 'typings/inputs';
 import { SelectStateInputProps } from 'typings/props';
@@ -65,7 +65,7 @@ function ImportSeriesTable({
 
   const items = useSelector((state: AppState) => state.importSeries.items);
   const { isSmallScreen } = useSelector(createDimensionsSelector());
-  const allSeries = useSelector(createAllSeriesSelector());
+  const { data: allSeries } = useSeries();
   const {
     allSelected,
     allUnselected,

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

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react';
-import { useSelector } from 'react-redux';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
-import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
+import useExistingSeries from 'Series/useExistingSeries';
 import ImportSeriesTitle from './ImportSeriesTitle';
 import styles from './ImportSeriesSearchResult.css';
 
@@ -22,7 +21,7 @@ function ImportSeriesSearchResult({
   network,
   onPress,
 }: ImportSeriesSearchResultProps) {
-  const isExistingSeries = useSelector(createExistingSeriesSelector(tvdbId));
+  const isExistingSeries = useExistingSeries(tvdbId);
 
   const handlePress = useCallback(() => {
     onPress(tvdbId);

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

@@ -9,6 +9,7 @@ import {
 } from '@floating-ui/react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import useImportSeriesItem from 'AddSeries/ImportSeries/Import/useImportSeriesItem';
 import AppState from 'App/State/AppState';
 import FormInputButton from 'Components/Form/FormInputButton';
 import TextInput from 'Components/Form/TextInput';
@@ -20,7 +21,6 @@ import {
   queueLookupSeries,
   setImportSeriesValue,
 } from 'Store/Actions/importSeriesActions';
-import createImportSeriesItemSelector from 'Store/Selectors/createImportSeriesItemSelector';
 import { InputChanged } from 'typings/inputs';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
@@ -51,8 +51,7 @@ function ImportSeriesSelectSeries({
     selectedSeries,
     isExistingSeries,
     term: itemTerm,
-    // @ts-expect-error - ignoring this for now
-  } = useSelector(createImportSeriesItemSelector(id, { id }));
+  } = useImportSeriesItem(id);
 
   const seriesLookupTimeout = useRef<ReturnType<typeof setTimeout>>();
 

frontend/src/AddSeries/ImportSeries/Import/useImportSeriesItem.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import { ImportSeries } from 'App/State/ImportSeriesAppState';
+import useSeries from 'Series/useSeries';
+
+function useImportSeriesItem(id: string) {
+  const { data: series = [] } = useSeries();
+  const importSeries = useSelector((state: AppState) => state.importSeries);
+
+  return useMemo(() => {
+    const item =
+      importSeries.items.find((item) => {
+        return item.id === id;
+      }) ?? ({} as ImportSeries);
+
+    const selectedSeries = item && item.selectedSeries;
+    const isExistingSeries =
+      !!selectedSeries &&
+      series.some((s) => {
+        return s.tvdbId === selectedSeries.tvdbId;
+      });
+
+    return {
+      ...item,
+      isExistingSeries,
+    };
+  }, [id, importSeries.items, series]);
+}
+
+export default useImportSeriesItem;