fix(striker-ui): isolate EditFenceDeviceInputGroup

striker-ui/components/AddFenceDeviceForm.tsx

@@ -1,15 +1,12 @@
-import { Box, Switch } from '@mui/material';
-import { FC, ReactElement, ReactNode, useMemo, useState } from 'react';
+import { Box } from '@mui/material';
+import { FC, useMemo, useState } from 'react';
 
 import api from '../lib/api';
 import Autocomplete from './Autocomplete';
 import ContainedButton from './ContainedButton';
+import EditFenceDeviceInputGroup from './EditFenceDeviceInputGroup';
 import FlexBox from './FlexBox';
 import handleAPIError from '../lib/handleAPIError';
-import InputWithRef from './InputWithRef';
-import OutlinedInputWithLabel from './OutlinedInputWithLabel';
-import { ExpandablePanel } from './Panels';
-import SelectWithLabel from './SelectWithLabel';
 import Spinner from './Spinner';
 import { BodyText } from './Text';
 import useIsFirstRender from '../hooks/useIsFirstRender';
@@ -21,48 +18,7 @@ type FenceDeviceAutocompleteOption = {
   label: string;
 };
 
-type FenceParameterInputBuilder = (args: {
-  id: string;
-  isChecked?: boolean;
-  isRequired?: boolean;
-  label?: string;
-  selectOptions?: string[];
-  value?: string;
-}) => ReactElement;
-
-const MAP_TO_INPUT_BUILDER: Partial<
-  Record<Exclude<FenceParameterType, 'string'>, FenceParameterInputBuilder>
-> & { string: FenceParameterInputBuilder } = {
-  boolean: ({ id, isChecked = false, label }) => (
-    <FlexBox key={`${id}-wrapper`} row>
-      <BodyText flexGrow={1}>{label}</BodyText>
-      <Switch checked={isChecked} edge="end" id={id} />
-    </FlexBox>
-  ),
-  select: ({ id, isRequired, label, selectOptions = [], value = '' }) => (
-    <InputWithRef
-      key={`${id}-wrapper`}
-      input={
-        <SelectWithLabel
-          id={id}
-          label={label}
-          selectItems={selectOptions}
-          selectProps={{ value }}
-        />
-      }
-      required={isRequired}
-    />
-  ),
-  string: ({ id, isRequired, label = '', value }) => (
-    <InputWithRef
-      key={`${id}-wrapper`}
-      input={<OutlinedInputWithLabel id={id} label={label} value={value} />}
-      required={isRequired}
-    />
-  ),
-};
-
-const AddFenceDeivceForm: FC = () => {
+const AddFenceDeviceForm: FC = () => {
   const isFirstRender = useIsFirstRender();
 
   const [fenceDeviceTemplate, setFenceDeviceTemplate] = useProtectedState<
@@ -141,80 +97,15 @@ const AddFenceDeivceForm: FC = () => {
     ),
     [fenceDeviceTypeOptions, fenceDeviceTypeValue],
   );
-  const fenceParameterElements = useMemo(() => {
-    let result: ReactNode;
-
-    if (fenceDeviceTemplate && fenceDeviceTypeValue) {
-      const { fenceDeviceId } = fenceDeviceTypeValue;
-      const { parameters: fenceDeviceParameters } =
-        fenceDeviceTemplate[fenceDeviceId];
-
-      const { optional: optionalInputs, required: requiredInputs } =
-        Object.entries(fenceDeviceParameters).reduce<{
-          optional: ReactElement[];
-          required: ReactElement[];
-        }>(
-          (
-            previous,
-            [
-              parameterId,
-              {
-                content_type: contentType,
-                default: parameterDefault,
-                options: parameterSelectOptions,
-                required: isRequired,
-              },
-            ],
-          ) => {
-            const { optional, required } = previous;
-            const buildInput =
-              MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string;
-
-            const fenceJoinParameterId = `${fenceDeviceId}-${parameterId}`;
-            const parameterIsRequired = isRequired === '1';
-            const parameterInput = buildInput({
-              id: fenceJoinParameterId,
-              isChecked: parameterDefault === '1',
-              isRequired: parameterIsRequired,
-              label: parameterId,
-              selectOptions: parameterSelectOptions,
-              value: parameterDefault,
-            });
-
-            if (parameterIsRequired) {
-              required.push(parameterInput);
-            } else {
-              optional.push(parameterInput);
-            }
-
-            return previous;
-          },
-          {
-            optional: [],
-            required: [
-              MAP_TO_INPUT_BUILDER.string({
-                id: `${fenceDeviceId}-name`,
-                isRequired: true,
-                label: 'Fence device name',
-              }),
-            ],
-          },
-        );
-
-      result = (
-        <>
-          <ExpandablePanel expandInitially header="Required parameters">
-            <FlexBox margin=".4em 0">{requiredInputs}</FlexBox>
-          </ExpandablePanel>
-          <ExpandablePanel header="Optional parameters">
-            <FlexBox margin=".4em 0">{optionalInputs}</FlexBox>
-          </ExpandablePanel>
-        </>
+  const fenceParameterElements = useMemo(
+    () => (
+      <EditFenceDeviceInputGroup
+        fenceDeviceId={fenceDeviceTypeValue?.fenceDeviceId}
+        fenceDeviceTemplate={fenceDeviceTemplate}
+      />
+    ),
+    [fenceDeviceTemplate, fenceDeviceTypeValue],
   );
-    }
-
-    return result;
-  }, [fenceDeviceTemplate, fenceDeviceTypeValue]);
 
   const formContent = useMemo(
     () =>
@@ -255,4 +146,4 @@ const AddFenceDeivceForm: FC = () => {
   return <>{formContent}</>;
 };
 
-export default AddFenceDeivceForm;
+export default AddFenceDeviceForm;

striker-ui/components/EditFenceDeviceInputGroup.tsx

@@ -0,0 +1,124 @@
+import { FC, ReactElement, ReactNode, useMemo } from 'react';
+
+import FlexBox from './FlexBox';
+import InputWithRef from './InputWithRef';
+import OutlinedInputWithLabel from './OutlinedInputWithLabel';
+import { ExpandablePanel } from './Panels';
+import SelectWithLabel from './SelectWithLabel';
+import SwitchWithLabel from './SwitchWithLabel';
+
+const CHECKED_STATES: Array<string | undefined> = ['1', 'on'];
+
+const MAP_TO_INPUT_BUILDER: MapToInputBuilder = {
+  boolean: ({ id, isChecked = false, label }) => (
+    <InputWithRef
+      key={`${id}-wrapper`}
+      input={<SwitchWithLabel id={id} label={label} checked={isChecked} />}
+      valueType="boolean"
+    />
+  ),
+  select: ({ id, isRequired, label, selectOptions = [], value = '' }) => (
+    <InputWithRef
+      key={`${id}-wrapper`}
+      input={
+        <SelectWithLabel
+          id={id}
+          label={label}
+          selectItems={selectOptions}
+          value={value}
+        />
+      }
+      required={isRequired}
+    />
+  ),
+  string: ({ id, isRequired, label = '', value }) => (
+    <InputWithRef
+      key={`${id}-wrapper`}
+      input={<OutlinedInputWithLabel id={id} label={label} value={value} />}
+      required={isRequired}
+    />
+  ),
+};
+
+const EditFenceDeviceInputGroup: FC<EditFenceDeviceInputGroupProps> = ({
+  fenceDeviceId,
+  fenceDeviceTemplate,
+}) => {
+  const fenceParameterElements = useMemo(() => {
+    let result: ReactNode;
+
+    if (fenceDeviceTemplate && fenceDeviceId) {
+      const { parameters: fenceDeviceParameters } =
+        fenceDeviceTemplate[fenceDeviceId];
+
+      const { optional: optionalInputs, required: requiredInputs } =
+        Object.entries(fenceDeviceParameters).reduce<{
+          optional: ReactElement[];
+          required: ReactElement[];
+        }>(
+          (
+            previous,
+            [
+              parameterId,
+              {
+                content_type: contentType,
+                default: parameterDefault,
+                options: parameterSelectOptions,
+                required: isRequired,
+              },
+            ],
+          ) => {
+            const { optional, required } = previous;
+            const buildInput =
+              MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string;
+
+            const fenceJoinParameterId = `${fenceDeviceId}-${parameterId}`;
+            const parameterIsRequired = isRequired === '1';
+            const parameterInput = buildInput({
+              id: fenceJoinParameterId,
+              isChecked: CHECKED_STATES.includes(parameterDefault),
+              isRequired: parameterIsRequired,
+              label: parameterId,
+              selectOptions: parameterSelectOptions,
+              value: parameterDefault,
+            });
+
+            if (parameterIsRequired) {
+              required.push(parameterInput);
+            } else {
+              optional.push(parameterInput);
+            }
+
+            return previous;
+          },
+          {
+            optional: [],
+            required: [
+              MAP_TO_INPUT_BUILDER.string({
+                id: `${fenceDeviceId}-name`,
+                isRequired: true,
+                label: 'Fence device name',
+              }),
+            ],
+          },
+        );
+
+      result = (
+        <>
+          <ExpandablePanel expandInitially header="Required parameters">
+            <FlexBox margin=".4em 0">{requiredInputs}</FlexBox>
+          </ExpandablePanel>
+          <ExpandablePanel header="Optional parameters">
+            <FlexBox margin=".4em 0">{optionalInputs}</FlexBox>
+          </ExpandablePanel>
+        </>
+      );
+    }
+
+    return result;
+  }, [fenceDeviceId, fenceDeviceTemplate]);
+
+  return <>{fenceParameterElements}</>;
+};
+
+export default EditFenceDeviceInputGroup;

striker-ui/types/EditFenceDeviceInputGroup.d.ts

@@ -0,0 +1,17 @@
+type FenceParameterInputBuilder = (args: {
+  id: string;
+  isChecked?: boolean;
+  isRequired?: boolean;
+  label?: string;
+  selectOptions?: string[];
+  value?: string;
+}) => ReactElement;
+
+type MapToInputBuilder = Partial<
+  Record<Exclude<FenceParameterType, 'string'>, FenceParameterInputBuilder>
+> & { string: FenceParameterInputBuilder };
+
+type EditFenceDeviceInputGroupProps = {
+  fenceDeviceId?: string;
+  fenceDeviceTemplate?: APIFenceTemplate;
+};