Convert createSettingsSectionSelector to typescript.

frontend/src/Settings/ImportLists/Options/ImportListOptions.tsx

@@ -16,8 +16,6 @@ import {
   setImportListOptionsValue,
 } from 'Store/Actions/settingsActions';
 import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
-import ImportListOptionsSettings from 'typings/ImportListOptionsSettings';
-import { PendingSection } from 'typings/pending';
 import translate from 'Utilities/String/translate';
 
 const SECTION = 'importListOptions';
@@ -61,8 +59,7 @@ function ImportListOptions(props: ImportListOptionsPageProps) {
     hasSettings,
   } = selected;
 
-  const { listSyncLevel, listSyncTag } =
+  const { listSyncLevel, listSyncTag } = settings;
-    settings as PendingSection<ImportListOptionsSettings>;
 
   const dispatch = useDispatch();
 

frontend/src/Store/Selectors/createSettingsSectionSelector.js

@@ -1,32 +0,0 @@
-import { createSelector } from 'reselect';
-import selectSettings from 'Store/Selectors/selectSettings';
-
-function createSettingsSectionSelector(section) {
-  return createSelector(
-    (state) => state.settings[section],
-    (sectionSettings) => {
-      const {
-        isFetching,
-        isPopulated,
-        error,
-        item,
-        pendingChanges,
-        isSaving,
-        saveError
-      } = sectionSettings;
-
-      const settings = selectSettings(item, pendingChanges, saveError);
-
-      return {
-        isFetching,
-        isPopulated,
-        error,
-        isSaving,
-        saveError,
-        ...settings
-      };
-    }
-  );
-}
-
-export default createSettingsSectionSelector;

frontend/src/Store/Selectors/createSettingsSectionSelector.ts

@@ -0,0 +1,49 @@
+import { createSelector } from 'reselect';
+import AppSectionState, {
+  AppSectionItemState,
+} from 'App/State/AppSectionState';
+import AppState from 'App/State/AppState';
+import selectSettings from 'Store/Selectors/selectSettings';
+import { PendingSection } from 'typings/pending';
+
+type SettingNames = keyof Omit<AppState['settings'], 'advancedSettings'>;
+type GetSectionState<Name extends SettingNames> = AppState['settings'][Name];
+type GetSettingsSectionItemType<Name extends SettingNames> =
+  GetSectionState<Name> extends AppSectionItemState<infer R>
+    ? R
+    : GetSectionState<Name> extends AppSectionState<infer R>
+    ? R
+    : never;
+
+type AppStateWithPending<Name extends SettingNames> = {
+  item?: GetSettingsSectionItemType<Name>;
+  pendingChanges?: Partial<GetSettingsSectionItemType<Name>>;
+  saveError?: Error;
+} & GetSectionState<Name>;
+
+function createSettingsSectionSelector<Name extends SettingNames>(
+  section: Name
+) {
+  return createSelector(
+    (state: AppState) => state.settings[section],
+    (sectionSettings) => {
+      const { item, pendingChanges, saveError, ...other } =
+        sectionSettings as AppStateWithPending<Name>;
+
+      const { settings, ...rest } = selectSettings(
+        item,
+        pendingChanges,
+        saveError
+      );
+
+      return {
+        ...other,
+        saveError,
+        settings: settings as PendingSection<GetSettingsSectionItemType<Name>>,
+        ...rest,
+      };
+    }
+  );
+}
+
+export default createSettingsSectionSelector;