Use react-query for series

frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx

@@ -1,9 +1,6 @@
 import { orderBy } from 'lodash';
 import React, { useCallback, useMemo, useState } 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 FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
@@ -14,8 +11,11 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
 import Series from 'Series/Series';
-import { bulkDeleteSeries, setDeleteOption } from 'Store/Actions/seriesActions';
-import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
+import {
+  setSeriesDeleteOptions,
+  useSeriesDeleteOptions,
+} from 'Series/seriesOptionsStore';
+import useSeries, { useBulkDeleteSeries } from 'Series/useSeries';
 import { InputChanged } from 'typings/inputs';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
@@ -25,17 +25,12 @@ export interface DeleteSeriesModalContentProps {
   onModalClose(): void;
 }
 
-const selectDeleteOptions = createSelector(
-  (state: AppState) => state.series.deleteOptions,
-  (deleteOptions) => deleteOptions
-);
-
 function DeleteSeriesModalContent({
   onModalClose,
 }: DeleteSeriesModalContentProps) {
-  const { addImportListExclusion } = useSelector(selectDeleteOptions);
-  const allSeries: Series[] = useSelector(createAllSeriesSelector());
-  const dispatch = useDispatch();
+  const { addImportListExclusion } = useSeriesDeleteOptions();
+  const { data: allSeries } = useSeries();
+  const { bulkDeleteSeries } = useBulkDeleteSeries();
   const [deleteFiles, setDeleteFiles] = useState(false);
   const { useSelectedIds } = useSelect<Series>();
   const seriesIds = useSelectedIds();
@@ -57,25 +52,21 @@ function DeleteSeriesModalContent({
 
   const onDeleteOptionChange = useCallback(
     ({ name, value }: { name: string; value: boolean }) => {
-      dispatch(
-        setDeleteOption({
-          [name]: value,
-        })
-      );
+      setSeriesDeleteOptions({
+        [name]: value,
+      });
     },
-    [dispatch]
+    []
   );
 
   const onDeleteSeriesConfirmed = useCallback(() => {
     setDeleteFiles(false);
 
-    dispatch(
-      bulkDeleteSeries({
-        seriesIds,
-        deleteFiles,
-        addImportListExclusion,
-      })
-    );
+    bulkDeleteSeries({
+      seriesIds,
+      deleteFiles,
+      addImportListExclusion,
+    });
 
     onModalClose();
   }, [
@@ -83,7 +74,7 @@ function DeleteSeriesModalContent({
     addImportListExclusion,
     setDeleteFiles,
     seriesIds,
-    dispatch,
+    bulkDeleteSeries,
     onModalClose,
   ]);