Convert Form Components to TypeScript

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

@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+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,
+      };
+    }
+  );
+
+interface IndexerFlagsSelectInputProps {
+  name: string;
+  indexerFlags: number;
+  onChange(payload: EnhancedSelectInputChanged<number>): void;
+}
+
+function IndexerFlagsSelectInput({
+  name,
+  indexerFlags,
+  onChange,
+  ...otherProps
+}: IndexerFlagsSelectInputProps) {
+  const { value, values } = useSelector(selectIndexerFlagsValues(indexerFlags));
+
+  const handleChange = useCallback(
+    (change: EnhancedSelectInputChanged<number[]>) => {
+      const indexerFlags = change.value.reduce(
+        (acc, flagId) => acc + flagId,
+        0
+      );
+
+      onChange({ name, value: indexerFlags });
+    },
+    [name, onChange]
+  );
+
+  return (
+    <EnhancedSelectInput
+      {...otherProps}
+      name={name}
+      value={value}
+      values={values}
+      onChange={handleChange}
+    />
+  );
+}
+
+export default IndexerFlagsSelectInput;