From d22b11bb901cabd8180baedfce6f55717b72cbbe Mon Sep 17 00:00:00 2001 From: Tsu-ba-me Date: Fri, 31 Mar 2023 22:36:58 -0400 Subject: [PATCH] fix(striker-ui): simplify form message setting by removing message setter list --- .../ManageManifest/AnHostInputGroup.tsx | 14 +-- .../ManageManifest/AnIdInputGroup.tsx | 20 ++--- .../AnNetworkConfigInputGroup.tsx | 14 ++- .../ManageManifest/AnNetworkInputGroup.tsx | 16 ++-- .../ManageManifest/RunManifestInputGroup.tsx | 16 ++-- .../ManageUps/CommonUpsInputGroup.tsx | 14 ++- striker-ui/hooks/useFormUtils.ts | 89 ++++++++----------- striker-ui/types/FormUtils.d.ts | 10 +-- 8 files changed, 78 insertions(+), 115 deletions(-) diff --git a/striker-ui/components/ManageManifest/AnHostInputGroup.tsx b/striker-ui/components/ManageManifest/AnHostInputGroup.tsx index 70dd2a8d..d0156ebb 100644 --- a/striker-ui/components/ManageManifest/AnHostInputGroup.tsx +++ b/striker-ui/components/ManageManifest/AnHostInputGroup.tsx @@ -109,7 +109,7 @@ const AnHostInputGroup = ({ formUtils: { buildFinishInputTestBatchFunction, buildInputFirstRenderFunction, - msgSetters, + setMessage, }, hostId, hostNumber, @@ -170,11 +170,11 @@ const AnHostInputGroup = ({ inputTestBatch={buildPeacefulStringTestBatch( inputLabel, () => { - msgSetters[inputId](); + setMessage(inputId); }, { onFinishBatch: buildFinishInputTestBatchFunction(inputId) }, (message) => { - msgSetters[inputId]({ children: message }); + setMessage(inputId, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(inputId)} @@ -192,7 +192,7 @@ const AnHostInputGroup = ({ buildInputFirstRenderFunction, fenceListEntries, hostId, - msgSetters, + setMessage, ], ); @@ -225,11 +225,11 @@ const AnHostInputGroup = ({ inputTestBatch={buildIPAddressTestBatch( inputLabel, () => { - msgSetters[inputId](); + setMessage(inputId); }, { onFinishBatch: buildFinishInputTestBatchFunction(inputId) }, (message) => { - msgSetters[inputId]({ children: message }); + setMessage(inputId, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(inputId)} @@ -247,7 +247,7 @@ const AnHostInputGroup = ({ hostId, buildFinishInputTestBatchFunction, buildInputFirstRenderFunction, - msgSetters, + setMessage, ], ); diff --git a/striker-ui/components/ManageManifest/AnIdInputGroup.tsx b/striker-ui/components/ManageManifest/AnIdInputGroup.tsx index 8bbb4dfb..04f78ad0 100644 --- a/striker-ui/components/ManageManifest/AnIdInputGroup.tsx +++ b/striker-ui/components/ManageManifest/AnIdInputGroup.tsx @@ -29,7 +29,7 @@ const AnIdInputGroup = < formUtils: { buildFinishInputTestBatchFunction, buildInputFirstRenderFunction, - msgSetters, + setMessage, }, previous: { domain: previousDomain, @@ -53,16 +53,14 @@ const AnIdInputGroup = < inputTestBatch={buildPeacefulStringTestBatch( INPUT_LABEL_AI_PREFIX, () => { - msgSetters[INPUT_ID_AI_PREFIX](); + setMessage(INPUT_ID_AI_PREFIX); }, { onFinishBatch: buildFinishInputTestBatchFunction(INPUT_ID_AI_PREFIX), }, (message) => { - msgSetters[INPUT_ID_AI_PREFIX]({ - children: message, - }); + setMessage(INPUT_ID_AI_PREFIX, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_PREFIX)} @@ -83,16 +81,14 @@ const AnIdInputGroup = < inputTestBatch={buildPeacefulStringTestBatch( INPUT_LABEL_AI_DOMAIN, () => { - msgSetters[INPUT_ID_AI_DOMAIN](); + setMessage(INPUT_ID_AI_DOMAIN); }, { onFinishBatch: buildFinishInputTestBatchFunction(INPUT_ID_AI_DOMAIN), }, (message) => { - msgSetters[INPUT_ID_AI_DOMAIN]({ - children: message, - }); + setMessage(INPUT_ID_AI_DOMAIN, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_DOMAIN)} @@ -113,16 +109,14 @@ const AnIdInputGroup = < inputTestBatch={buildNumberTestBatch( INPUT_LABEL_AI_SEQUENCE, () => { - msgSetters[INPUT_ID_AI_SEQUENCE](); + setMessage(INPUT_ID_AI_SEQUENCE); }, { onFinishBatch: buildFinishInputTestBatchFunction(INPUT_ID_AI_SEQUENCE), }, (message) => { - msgSetters[INPUT_ID_AI_SEQUENCE]({ - children: message, - }); + setMessage(INPUT_ID_AI_SEQUENCE, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_SEQUENCE)} diff --git a/striker-ui/components/ManageManifest/AnNetworkConfigInputGroup.tsx b/striker-ui/components/ManageManifest/AnNetworkConfigInputGroup.tsx index 827972e0..5c7cb32a 100644 --- a/striker-ui/components/ManageManifest/AnNetworkConfigInputGroup.tsx +++ b/striker-ui/components/ManageManifest/AnNetworkConfigInputGroup.tsx @@ -50,8 +50,8 @@ const AnNetworkConfigInputGroup = < const { buildFinishInputTestBatchFunction, buildInputFirstRenderFunction, - msgSetters, - setValidityRe, + setMessage, + unsetKeyRe, } = formUtils; const getNetworkNumber = useCallback( @@ -186,7 +186,7 @@ const AnNetworkConfigInputGroup = < if (networkId === rmId) { isIdMatch = true; - setValidityRe(RegExp(rmId)); + unsetKeyRe(RegExp(rmId)); } else { const { networkType } = networkValue; @@ -206,7 +206,7 @@ const AnNetworkConfigInputGroup = < setNetworkList(newList); }, - [networkListEntries, setNetworkList, setValidityRe], + [networkListEntries, setNetworkList, unsetKeyRe], ); const networksGridLayout = useMemo(() => { @@ -333,16 +333,14 @@ const AnNetworkConfigInputGroup = < inputTestBatch={buildNumberTestBatch( INPUT_LABEL_ANC_MTU, () => { - msgSetters[INPUT_ID_ANC_MTU](); + setMessage(INPUT_ID_ANC_MTU); }, { onFinishBatch: buildFinishInputTestBatchFunction(INPUT_ID_ANC_MTU), }, (message) => { - msgSetters[INPUT_ID_ANC_MTU]({ - children: message, - }); + setMessage(INPUT_ID_ANC_MTU, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_ANC_MTU)} diff --git a/striker-ui/components/ManageManifest/AnNetworkInputGroup.tsx b/striker-ui/components/ManageManifest/AnNetworkInputGroup.tsx index 6f34c7f8..67568753 100644 --- a/striker-ui/components/ManageManifest/AnNetworkInputGroup.tsx +++ b/striker-ui/components/ManageManifest/AnNetworkInputGroup.tsx @@ -80,7 +80,7 @@ const AnNetworkInputGroup = ({ formUtils: { buildFinishInputTestBatchFunction, buildInputFirstRenderFunction, - msgSetters, + setMessage, }, inputGatewayLabel = 'Gateway', inputMinIpLabel = 'IP address', @@ -185,15 +185,13 @@ const AnNetworkInputGroup = ({ inputTestBatch={buildIPAddressTestBatch( `${networkName} ${inputGatewayLabel}`, () => { - msgSetters[inputIdGateway](); + setMessage(inputIdGateway); }, { onFinishBatch: buildFinishInputTestBatchFunction(inputIdGateway), }, (message) => { - msgSetters[inputIdGateway]({ - children: message, - }); + setMessage(inputIdGateway, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(inputIdGateway)} @@ -212,7 +210,7 @@ const AnNetworkInputGroup = ({ networkName, buildFinishInputTestBatchFunction, buildInputFirstRenderFunction, - msgSetters, + setMessage, ]); return ( @@ -269,16 +267,14 @@ const AnNetworkInputGroup = ({ inputTestBatch={buildIPAddressTestBatch( `${networkName} ${inputMinIpLabel}`, () => { - msgSetters[inputIdMinIp](); + setMessage(inputIdMinIp); }, { onFinishBatch: buildFinishInputTestBatchFunction(inputIdMinIp), }, (message) => { - msgSetters[inputIdMinIp]({ - children: message, - }); + setMessage(inputIdMinIp, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(inputIdMinIp)} diff --git a/striker-ui/components/ManageManifest/RunManifestInputGroup.tsx b/striker-ui/components/ManageManifest/RunManifestInputGroup.tsx index 04e45a41..69296dc9 100644 --- a/striker-ui/components/ManageManifest/RunManifestInputGroup.tsx +++ b/striker-ui/components/ManageManifest/RunManifestInputGroup.tsx @@ -35,7 +35,7 @@ const RunManifestInputGroup = ({ formUtils: { buildFinishInputTestBatchFunction, buildInputFirstRenderFunction, - msgSetters, + setMessage, }, knownFences = {}, knownHosts = {}, @@ -117,11 +117,11 @@ const RunManifestInputGroup = ({ inputTestBatch={buildPeacefulStringTestBatch( inputLabel, () => { - msgSetters[inputId](); + setMessage(inputId); }, { onFinishBatch: buildFinishInputTestBatchFunction(inputId) }, (message) => { - msgSetters[inputId]({ children: message }); + setMessage(inputId, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(inputId)} @@ -162,7 +162,7 @@ const RunManifestInputGroup = ({ buildInputFirstRenderFunction, hostListEntries, hostOptionList, - msgSetters, + setMessage, ], ); @@ -289,7 +289,7 @@ const RunManifestInputGroup = ({ inputTestBatch={buildPeacefulStringTestBatch( INPUT_LABEL_RM_AN_DESCRIPTION, () => { - msgSetters[INPUT_ID_RM_AN_DESCRIPTION](); + setMessage(INPUT_ID_RM_AN_DESCRIPTION); }, { onFinishBatch: buildFinishInputTestBatchFunction( @@ -297,7 +297,7 @@ const RunManifestInputGroup = ({ ), }, (message) => { - msgSetters[INPUT_ID_RM_AN_DESCRIPTION]({ + setMessage(INPUT_ID_RM_AN_DESCRIPTION, { children: message, }); }, @@ -323,7 +323,7 @@ const RunManifestInputGroup = ({ inputTestBatch={buildPeacefulStringTestBatch( INPUT_LABEL_RM_AN_PASSWORD, () => { - msgSetters[INPUT_ID_RM_AN_PASSWORD](); + setMessage(INPUT_ID_RM_AN_PASSWORD); }, { onFinishBatch: buildFinishInputTestBatchFunction( @@ -331,7 +331,7 @@ const RunManifestInputGroup = ({ ), }, (message) => { - msgSetters[INPUT_ID_RM_AN_PASSWORD]({ children: message }); + setMessage(INPUT_ID_RM_AN_PASSWORD, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction( diff --git a/striker-ui/components/ManageUps/CommonUpsInputGroup.tsx b/striker-ui/components/ManageUps/CommonUpsInputGroup.tsx index 7e744061..ff0d1cf7 100644 --- a/striker-ui/components/ManageUps/CommonUpsInputGroup.tsx +++ b/striker-ui/components/ManageUps/CommonUpsInputGroup.tsx @@ -22,7 +22,7 @@ const CommonUpsInputGroup = < formUtils: { buildFinishInputTestBatchFunction, buildInputFirstRenderFunction, - msgSetters, + setMessage, }, previous: { upsIPAddress: previousIpAddress, upsName: previousUpsName } = {}, }: CommonUpsInputGroupProps): ReactElement => ( @@ -42,16 +42,14 @@ const CommonUpsInputGroup = < inputTestBatch={buildPeacefulStringTestBatch( INPUT_LABEL_UPS_NAME, () => { - msgSetters[INPUT_ID_UPS_NAME](); + setMessage(INPUT_ID_UPS_NAME); }, { onFinishBatch: buildFinishInputTestBatchFunction(INPUT_ID_UPS_NAME), }, (message) => { - msgSetters[INPUT_ID_UPS_NAME]({ - children: message, - }); + setMessage(INPUT_ID_UPS_NAME, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_UPS_NAME)} @@ -72,16 +70,14 @@ const CommonUpsInputGroup = < inputTestBatch={buildIPAddressTestBatch( INPUT_LABEL_UPS_IP, () => { - msgSetters[INPUT_ID_UPS_IP](); + setMessage(INPUT_ID_UPS_IP); }, { onFinishBatch: buildFinishInputTestBatchFunction(INPUT_ID_UPS_IP), }, (message) => { - msgSetters[INPUT_ID_UPS_IP]({ - children: message, - }); + setMessage(INPUT_ID_UPS_IP, { children: message }); }, )} onFirstRender={buildInputFirstRenderFunction(INPUT_ID_UPS_IP)} diff --git a/striker-ui/hooks/useFormUtils.ts b/striker-ui/hooks/useFormUtils.ts index 2e5dff96..0aeafd73 100644 --- a/striker-ui/hooks/useFormUtils.ts +++ b/striker-ui/hooks/useFormUtils.ts @@ -1,11 +1,9 @@ import { MutableRefObject, useCallback, useMemo, useState } from 'react'; -import buildMapToMessageSetter, { - buildMessageSetter, -} from '../lib/buildMapToMessageSetter'; import buildObjectStateSetterCallback, { - buildProtectedObjectStateSetterCallback, + buildRegExpObjectStateSetterCallback, } from '../lib/buildObjectStateSetterCallback'; +import { Message } from '../components/MessageBox'; import { MessageGroupForwardedRefContent } from '../components/MessageGroup'; const useFormUtils = < @@ -17,8 +15,19 @@ const useFormUtils = < messageGroupRef: MutableRefObject, ): FormUtils => { const [formValidity, setFormValidity] = useState>({}); - const [msgSetterList, setMsgSetterList] = useState>( - () => buildMapToMessageSetter(ids, messageGroupRef), + + const setMessage = useCallback( + (key: keyof M, message?: Message) => { + messageGroupRef.current.setMessage?.call(null, String(key), message); + }, + [messageGroupRef], + ); + + const setMessageRe = useCallback( + (re: RegExp, message?: Message) => { + messageGroupRef.current.setMessageRe?.call(null, re, message); + }, + [messageGroupRef], ); const setValidity = useCallback((key: keyof M, value?: boolean) => { @@ -28,54 +37,25 @@ const useFormUtils = < }, []); const setValidityRe = useCallback((re: RegExp, value?: boolean) => { - setFormValidity((previous) => { - const result: FormValidity = {}; - - Object.keys(previous).forEach((key) => { - const id = key as keyof M; - - if (re.test(key)) { - if (value !== undefined) { - result[id] = value; - } - } else { - result[id] = previous[id]; - } - }); - - return result; - }); + setFormValidity( + buildRegExpObjectStateSetterCallback>(re, value), + ); }, []); - const setMsgSetter = useCallback( - ( - id: keyof M, - setter?: MessageSetter, - { - isOverwrite, - isUseFallback = true, - }: { isOverwrite?: boolean; isUseFallback?: boolean } = {}, - ) => { - const fallbackSetter: ObjectStatePropSetter> = ( - result, - key, - value = buildMessageSetter(String(id), messageGroupRef), - ) => { - result[key] = value; - }; + const unsetKey = useCallback( + (key: keyof M) => { + setMessage(key); + setValidity(key); + }, + [setMessage, setValidity], + ); - setMsgSetterList( - buildProtectedObjectStateSetterCallback>( - id, - setter, - { - isOverwrite, - set: isUseFallback ? fallbackSetter : undefined, - }, - ), - ); + const unsetKeyRe = useCallback( + (re: RegExp) => { + setMessageRe(re); + setValidityRe(re); }, - [messageGroupRef], + [setMessageRe, setValidityRe], ); const buildFinishInputTestBatchFunction = useCallback( @@ -88,10 +68,9 @@ const useFormUtils = < const buildInputFirstRenderFunction = useCallback( (key: keyof M) => ({ isValid }: InputFirstRenderFunctionArgs) => { - setMsgSetter(key); setValidity(key, isValid); }, - [setMsgSetter, setValidity], + [setValidity], ); const isFormInvalid = useMemo( @@ -104,11 +83,13 @@ const useFormUtils = < buildInputFirstRenderFunction, formValidity, isFormInvalid, - msgSetters: msgSetterList, setFormValidity, - setMsgSetter, + setMessage, + setMessageRe, setValidity, setValidityRe, + unsetKey, + unsetKeyRe, }; }; diff --git a/striker-ui/types/FormUtils.d.ts b/striker-ui/types/FormUtils.d.ts index 53f8382e..a33da4d0 100644 --- a/striker-ui/types/FormUtils.d.ts +++ b/striker-ui/types/FormUtils.d.ts @@ -19,15 +19,13 @@ type FormUtils = { buildInputFirstRenderFunction: InputFirstRenderFunctionBuilder; formValidity: FormValidity; isFormInvalid: boolean; - msgSetters: MapToMessageSetter; setFormValidity: import('react').Dispatch< import('react').SetStateAction> >; - setMsgSetter: ( - id: keyof M, - setter?: MessageSetter, - options?: { isOverwrite?: boolean }, - ) => void; + setMessage: (key: keyof M, message?: Message) => void; + setMessageRe: (re: RegExp, message?: Message) => void; setValidity: (key: keyof M, value?: boolean) => void; setValidityRe: (re: RegExp, value?: boolean) => void; + unsetKey: (key: keyof M) => void; + unsetKeyRe: (re: RegExp) => void; };