From c93667bb826de7f39878b9dabbc1ef52e545d4c9 Mon Sep 17 00:00:00 2001 From: Tsu-ba-me Date: Sat, 13 Aug 2022 00:40:14 -0400 Subject: [PATCH] fix(striker-ui): simplify input tests in general, network init forms --- striker-ui/components/GeneralInitForm.tsx | 76 ++++++--------- striker-ui/components/NetworkInitForm.tsx | 113 ++++++---------------- 2 files changed, 55 insertions(+), 134 deletions(-) diff --git a/striker-ui/components/GeneralInitForm.tsx b/striker-ui/components/GeneralInitForm.tsx index d99fb9e9..590bcd8f 100644 --- a/striker-ui/components/GeneralInitForm.tsx +++ b/striker-ui/components/GeneralInitForm.tsx @@ -24,7 +24,7 @@ import OutlinedInputWithLabel, { import pad from '../lib/pad'; import SuggestButton from './SuggestButton'; import { createTestInputFunction, testNotBlank } from '../lib/test_input'; -import { InputTestBatches } from '../types/TestInputFunction'; +import { InputTestBatches, InputTestInputs } from '../types/TestInputFunction'; import { BodyText } from './Text'; type GeneralInitFormForwardRefContent = { @@ -198,7 +198,9 @@ const GeneralInitForm = forwardRef< [INPUT_TEST_IDS.confirmAdminPassword]: { defaults: { getValue: () => - confirmAdminPasswordInputRef.current.getValue?.call(null), + isConfirmAdminPassword + ? confirmAdminPasswordInputRef.current.getValue?.call(null) + : adminPasswordInputRef.current.getValue?.call(null), onSuccess: () => { setConfirmAdminPasswordInputMessage(undefined); }, @@ -313,6 +315,7 @@ const GeneralInitForm = forwardRef< }, }), [ + isConfirmAdminPassword, setAdminPasswordInputMessage, setConfirmAdminPasswordInputMessage, setDomainNameInputMessage, @@ -321,16 +324,25 @@ const GeneralInitForm = forwardRef< setOrganizationPrefixInputMessage, ], ); - const testInput = useMemo( () => createTestInputFunction(inputTests), [inputTests], ); + const testAllInputs = useCallback( (...excludeTestIds: string[]) => testInput({ excludeTestIds, isIgnoreOnCallbacks: true }), [testInput], ); + const testInputSeparate = useCallback( + (id: string, input: InputTestInputs[string]) => { + const isLocalValid = testInput({ + inputs: { [id]: input }, + }); + toggleSubmitDisabled?.call(null, isLocalValid && testAllInputs(id)); + }, + [testInput, testAllInputs, toggleSubmitDisabled], + ); const populateOrganizationPrefixInput = useCallback( ({ organizationName = organizationNameInputRef.current.getValue?.call(null), @@ -489,19 +501,13 @@ const GeneralInitForm = forwardRef< inputLabelProps={{ isNotifyRequired: true }} label="Prefix" onChange={({ target: { value } }) => { - testInput({ - inputs: { - [INPUT_TEST_IDS.organizationPrefix]: { - max: MAX_ORGANIZATION_PREFIX_LENGTH, - min: MIN_ORGANIZATION_PREFIX_LENGTH, - value, - }, + testInputSeparate(INPUT_TEST_IDS.organizationPrefix, { + [INPUT_TEST_IDS.organizationPrefix]: { + max: MAX_ORGANIZATION_PREFIX_LENGTH, + min: MIN_ORGANIZATION_PREFIX_LENGTH, + value, }, }); - toggleSubmitDisabled?.call( - null, - testAllInputs(INPUT_TEST_IDS.organizationPrefix), - ); setIsShowOrganizationPrefixSuggest( isOrganizationPrefixPrereqFilled(), ); @@ -533,13 +539,7 @@ const GeneralInitForm = forwardRef< inputLabelProps={{ isNotifyRequired: true }} label="Striker #" onChange={({ target: { value } }) => { - testInput({ - inputs: { [INPUT_TEST_IDS.hostNumber]: { value } }, - }); - toggleSubmitDisabled?.call( - null, - testAllInputs(INPUT_TEST_IDS.hostNumber), - ); + testInputSeparate(INPUT_TEST_IDS.hostNumber, { value }); }} onHelp={() => { setHelpMessage( @@ -568,13 +568,7 @@ const GeneralInitForm = forwardRef< inputLabelProps={{ isNotifyRequired: true }} label="Domain name" onChange={({ target: { value } }) => { - testInput({ - inputs: { [INPUT_TEST_IDS.domainName]: { value } }, - }); - toggleSubmitDisabled?.call( - null, - testAllInputs(INPUT_TEST_IDS.domainName), - ); + testInputSeparate(INPUT_TEST_IDS.domainName, { value }); }} onHelp={() => { setHelpMessage( @@ -603,13 +597,7 @@ const GeneralInitForm = forwardRef< inputLabelProps={{ isNotifyRequired: true }} label="Host name" onChange={({ target: { value } }) => { - testInput({ - inputs: { [INPUT_TEST_IDS.hostName]: { value } }, - }); - toggleSubmitDisabled?.call( - null, - testAllInputs(INPUT_TEST_IDS.hostName), - ); + testInputSeparate(INPUT_TEST_IDS.hostName, { value }); setIsShowHostNameSuggest(isHostNamePrereqFilled()); }} onHelp={() => { @@ -654,13 +642,9 @@ const GeneralInitForm = forwardRef< inputLabelProps={{ isNotifyRequired: true }} label="Admin password" onChange={({ target: { value } }) => { - testInput({ - inputs: { [INPUT_TEST_IDS.adminPassword]: { value } }, + testInputSeparate(INPUT_TEST_IDS.adminPassword, { + value, }); - toggleSubmitDisabled?.call( - null, - testAllInputs(INPUT_TEST_IDS.adminPassword), - ); }} onHelp={() => { setHelpMessage( @@ -690,15 +674,9 @@ const GeneralInitForm = forwardRef< }} label="Confirm password" onChange={({ target: { value } }) => { - testInput({ - inputs: { - [INPUT_TEST_IDS.confirmAdminPassword]: { value }, - }, + testInputSeparate(INPUT_TEST_IDS.confirmAdminPassword, { + value, }); - toggleSubmitDisabled?.call( - null, - testAllInputs(INPUT_TEST_IDS.confirmAdminPassword), - ); }} /> } diff --git a/striker-ui/components/NetworkInitForm.tsx b/striker-ui/components/NetworkInitForm.tsx index 478c990b..576ffeb3 100644 --- a/striker-ui/components/NetworkInitForm.tsx +++ b/striker-ui/components/NetworkInitForm.tsx @@ -49,8 +49,8 @@ import periodicFetch from '../lib/fetchers/periodicFetch'; import SelectWithLabel from './SelectWithLabel'; import Spinner from './Spinner'; import sumstring from '../lib/sumstring'; -import { testInput, testNotBlank } from '../lib/test_input'; -import { InputTestBatches } from '../types/TestInputFunction'; +import { createTestInputFunction, testNotBlank } from '../lib/test_input'; +import { InputTestBatches, InputTestInputs } from '../types/TestInputFunction'; import { BodyText, DataGridCellText } from './Text'; type NetworkInput = { @@ -264,7 +264,6 @@ const NetworkForm: FC<{ interfaceIndex: number, ) => MUIBoxProps['onMouseUp']; getNetworkTypeCount: (targetType: string, lastIndex?: number) => number; - inputTests: InputTestBatches; networkIndex: number; networkInput: NetworkInput; networkInputs: NetworkInput[]; @@ -274,12 +273,10 @@ const NetworkForm: FC<{ setNetworkInterfaceInputMap: Dispatch< SetStateAction >; - testAllInputs: (...excludeTestIds: string[]) => boolean; - toggleSubmitDisabled?: ToggleSubmitDisabledFunction; + testInputSeparate: (id: string, input: InputTestInputs[string]) => void; }> = ({ createDropMouseUpHandler, getNetworkTypeCount, - inputTests, networkIndex, networkInput, networkInputs, @@ -287,8 +284,7 @@ const NetworkForm: FC<{ optionalNetworkInputsLength, setNetworkInputs, setNetworkInterfaceInputMap, - testAllInputs, - toggleSubmitDisabled, + testInputSeparate, }) => { const theme = useTheme(); const breakpointMedium = useMediaQuery(theme.breakpoints.up('md')); @@ -418,19 +414,9 @@ const NetworkForm: FC<{ ?.call(null, interfaces, networkInterfaceIndex) ?.call(null, ...args); - const isLocalValid = testInput({ - inputs: { - [interfacesInputTestId]: { - value: getFilled(interfaces).length, - }, - }, - tests: inputTests, + testInputSeparate(interfacesInputTestId, { + value: getFilled(interfaces).length, }); - - toggleSubmitDisabled?.call( - null, - isLocalValid && testAllInputs(interfacesInputTestId), - ); }} > {networkInterface ? ( @@ -445,20 +431,9 @@ const NetworkForm: FC<{ setNetworkInterfaceInputMap({ ...networkInterfaceInputMap, }); - - const isLocalValid = testInput({ - inputs: { - [interfacesInputTestId]: { - value: getFilled(interfaces).length, - }, - }, - tests: inputTests, + testInputSeparate(interfacesInputTestId, { + value: getFilled(interfaces).length, }); - - toggleSubmitDisabled?.call( - null, - isLocalValid && testAllInputs(interfacesInputTestId), - ); }} /> ) : ( @@ -475,19 +450,7 @@ const NetworkForm: FC<{ inputLabelProps={{ isNotifyRequired: true }} label="IP address" onChange={({ target: { value } }) => { - const isLocalValid = testInput({ - inputs: { - [ipAddressInputTestId]: { - value, - }, - }, - tests: inputTests, - }); - - toggleSubmitDisabled?.call( - null, - isLocalValid && testAllInputs(ipAddressInputTestId), - ); + testInputSeparate(ipAddressInputTestId, { value }); }} value={ipAddress} /> @@ -501,17 +464,7 @@ const NetworkForm: FC<{ inputLabelProps={{ isNotifyRequired: true }} label="Subnet mask" onChange={({ target: { value } }) => { - const isLocalValid = testInput({ - inputs: { - [subnetMaskInputTestId]: { value }, - }, - tests: inputTests, - }); - - toggleSubmitDisabled?.call( - null, - isLocalValid && testAllInputs(subnetMaskInputTestId), - ); + testInputSeparate(subnetMaskInputTestId, { value }); }} value={subnetMask} /> @@ -525,7 +478,6 @@ const NetworkForm: FC<{ NetworkForm.defaultProps = { createDropMouseUpHandler: undefined, - toggleSubmitDisabled: undefined, }; const NetworkInitForm = forwardRef< @@ -722,15 +674,24 @@ const NetworkInitForm = forwardRef< setNetworkIPAddressInputMessage, setNetworkSubnetMaskInputMessage, ]); + const testInput = useMemo( + () => createTestInputFunction(inputTests), + [inputTests], + ); const testAllInputs = useCallback( (...excludeTestIds: string[]) => - testInput({ - excludeTestIds, - isIgnoreOnCallbacks: true, - tests: inputTests, - }), - [inputTests], + testInput({ excludeTestIds, isIgnoreOnCallbacks: true }), + [testInput], + ); + const testInputSeparate = useCallback( + (id: string, input: InputTestInputs[string]) => { + const isLocalValid = testInput({ + inputs: { [id]: input }, + }); + toggleSubmitDisabled?.call(null, isLocalValid && testAllInputs(id)); + }, + [testInput, testAllInputs, toggleSubmitDisabled], ); const clearNetworkInterfaceHeld = useCallback(() => { setNetworkInterfaceHeld(undefined); @@ -997,7 +958,6 @@ const NetworkInitForm = forwardRef< {...{ createDropMouseUpHandler, getNetworkTypeCount, - inputTests, networkIndex, networkInput, networkInputs, @@ -1005,8 +965,7 @@ const NetworkInitForm = forwardRef< optionalNetworkInputsLength, setNetworkInputs, setNetworkInterfaceInputMap, - testAllInputs, - toggleSubmitDisabled, + testInputSeparate, }} /> ); @@ -1023,15 +982,7 @@ const NetworkInitForm = forwardRef< id="network-init-gateway" inputLabelProps={{ isNotifyRequired: true }} onChange={({ target: { value } }) => { - const isLocalValid = testInput({ - inputs: { [INPUT_TEST_IDS.gateway]: { value } }, - tests: inputTests, - }); - - toggleSubmitDisabled?.call( - null, - isLocalValid && testAllInputs(INPUT_TEST_IDS.gateway), - ); + testInputSeparate(INPUT_TEST_IDS.gateway, { value }); }} label="Gateway" /> @@ -1044,15 +995,7 @@ const NetworkInitForm = forwardRef< id="network-init-dns-csv" inputLabelProps={{ isNotifyRequired: true }} onChange={({ target: { value } }) => { - const isLocalValid = testInput({ - inputs: { [INPUT_TEST_IDS.dnsCSV]: { value } }, - tests: inputTests, - }); - - toggleSubmitDisabled?.call( - null, - isLocalValid && testAllInputs(INPUT_TEST_IDS.dnsCSV), - ); + testInputSeparate(INPUT_TEST_IDS.dnsCSV, { value }); }} label="Domain name server(s)" />