chore: create prop to handle first step redirecting

bcgov · Sep 24, 2024 · f831554 · f831554
1 parent e0e7099
commit f831554
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx b/bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx
@@ -12,6 +12,7 @@ import {
   createUnnestedFormData,
 } from "@bciers/components/form/formDataUtils";
 import { registrationOperationInformationUiSchema } from "@/registration/app/data/jsonSchema/operationInformation/registrationOperationInformation";
+import { useRouter } from "next/navigation";
 
 interface OperationInformationFormProps {
   rawFormData: OperationInformationFormData;
@@ -26,6 +27,7 @@ const OperationInformationForm = ({
   step,
   steps,
 }: OperationInformationFormProps) => {
+  const router = useRouter();
   const [selectedOperation, setSelectedOperation] = useState("");
   const [error, setError] = useState(undefined);
   const nestedFormData = rawFormData
@@ -95,6 +97,13 @@ const OperationInformationForm = ({
       cancelUrl="/"
       formData={formState}
       onSubmit={handleSubmit}
+      firstStepExtraHandling={(response) => {
+        // Since our form's route includes the operation's id, which doesn't exist until after the first step, we need to pass in a custom function that uses the response to generate a redirect url
+        const nextStepUrl = `/register-an-operation/${response.id}/${
+          step + 1
+        }$`;
+        router.push(nextStepUrl);
+      }}
       schema={schema}
       step={step}
       steps={steps}

diff --git a/bciers/libs/components/src/form/MultiStepBase.tsx b/bciers/libs/components/src/form/MultiStepBase.tsx
@@ -30,6 +30,7 @@ interface MultiStepBaseProps {
   submitButtonDisabled?: boolean;
   customValidate?: any;
   successComponent?: React.ReactNode;
+  firstStepExtraHandling?: (response: any) => any;
 }
 
 // Modified MultiStepFormBase meant to facilitate more modularized Multi-step forms
@@ -56,6 +57,7 @@ const MultiStepBase = ({
   submitButtonDisabled,
   customValidate,
   successComponent,
+  firstStepExtraHandling,
 }: MultiStepBaseProps) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSuccessfullySubmitted, setIsSuccessfullySubmitted] = useState(false);
@@ -77,16 +79,11 @@ const MultiStepBase = ({
         setError(response?.error);
         return;
       }
-      // First step
-      if (step === 1) {
-        // The URL below is customized for the registration workflow. It can be generalized later if needed.
-        const nextStepUrl = `/register-an-operation/${response.id}/${step + 1}${
-          baseUrlParams ? `?${baseUrlParams}` : ""
-        }`;
-        router.push(nextStepUrl);
+      // In some cases, for the first step, we need to do something beyond simply redirecting to the baseUrl after successful onSubmit.
+      if (step === 1 && firstStepExtraHandling) {
+        firstStepExtraHandling(response);
         return;
       }
-      // Middle steps
       if (isNotFinalStep && baseUrl) {
         const nextStepUrl = `${baseUrl}/${step + 1}${
           baseUrlParams ? `?${baseUrlParams}` : ""