Convert Indexer settings to TypeScript

(cherry picked from commit 6e008a8e855e67bb14b0e04bdb9042eebcacb59f)
2026-04-23 22:25:14 -04:00 · 2025-01-01 00:33:01 -08:00
parent e6980df590
commit 3945a2eeb8
41 changed files with 1350 additions and 1708 deletions
@@ -0,0 +1,104 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import { icons } from 'Helpers/Props';
+import SettingsToolbar from 'Settings/SettingsToolbar';
+import { testAllIndexers } from 'Store/Actions/settingsActions';
+import {
+  SaveCallback,
+  SettingsStateChange,
+} from 'typings/Settings/SettingsState';
+import translate from 'Utilities/String/translate';
+import Indexers from './Indexers/Indexers';
+import ManageIndexersModal from './Indexers/Manage/ManageIndexersModal';
+import IndexerOptions from './Options/IndexerOptions';
+
+function IndexerSettings() {
+  const dispatch = useDispatch();
+  const isTestingAll = useSelector(
+    (state: AppState) => state.settings.indexers.isTestingAll
+  );
+
+  const saveOptions = useRef<() => void>();
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasPendingChanges, setHasPendingChanges] = useState(false);
+  const [isManageIndexersModalOpen, setIsManageIndexersModalOpen] =
+    useState(false);
+
+  const handleSetChildSave = useCallback((saveCallback: SaveCallback) => {
+    saveOptions.current = saveCallback;
+  }, []);
+
+  const handleChildStateChange = useCallback(
+    ({ isSaving, hasPendingChanges }: SettingsStateChange) => {
+      setIsSaving(isSaving);
+      setHasPendingChanges(hasPendingChanges);
+    },
+    []
+  );
+
+  const handleManageIndexersPress = useCallback(() => {
+    setIsManageIndexersModalOpen(true);
+  }, []);
+
+  const handleManageIndexersModalClose = useCallback(() => {
+    setIsManageIndexersModalOpen(false);
+  }, []);
+
+  const handleSavePress = useCallback(() => {
+    saveOptions.current?.();
+  }, []);
+
+  const handleTestAllIndexersPress = useCallback(() => {
+    dispatch(testAllIndexers());
+  }, [dispatch]);
+
+  return (
+    <PageContent title={translate('IndexerSettings')}>
+      <SettingsToolbar
+        isSaving={isSaving}
+        hasPendingChanges={hasPendingChanges}
+        additionalButtons={
+          <>
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label={translate('TestAllIndexers')}
+              iconName={icons.TEST}
+              isSpinning={isTestingAll}
+              onPress={handleTestAllIndexersPress}
+            />
+
+            <PageToolbarButton
+              label={translate('ManageIndexers')}
+              iconName={icons.MANAGE}
+              onPress={handleManageIndexersPress}
+            />
+          </>
+        }
+        onSavePress={handleSavePress}
+      />
+
+      <PageContentBody>
+        <Indexers />
+
+        <IndexerOptions
+          setChildSave={handleSetChildSave}
+          onChildStateChange={handleChildStateChange}
+        />
+
+        <ManageIndexersModal
+          isOpen={isManageIndexersModalOpen}
+          onModalClose={handleManageIndexersModalClose}
+        />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default IndexerSettings;