From 604b95ffa9f2167ad1d20a5f3a93b9cfdd575e6b Mon Sep 17 00:00:00 2001 From: Tsu-ba-me Date: Fri, 17 Feb 2023 20:06:05 -0500 Subject: [PATCH] fix(striker-ui): simplify 'fence device' to 'fence' --- ...eDeviceForm.tsx => AddFenceInputGroup.tsx} | 82 ++++++++----------- ...putGroup.tsx => CommonFenceInputGroup.tsx} | 21 +++-- ...tGroup.d.ts => CommonFenceInputGroup.d.ts} | 8 +- 3 files changed, 49 insertions(+), 62 deletions(-) rename striker-ui/components/{AddFenceDeviceForm.tsx => AddFenceInputGroup.tsx} (51%) rename striker-ui/components/{EditFenceDeviceInputGroup.tsx => CommonFenceInputGroup.tsx} (86%) rename striker-ui/types/{EditFenceDeviceInputGroup.d.ts => CommonFenceInputGroup.d.ts} (66%) diff --git a/striker-ui/components/AddFenceDeviceForm.tsx b/striker-ui/components/AddFenceInputGroup.tsx similarity index 51% rename from striker-ui/components/AddFenceDeviceForm.tsx rename to striker-ui/components/AddFenceInputGroup.tsx index cec50073..54f788f9 100644 --- a/striker-ui/components/AddFenceDeviceForm.tsx +++ b/striker-ui/components/AddFenceInputGroup.tsx @@ -3,8 +3,7 @@ import { FC, useMemo, useState } from 'react'; import api from '../lib/api'; import Autocomplete from './Autocomplete'; -import ContainedButton from './ContainedButton'; -import EditFenceDeviceInputGroup from './EditFenceDeviceInputGroup'; +import CommonFenceInputGroup from './CommonFenceInputGroup'; import FlexBox from './FlexBox'; import handleAPIError from '../lib/handleAPIError'; import Spinner from './Spinner'; @@ -12,27 +11,27 @@ import { BodyText } from './Text'; import useIsFirstRender from '../hooks/useIsFirstRender'; import useProtectedState from '../hooks/useProtectedState'; -type FenceDeviceAutocompleteOption = { - fenceDeviceDescription: string; - fenceDeviceId: string; +type FenceAutocompleteOption = { + fenceDescription: string; + fenceId: string; label: string; }; -const AddFenceDeviceForm: FC = () => { +const AddFenceInputGroup: FC = () => { const isFirstRender = useIsFirstRender(); - const [fenceDeviceTemplate, setFenceDeviceTemplate] = useProtectedState< + const [fenceTemplate, setFenceTemplate] = useProtectedState< APIFenceTemplate | undefined >(undefined); - const [fenceDeviceTypeValue, setInputFenceDeviceTypeValue] = - useState(null); + const [fenceTypeValue, setInputFenceTypeValue] = + useState(null); const [isLoadingTemplate, setIsLoadingTemplate] = useProtectedState(true); - const fenceDeviceTypeOptions = useMemo( + const fenceTypeOptions = useMemo( () => - fenceDeviceTemplate - ? Object.entries(fenceDeviceTemplate).map( + fenceTemplate + ? Object.entries(fenceTemplate).map( ([id, { description: rawDescription }]) => { const description = typeof rawDescription === 'string' @@ -40,34 +39,30 @@ const AddFenceDeviceForm: FC = () => { : 'No description.'; return { - fenceDeviceDescription: description, - fenceDeviceId: id, + fenceDescription: description, + fenceId: id, label: id, }; }, ) : [], - [fenceDeviceTemplate], + [fenceTemplate], ); - const fenceDeviceTypeElement = useMemo( + const fenceTypeElement = useMemo( () => ( - option.fenceDeviceId === value.fenceDeviceId + option.fenceId === value.fenceId } label="Fence device type" - onChange={(event, newFenceDeviceType) => { - setInputFenceDeviceTypeValue(newFenceDeviceType); + onChange={(event, newFenceType) => { + setInputFenceTypeValue(newFenceType); }} openOnFocus - options={fenceDeviceTypeOptions} - renderOption={( - props, - { fenceDeviceDescription, fenceDeviceId }, - { selected }, - ) => ( + options={fenceTypeOptions} + renderOption={(props, { fenceDescription, fenceId }, { selected }) => ( { fontWeight: selected ? 400 : undefined, }} > - {fenceDeviceId} + {fenceId} - {fenceDeviceDescription} + {fenceDescription} )} - value={fenceDeviceTypeValue} + value={fenceTypeValue} /> ), - [fenceDeviceTypeOptions, fenceDeviceTypeValue], + [fenceTypeOptions, fenceTypeValue], ); const fenceParameterElements = useMemo( () => ( - ), - [fenceDeviceTemplate, fenceDeviceTypeValue], + [fenceTemplate, fenceTypeValue], ); const formContent = useMemo( @@ -112,28 +107,19 @@ const AddFenceDeviceForm: FC = () => { isLoadingTemplate ? ( ) : ( - { - event.preventDefault(); - }} - sx={{ '& > div': { marginBottom: 0 } }} - > - {fenceDeviceTypeElement} + div': { marginBottom: 0 } }}> + {fenceTypeElement} {fenceParameterElements} - - Add fence device - ), - [fenceDeviceTypeElement, fenceParameterElements, isLoadingTemplate], + [fenceTypeElement, fenceParameterElements, isLoadingTemplate], ); if (isFirstRender) { api .get(`/fence/template`) .then(({ data }) => { - setFenceDeviceTemplate(data); + setFenceTemplate(data); }) .catch((error) => { handleAPIError(error); @@ -146,4 +132,4 @@ const AddFenceDeviceForm: FC = () => { return <>{formContent}; }; -export default AddFenceDeviceForm; +export default AddFenceInputGroup; diff --git a/striker-ui/components/EditFenceDeviceInputGroup.tsx b/striker-ui/components/CommonFenceInputGroup.tsx similarity index 86% rename from striker-ui/components/EditFenceDeviceInputGroup.tsx rename to striker-ui/components/CommonFenceInputGroup.tsx index 0e0f262e..ce0f63e9 100644 --- a/striker-ui/components/EditFenceDeviceInputGroup.tsx +++ b/striker-ui/components/CommonFenceInputGroup.tsx @@ -40,19 +40,18 @@ const MAP_TO_INPUT_BUILDER: MapToInputBuilder = { ), }; -const EditFenceDeviceInputGroup: FC = ({ - fenceDeviceId, - fenceDeviceTemplate, +const CommonFenceInputGroup: FC = ({ + fenceId, + fenceTemplate, }) => { const fenceParameterElements = useMemo(() => { let result: ReactNode; - if (fenceDeviceTemplate && fenceDeviceId) { - const { parameters: fenceDeviceParameters } = - fenceDeviceTemplate[fenceDeviceId]; + if (fenceTemplate && fenceId) { + const { parameters: fenceParameters } = fenceTemplate[fenceId]; const { optional: optionalInputs, required: requiredInputs } = - Object.entries(fenceDeviceParameters).reduce<{ + Object.entries(fenceParameters).reduce<{ optional: ReactElement[]; required: ReactElement[]; }>( @@ -72,7 +71,7 @@ const EditFenceDeviceInputGroup: FC = ({ const buildInput = MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string; - const fenceJoinParameterId = `${fenceDeviceId}-${parameterId}`; + const fenceJoinParameterId = `${fenceId}-${parameterId}`; const parameterIsRequired = isRequired === '1'; const parameterInput = buildInput({ id: fenceJoinParameterId, @@ -95,7 +94,7 @@ const EditFenceDeviceInputGroup: FC = ({ optional: [], required: [ MAP_TO_INPUT_BUILDER.string({ - id: `${fenceDeviceId}-name`, + id: `${fenceId}-name`, isRequired: true, label: 'Fence device name', }), @@ -116,9 +115,9 @@ const EditFenceDeviceInputGroup: FC = ({ } return result; - }, [fenceDeviceId, fenceDeviceTemplate]); + }, [fenceId, fenceTemplate]); return <>{fenceParameterElements}; }; -export default EditFenceDeviceInputGroup; +export default CommonFenceInputGroup; diff --git a/striker-ui/types/EditFenceDeviceInputGroup.d.ts b/striker-ui/types/CommonFenceInputGroup.d.ts similarity index 66% rename from striker-ui/types/EditFenceDeviceInputGroup.d.ts rename to striker-ui/types/CommonFenceInputGroup.d.ts index 5cdf5074..ea18d068 100644 --- a/striker-ui/types/EditFenceDeviceInputGroup.d.ts +++ b/striker-ui/types/CommonFenceInputGroup.d.ts @@ -11,7 +11,9 @@ type MapToInputBuilder = Partial< Record, FenceParameterInputBuilder> > & { string: FenceParameterInputBuilder }; -type EditFenceDeviceInputGroupProps = { - fenceDeviceId?: string; - fenceDeviceTemplate?: APIFenceTemplate; +type CommonFenceInputGroupOptionalProps = { + fenceId?: string; + fenceTemplate?: APIFenceTemplate; }; + +type CommonFenceInputGroupProps = CommonFenceInputGroupOptionalProps;