fix: keep reference of submitting form internally (#1039)

Author: ckbedwell

src/components/CheckForm/CheckForm.tsx

@@ -102,14 +102,15 @@ export const CheckForm = ({ check, disabled }: CheckFormProps) => {
     resolver: zodResolver(schema),
   });
 
-  const { error, handleInvalid, handleValid, testButtonRef, testCheckError, testCheckPending } = useCheckForm({
-    check,
-    checkType,
-    onTestSuccess: (data) => {
-      setAdhocTestData(data);
-      setOpenTestCheckModal(true);
-    },
-  });
+  const { error, handleInvalid, handleValid, submittingToApi, testButtonRef, testCheckError, testCheckPending } =
+    useCheckForm({
+      check,
+      checkType,
+      onTestSuccess: (data) => {
+        setAdhocTestData(data);
+        setOpenTestCheckModal(true);
+      },
+    });
 
   const handleSubmit = (onValid: SubmitHandler<CheckFormValues>, onInvalid: SubmitErrorHandler<CheckFormValues>) =>
     formMethods.handleSubmit(onValid, onInvalid);
@@ -160,9 +161,7 @@ export const CheckForm = ({ check, disabled }: CheckFormProps) => {
     </Stack>
   );
 
-  const hasUnsavedChanges = error
-    ? true
-    : checkHasChanges(defaultValues, formMethods.getValues()) && !formMethods.formState.isSubmitSuccessful;
+  const hasUnsavedChanges = error ? true : checkHasChanges(defaultValues, formMethods.getValues()) && !submittingToApi;
 
   const navModel = useMemo(() => {
     return isExistingCheck

src/components/CheckForm/checkForm.hooks.ts

@@ -1,4 +1,4 @@
-import { BaseSyntheticEvent, useCallback, useRef } from 'react';
+import { BaseSyntheticEvent, useCallback, useRef, useState } from 'react';
 import { FieldErrors } from 'react-hook-form';
 import { BrowserCheckSchema } from 'schemas/forms/BrowserCheckSchema';
 import { DNSCheckSchema } from 'schemas/forms/DNSCheckSchema';
@@ -45,14 +45,19 @@ interface UseCheckFormProps {
 }
 
 export function useCheckForm({ check, checkType, onTestSuccess }: UseCheckFormProps) {
+  const [submittingToApi, setSubmittingToApi] = useState(false);
   const navigate = useNavigation();
   const { updateCheck, createCheck, error } = useCUDChecks({ eventInfo: { checkType } });
   const testButtonRef = useRef<HTMLButtonElement>(null);
   const { mutate: testCheck, isPending, error: testError } = useTestCheck({ eventInfo: { checkType } });
 
   const mutateCheck = useCallback(
     (newCheck: Check) => {
+      setSubmittingToApi(true);
       const onSuccess = (data: Check) => navigate(ROUTES.Checks);
+      const onError = (err: Error) => {
+        setSubmittingToApi(false);
+      };
 
       if (check?.id) {
         return updateCheck(
@@ -61,11 +66,11 @@ export function useCheckForm({ check, checkType, onTestSuccess }: UseCheckFormPr
             tenantId: check.tenantId,
             ...newCheck,
           },
-          { onSuccess }
+          { onSuccess, onError }
         );
       }
 
-      return createCheck(newCheck, { onSuccess });
+      return createCheck(newCheck, { onSuccess, onError });
     },
     [check?.id, check?.tenantId, createCheck, navigate, updateCheck]
   );
@@ -79,7 +84,6 @@ export function useCheckForm({ check, checkType, onTestSuccess }: UseCheckFormPr
       if (submitter === testButtonRef.current) {
         return testCheck(toSubmit, { onSuccess: onTestSuccess });
       }
-
       mutateCheck(toSubmit);
     },
     [mutateCheck, onTestSuccess, testCheck]
@@ -101,5 +105,6 @@ export function useCheckForm({ check, checkType, onTestSuccess }: UseCheckFormPr
     testButtonRef,
     handleValid,
     handleInvalid,
+    submittingToApi,
   };
 }