Use react-query for Indexers Options

frontend/src/App/State/SettingsAppState.ts

@@ -16,7 +16,6 @@ import ImportListExclusion from 'typings/ImportListExclusion';
 import ImportListOptionsSettings from 'typings/ImportListOptionsSettings';
 import IndexerFlag from 'typings/IndexerFlag';
 import DownloadClientOptions from 'typings/Settings/DownloadClientOptions';
-import IndexerOptions from 'typings/Settings/IndexerOptions';
 
 type Presets<T> = T & {
   presets: T[];
@@ -58,10 +57,6 @@ export interface ImportListAppState
   isTestingAll: boolean;
 }
 
-export interface IndexerOptionsAppState
-  extends AppSectionItemState<IndexerOptions>,
-    AppSectionSaveState {}
-
 export interface CustomFormatAppState
   extends AppSectionState<CustomFormat>,
     AppSectionDeleteState,
@@ -99,7 +94,6 @@ interface SettingsAppState {
   importListOptions: ImportListOptionsSettingsAppState;
   importLists: ImportListAppState;
   indexerFlags: IndexerFlagSettingsAppState;
-  indexerOptions: IndexerOptionsAppState;
 }
 
 export default SettingsAppState;

frontend/src/Settings/Indexers/Options/IndexerOptions.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
@@ -9,21 +8,13 @@ import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import { inputTypes, kinds } from 'Helpers/Props';
 import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
-import { clearPendingChanges } from 'Store/Actions/baseActions';
-import {
-  fetchIndexerOptions,
-  saveIndexerOptions,
-  setIndexerOptionsValue,
-} from 'Store/Actions/settingsActions';
-import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
 import { InputChanged } from 'typings/inputs';
 import {
   OnChildStateChange,
   SetChildSave,
 } from 'typings/Settings/SettingsState';
 import translate from 'Utilities/String/translate';
-
-const SECTION = 'indexerOptions';
+import { useManageIndexerSettings } from './useIndexerSettings';
 
 interface IndexerOptionsProps {
   setChildSave: SetChildSave;
@@ -34,31 +25,31 @@ function IndexerOptions({
   setChildSave,
   onChildStateChange,
 }: IndexerOptionsProps) {
-  const dispatch = useDispatch();
   const {
     isFetching,
-    isPopulated,
+    isFetched,
     isSaving,
     error,
     settings,
     hasSettings,
     hasPendingChanges,
-  } = useSelector(createSettingsSectionSelector(SECTION));
+    saveSettings,
+    updateSetting,
+  } = useManageIndexerSettings();
 
   const showAdvancedSettings = useShowAdvancedSettings();
 
   const handleInputChange = useCallback(
-    (change: InputChanged) => {
-      // @ts-expect-error - actions aren't typed
-      dispatch(setIndexerOptionsValue(change));
+    ({ name, value }: InputChanged) => {
+      // @ts-expect-error - InputChanged name/value are not typed as keyof IndexerSettingsModel
+      updateSetting(name, value);
     },
-    [dispatch]
+    [updateSetting]
   );
 
   useEffect(() => {
-    dispatch(fetchIndexerOptions());
-    setChildSave(() => dispatch(saveIndexerOptions()));
-  }, [dispatch, setChildSave]);
+    setChildSave(saveSettings);
+  }, [saveSettings, setChildSave]);
 
   useEffect(() => {
     onChildStateChange({
@@ -67,12 +58,6 @@ function IndexerOptions({
     });
   }, [hasPendingChanges, isSaving, onChildStateChange]);
 
-  useEffect(() => {
-    return () => {
-      dispatch(clearPendingChanges({ section: `settings.${SECTION}` }));
-    };
-  }, [dispatch]);
-
   return (
     <FieldSet legend={translate('Options')}>
       {isFetching ? <LoadingIndicator /> : null}
@@ -83,7 +68,7 @@ function IndexerOptions({
         </Alert>
       ) : null}
 
-      {hasSettings && isPopulated && !error ? (
+      {hasSettings && isFetched && !error ? (
         <Form>
           <FormGroup>
             <FormLabel>{translate('MinimumAge')}</FormLabel>

frontend/src/Settings/Indexers/Options/useIndexerSettings.ts

@@ -0,0 +1,18 @@
+import { useManageSettings, useSettings } from 'Settings/useSettings';
+
+export interface IndexerSettingsModel {
+  minimumAge: number;
+  retention: number;
+  maximumSize: number;
+  rssSyncInterval: number;
+}
+
+const PATH = '/settings/indexer';
+
+export const useIndexerSettings = () => {
+  return useSettings<IndexerSettingsModel>(PATH);
+};
+
+export const useManageIndexerSettings = () => {
+  return useManageSettings<IndexerSettingsModel>(PATH);
+};

frontend/src/Store/Actions/Settings/indexerOptions.js

@@ -1,64 +0,0 @@
-import { createAction } from 'redux-actions';
-import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
-import createSaveHandler from 'Store/Actions/Creators/createSaveHandler';
-import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
-import { createThunk } from 'Store/thunks';
-
-//
-// Variables
-
-const section = 'settings.indexerOptions';
-
-//
-// Actions Types
-
-export const FETCH_INDEXER_OPTIONS = 'settings/indexerOptions/fetchIndexerOptions';
-export const SAVE_INDEXER_OPTIONS = 'settings/indexerOptions/saveIndexerOptions';
-export const SET_INDEXER_OPTIONS_VALUE = 'settings/indexerOptions/setIndexerOptionsValue';
-
-//
-// Action Creators
-
-export const fetchIndexerOptions = createThunk(FETCH_INDEXER_OPTIONS);
-export const saveIndexerOptions = createThunk(SAVE_INDEXER_OPTIONS);
-export const setIndexerOptionsValue = createAction(SET_INDEXER_OPTIONS_VALUE, (payload) => {
-  return {
-    section,
-    ...payload
-  };
-});
-
-//
-// Details
-
-export default {
-
-  //
-  // State
-
-  defaultState: {
-    isFetching: false,
-    isPopulated: false,
-    error: null,
-    pendingChanges: {},
-    isSaving: false,
-    saveError: null,
-    item: {}
-  },
-
-  //
-  // Action Handlers
-
-  actionHandlers: {
-    [FETCH_INDEXER_OPTIONS]: createFetchHandler(section, '/config/indexer'),
-    [SAVE_INDEXER_OPTIONS]: createSaveHandler(section, '/config/indexer')
-  },
-
-  //
-  // Reducers
-
-  reducers: {
-    [SET_INDEXER_OPTIONS_VALUE]: createSetSettingValueReducer(section)
-  }
-
-};

frontend/src/Store/Actions/settingsActions.js

@@ -11,7 +11,6 @@ import importListExclusions from './Settings/importListExclusions';
 import importListOptions from './Settings/importListOptions';
 import importLists from './Settings/importLists';
 import indexerFlags from './Settings/indexerFlags';
-import indexerOptions from './Settings/indexerOptions';
 
 export * from './Settings/autoTaggingSpecifications';
 export * from './Settings/autoTaggings';
@@ -24,7 +23,6 @@ export * from './Settings/importListOptions';
 export * from './Settings/importLists';
 export * from './Settings/importListExclusions';
 export * from './Settings/indexerFlags';
-export * from './Settings/indexerOptions';
 
 //
 // Variables
@@ -46,8 +44,7 @@ export const defaultState = {
   importLists: importLists.defaultState,
   importListExclusions: importListExclusions.defaultState,
   importListOptions: importListOptions.defaultState,
-  indexerFlags: indexerFlags.defaultState,
-  indexerOptions: indexerOptions.defaultState
+  indexerFlags: indexerFlags.defaultState
 };
 
 export const persistState = [
@@ -68,8 +65,7 @@ export const actionHandlers = handleThunks({
   ...importLists.actionHandlers,
   ...importListExclusions.actionHandlers,
   ...importListOptions.actionHandlers,
-  ...indexerFlags.actionHandlers,
-  ...indexerOptions.actionHandlers
+  ...indexerFlags.actionHandlers
 });
 
 //
@@ -86,7 +82,6 @@ export const reducers = createHandleActions({
   ...importLists.reducers,
   ...importListExclusions.reducers,
   ...importListOptions.reducers,
-  ...indexerFlags.reducers,
-  ...indexerOptions.reducers
+  ...indexerFlags.reducers
 
 }, defaultState, section);

frontend/src/typings/Settings/IndexerOptions.ts

@@ -1,6 +0,0 @@
-export default interface IndexerOptions {
-  minimumAge: number;
-  retention: number;
-  maximumSize: number;
-  rssSyncInterval: number;
-}