Convert Form Components to TypeScript

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

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import { fetchIndexers } from 'Store/Actions/settingsActions';
+import { EnhancedSelectInputChanged } from 'typings/inputs';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+function createIndexersSelector(includeAny: boolean) {
+  return createSelector(
+    (state: AppState) => state.settings.indexers,
+    (indexers) => {
+      const { isFetching, isPopulated, error, items } = indexers;
+
+      const values = items.sort(sortByProp('name')).map((indexer) => {
+        return {
+          key: indexer.id,
+          value: indexer.name,
+        };
+      });
+
+      if (includeAny) {
+        values.unshift({
+          key: 0,
+          value: `(${translate('Any')})`,
+        });
+      }
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        values,
+      };
+    }
+  );
+}
+
+interface IndexerSelectInputConnectorProps {
+  name: string;
+  value: number;
+  includeAny?: boolean;
+  values: object[];
+  onChange: (change: EnhancedSelectInputChanged<number>) => void;
+}
+
+function IndexerSelectInput({
+  name,
+  value,
+  includeAny = false,
+  onChange,
+}: IndexerSelectInputConnectorProps) {
+  const dispatch = useDispatch();
+  const { isFetching, isPopulated, values } = useSelector(
+    createIndexersSelector(includeAny)
+  );
+
+  useEffect(() => {
+    if (!isPopulated) {
+      dispatch(fetchIndexers());
+    }
+  }, [isPopulated, dispatch]);
+
+  return (
+    <EnhancedSelectInput
+      name={name}
+      value={value}
+      isFetching={isFetching}
+      values={values}
+      onChange={onChange}
+    />
+  );
+}
+
+IndexerSelectInput.defaultProps = {
+  includeAny: false,
+};
+
+export default IndexerSelectInput;