fix(striker-ui): disable submit in StrikerInitForm until sub-forms are valid

striker-ui/components/StrikerInitForm.tsx

@@ -1,4 +1,4 @@
-import { FC, useMemo, useRef, useState } from 'react';
+import { FC, useCallback, useMemo, useRef, useState } from 'react';
 
 import ContainedButton from './ContainedButton';
 import FlexBox from './FlexBox';
@@ -16,6 +16,11 @@ import { HeaderText } from './Text';
 
 const StrikerInitForm: FC = () => {
   const [submitMessage, setSubmitMessage] = useState<Message | undefined>();
+  const [isDisableSubmit, setIsDisableSubmit] = useState<boolean>(true);
+  const [isGeneralInitFormValid, setIsGeneralInitFormValid] =
+    useState<boolean>(false);
+  const [isNetworkInitFormValid, setIsNetworkInitFormValid] =
+    useState<boolean>(false);
   const [isSubmittingForm, setIsSubmittingForm] = useState<boolean>(false);
 
   const generalInitFormRef = useRef<GeneralInitFormForwardRefContent>({});
@@ -28,6 +33,7 @@ const StrikerInitForm: FC = () => {
       ) : (
         <FlexBox row sx={{ flexDirection: 'row-reverse' }}>
           <ContainedButton
+            disabled={isDisableSubmit}
             onClick={() => {
               setIsSubmittingForm(true);
 
@@ -57,17 +63,37 @@ const StrikerInitForm: FC = () => {
           </ContainedButton>
         </FlexBox>
       ),
-    [isSubmittingForm],
+    [isDisableSubmit, isSubmittingForm],
   );
 
+  const toggleSubmitDisabled = useCallback((...testResults: boolean[]) => {
+    setIsDisableSubmit(!testResults.every((testResult) => testResult));
+  }, []);
+
   return (
     <Panel>
       <PanelHeader>
         <HeaderText text="Initialize striker" />
       </PanelHeader>
       <FlexBox>
-        <GeneralInitForm ref={generalInitFormRef} />
+        <GeneralInitForm
-        <NetworkInitForm ref={networkInitFormRef} />
+          ref={generalInitFormRef}
+          toggleSubmitDisabled={(testResult) => {
+            if (testResult !== isGeneralInitFormValid) {
+              setIsGeneralInitFormValid(testResult);
+              toggleSubmitDisabled(testResult, isNetworkInitFormValid);
+            }
+          }}
+        />
+        <NetworkInitForm
+          ref={networkInitFormRef}
+          toggleSubmitDisabled={(testResult) => {
+            if (testResult !== isNetworkInitFormValid) {
+              setIsNetworkInitFormValid(testResult);
+              toggleSubmitDisabled(isGeneralInitFormValid, testResult);
+            }
+          }}
+        />
         {submitMessage && (
           <MessageBox
             {...submitMessage}