Use react-query for Indexers Flags

frontend/src/App/State/SettingsAppState.ts

@@ -14,7 +14,6 @@ import DownloadClient from 'typings/DownloadClient';
 import ImportList from 'typings/ImportList';
 import ImportListExclusion from 'typings/ImportListExclusion';
 import ImportListOptionsSettings from 'typings/ImportListOptionsSettings';
-import IndexerFlag from 'typings/IndexerFlag';
 import DownloadClientOptions from 'typings/Settings/DownloadClientOptions';
 
 type Presets<T> = T & {
@@ -80,8 +79,6 @@ export interface ImportListExclusionsSettingsAppState
   pendingChanges: Partial<ImportListExclusion>;
 }
 
-export type IndexerFlagSettingsAppState = AppSectionState<IndexerFlag>;
-
 interface SettingsAppState {
   autoTaggings: AutoTaggingAppState;
   autoTaggingSpecifications: AutoTaggingSpecificationAppState;
@@ -93,7 +90,6 @@ interface SettingsAppState {
   importListExclusions: ImportListExclusionsSettingsAppState;
   importListOptions: ImportListOptionsSettingsAppState;
   importLists: ImportListAppState;
-  indexerFlags: IndexerFlagSettingsAppState;
 }
 
 export default SettingsAppState;

frontend/src/Components/Form/Select/IndexerFlagsSelectInput.tsx

@@ -1,35 +1,8 @@
-import React, { useCallback } from 'react';
-import { useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import AppState from 'App/State/AppState';
+import React, { useCallback, useMemo } from 'react';
+import useIndexerFlags from 'Settings/Indexers/useIndexerFlags';
 import { EnhancedSelectInputChanged } from 'typings/inputs';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
-const selectIndexerFlagsValues = (selectedFlags: number) =>
-  createSelector(
-    (state: AppState) => state.settings.indexerFlags,
-    (indexerFlags) => {
-      const value = indexerFlags.items.reduce((acc: number[], { id }) => {
-        // eslint-disable-next-line no-bitwise
-        if ((selectedFlags & id) === id) {
-          acc.push(id);
-        }
-
-        return acc;
-      }, []);
-
-      const values = indexerFlags.items.map(({ id, name }) => ({
-        key: id,
-        value: name,
-      }));
-
-      return {
-        value,
-        values,
-      };
-    }
-  );
-
 export interface IndexerFlagsSelectInputProps {
   name: string;
   indexerFlags: number;
@@ -42,7 +15,29 @@ function IndexerFlagsSelectInput({
   onChange,
   ...otherProps
 }: IndexerFlagsSelectInputProps) {
-  const { value, values } = useSelector(selectIndexerFlagsValues(indexerFlags));
+  const { data: allIndexerFlags } = useIndexerFlags();
+
+  const value = useMemo(
+    () =>
+      allIndexerFlags.reduce((acc: number[], { id }) => {
+        // eslint-disable-next-line no-bitwise
+        if ((indexerFlags & id) === id) {
+          acc.push(id);
+        }
+
+        return acc;
+      }, []),
+    [allIndexerFlags, indexerFlags]
+  );
+
+  const values = useMemo(
+    () =>
+      allIndexerFlags.map(({ id, name }) => ({
+        key: id,
+        value: name,
+      })),
+    [allIndexerFlags]
+  );
 
   const handleChange = useCallback(
     (change: EnhancedSelectInputChanged<number[]>) => {

frontend/src/Episode/IndexerFlags.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import createIndexerFlagsSelector from 'Store/Selectors/createIndexerFlagsSelector';
+import useIndexerFlags from 'Settings/Indexers/useIndexerFlags';
 
 interface IndexerFlagsProps {
   indexerFlags: number;
 }
 
 function IndexerFlags({ indexerFlags = 0 }: IndexerFlagsProps) {
-  const allIndexerFlags = useSelector(createIndexerFlagsSelector);
+  const { data: allIndexerFlags } = useIndexerFlags();
 
-  const flags = allIndexerFlags.items.filter(
+  const flags = allIndexerFlags.filter(
     // eslint-disable-next-line no-bitwise
     (item) => (indexerFlags & item.id) === item.id
   );

frontend/src/Helpers/Hooks/useAppPage.ts

@@ -8,19 +8,18 @@ import useCustomFilters from 'Filters/useCustomFilters';
 import { useInitializeLanguage } from 'Language/useLanguageName';
 import { useLanguages } from 'Language/useLanguages';
 import useSeries from 'Series/useSeries';
+import useIndexerFlags from 'Settings/Indexers/useIndexerFlags';
 import { useQualityProfiles } from 'Settings/Profiles/Quality/useQualityProfiles';
 import { useUiSettings } from 'Settings/UI/useUiSettings';
 import { fetchCustomFilters } from 'Store/Actions/customFilterActions';
-import {
-  fetchImportLists,
-  fetchIndexerFlags,
-} from 'Store/Actions/settingsActions';
+import { fetchImportLists } from 'Store/Actions/settingsActions';
 import useSystemStatus from 'System/Status/useSystemStatus';
 import useTags from 'Tags/useTags';
 import { ApiError } from 'Utilities/Fetch/fetchJson';
 
 const createErrorsSelector = ({
   customFiltersError,
+  indexerFlagsError,
   systemStatusError,
   tagsError,
   translationsError,
@@ -30,6 +29,7 @@ const createErrorsSelector = ({
   languagesError,
 }: {
   customFiltersError: ApiError | null;
+  indexerFlagsError: ApiError | null;
   systemStatusError: ApiError | null;
   tagsError: ApiError | null;
   translationsError: ApiError | null;
@@ -40,8 +40,7 @@ const createErrorsSelector = ({
 }) =>
   createSelector(
     (state: AppState) => state.settings.importLists.error,
-    (state: AppState) => state.settings.indexerFlags.error,
-    (importListsError, indexerFlagsError) => {
+    (importListsError) => {
       const hasError = !!(
         customFiltersError ||
         seriesError ||
@@ -102,15 +101,17 @@ const useAppPage = () => {
   const { isFetched: isLanguagesFetched, error: languagesError } =
     useLanguages();
 
+  const { isFetched: isIndexerFlagsFetched, error: indexerFlagsError } =
+    useIndexerFlags();
+
   const isAppStatePopulated = useSelector(
-    (state: AppState) =>
-      state.settings.importLists.isPopulated &&
-      state.settings.indexerFlags.isPopulated
+    (state: AppState) => state.settings.importLists.isPopulated
   );
 
   const isPopulated =
     isAppStatePopulated &&
     isCustomFiltersFetched &&
+    isIndexerFlagsFetched &&
     isSeriesFetched &&
     isSystemStatusFetched &&
     isTagsFetched &&
@@ -122,6 +123,7 @@ const useAppPage = () => {
   const { hasError, errors } = useSelector(
     createErrorsSelector({
       customFiltersError,
+      indexerFlagsError,
       seriesError,
       systemStatusError,
       tagsError,
@@ -148,7 +150,6 @@ const useAppPage = () => {
   useEffect(() => {
     dispatch(fetchCustomFilters());
     dispatch(fetchImportLists());
-    dispatch(fetchIndexerFlags());
   }, [dispatch]);
 
   return useMemo(() => {

frontend/src/Settings/Indexers/useIndexerFlags.ts

@@ -0,0 +1,25 @@
+import useApiQuery from 'Helpers/Hooks/useApiQuery';
+
+export interface IndexerFlag {
+  id: number;
+  name: string;
+}
+
+const DEFAULT_INDEXER_FLAGS: IndexerFlag[] = [];
+
+const useIndexerFlags = () => {
+  const result = useApiQuery<IndexerFlag[]>({
+    path: '/indexerFlag',
+    queryOptions: {
+      gcTime: Infinity,
+      staleTime: Infinity,
+    },
+  });
+
+  return {
+    ...result,
+    data: result.data ?? DEFAULT_INDEXER_FLAGS,
+  };
+};
+
+export default useIndexerFlags;

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

@@ -1,48 +0,0 @@
-import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
-import { createThunk } from 'Store/thunks';
-
-//
-// Variables
-
-const section = 'settings.indexerFlags';
-
-//
-// Actions Types
-
-export const FETCH_INDEXER_FLAGS = 'settings/indexerFlags/fetchIndexerFlags';
-
-//
-// Action Creators
-
-export const fetchIndexerFlags = createThunk(FETCH_INDEXER_FLAGS);
-
-//
-// Details
-
-export default {
-
-  //
-  // State
-
-  defaultState: {
-    isFetching: false,
-    isPopulated: false,
-    error: null,
-    items: []
-  },
-
-  //
-  // Action Handlers
-
-  actionHandlers: {
-    [FETCH_INDEXER_FLAGS]: createFetchHandler(section, '/indexerFlag')
-  },
-
-  //
-  // Reducers
-
-  reducers: {
-
-  }
-
-};

frontend/src/Store/Actions/settingsActions.js

@@ -10,7 +10,6 @@ import downloadClients from './Settings/downloadClients';
 import importListExclusions from './Settings/importListExclusions';
 import importListOptions from './Settings/importListOptions';
 import importLists from './Settings/importLists';
-import indexerFlags from './Settings/indexerFlags';
 
 export * from './Settings/autoTaggingSpecifications';
 export * from './Settings/autoTaggings';
@@ -22,7 +21,6 @@ export * from './Settings/downloadClientOptions';
 export * from './Settings/importListOptions';
 export * from './Settings/importLists';
 export * from './Settings/importListExclusions';
-export * from './Settings/indexerFlags';
 
 //
 // Variables
@@ -43,8 +41,7 @@ export const defaultState = {
   downloadClientOptions: downloadClientOptions.defaultState,
   importLists: importLists.defaultState,
   importListExclusions: importListExclusions.defaultState,
-  importListOptions: importListOptions.defaultState,
-  indexerFlags: indexerFlags.defaultState
+  importListOptions: importListOptions.defaultState
 };
 
 export const persistState = [
@@ -64,8 +61,7 @@ export const actionHandlers = handleThunks({
   ...downloadClientOptions.actionHandlers,
   ...importLists.actionHandlers,
   ...importListExclusions.actionHandlers,
-  ...importListOptions.actionHandlers,
-  ...indexerFlags.actionHandlers
+  ...importListOptions.actionHandlers
 });
 
 //
@@ -81,7 +77,6 @@ export const reducers = createHandleActions({
   ...downloadClientOptions.reducers,
   ...importLists.reducers,
   ...importListExclusions.reducers,
-  ...importListOptions.reducers,
-  ...indexerFlags.reducers
+  ...importListOptions.reducers
 
 }, defaultState, section);

frontend/src/Store/Selectors/createIndexerFlagsSelector.ts

@@ -1,9 +0,0 @@
-import { createSelector } from 'reselect';
-import AppState from 'App/State/AppState';
-
-const createIndexerFlagsSelector = createSelector(
-  (state: AppState) => state.settings.indexerFlags,
-  (indexerFlags) => indexerFlags
-);
-
-export default createIndexerFlagsSelector;

frontend/src/typings/IndexerFlag.ts

@@ -1,6 +0,0 @@
-interface IndexerFlag {
-  id: number;
-  name: string;
-}
-
-export default IndexerFlag;