fix: dynamic form hard stop (#320)

* fix: dynamic form hard stop * fix: remove redundant check * fix: refactor isBlocking to local state --------- Co-authored-by: Yuri <yuri@delta10.nl>
delta10 · Dec 24, 2024 · df47b07 · df47b07
1 parent 1051631
commit df47b07
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx b/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx
@@ -15,6 +15,7 @@ import { getCurrentStep, getNextStepPath } from '@/lib/utils/stepper'
 
 export const IncidentQuestionsLocationForm = () => {
   const { formState: formStoreState, updateForm } = useFormStore()
+  const [isBlocking, setIsBlocking] = useState(false)
   const [additionalQuestions, setAdditionalQuestions] = useState<
     PublicQuestion[]
   >([])
@@ -156,12 +157,21 @@ export const IncidentQuestionsLocationForm = () => {
             const question = additionalQuestions[index]
             const fieldName = question.key
 
-            return <RenderSingleField key={fieldName} field={question} />
+            return (
+              <RenderSingleField
+                key={fieldName}
+                field={question}
+                setIsBlocking={setIsBlocking}
+              />
+            )
           })
         ) : (
           <LocationSelect />
         )}
-        <IncidentFormFooter errors={methods.formState.errors} />
+        <IncidentFormFooter
+          errors={methods.formState.errors}
+          blockNext={isBlocking}
+        />
       </form>
     </FormProvider>
   )

diff --git a/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx b/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx
@@ -11,9 +11,14 @@ import { LocationSelect } from '@/app/[locale]/incident/add/components/questions
 import { evaluateConditions } from '@/lib/utils/check-visibility'
 import { AssetSelect } from '@/app/[locale]/incident/add/components/questions/AssetSelect'
 
-export const RenderSingleField = ({ field }: { field: PublicQuestion }) => {
+type props = {
+  field: PublicQuestion
+  setIsBlocking: any
+}
+
+export const RenderSingleField = ({ field, setIsBlocking }: props) => {
   const [shouldRender, setShouldRender] = useState<boolean>(false)
-  const { watch, setValue } = useFormContext()
+  const { watch, setValue, unregister } = useFormContext()
   const { formState: formStoreState, updateForm } = useFormStore()
 
   const watchValues = watch()
@@ -131,6 +136,11 @@ export const RenderSingleField = ({ field }: { field: PublicQuestion }) => {
 
   // Register the field immediately with initial value
   useEffect(() => {
+    // unregisters field if it should not render
+    if (!shouldRender) {
+      unregister(field.key)
+    }
+
     const defaultValue =
       field.field_type === FieldTypes.CHECKBOX_INPUT
         ? getDefaultValueCheckboxInput(field.key)
@@ -145,15 +155,18 @@ export const RenderSingleField = ({ field }: { field: PublicQuestion }) => {
   // control hard stop
   useEffect(() => {
     if (field.meta.validators) {
-      const isBlocking =
-        field.meta.validators === 'isBlocking'
-          ? true
-          : !!field.meta.validators.includes('isBlocking')
-
-      updateForm({
-        ...formStoreState,
-        isBlocking: shouldRender ? isBlocking : false,
-      })
+      const isBlocking = !!(
+        field.meta.validators === 'isBlocking' ||
+        (typeof field.meta.validators === 'object' &&
+          field.meta.validators.includes('isBlocking'))
+      )
+
+      setIsBlocking(shouldRender ? isBlocking : false)
+      // refactor uit de state
+      // updateForm({
+      //   ...formStoreState,
+      //   isBlocking: shouldRender ? isBlocking : false,
+      // })
     }
   }, [field, shouldRender])
 

diff --git a/src/app/[locale]/incident/components/IncidentFormFooter.tsx b/src/app/[locale]/incident/components/IncidentFormFooter.tsx
@@ -10,7 +10,7 @@ import {
   IconLoader2,
   IconSend,
 } from '@tabler/icons-react'
-import { FieldErrors } from 'react-hook-form'
+import { FieldErrors, useFormContext } from 'react-hook-form'
 import { getCurrentStep, getPreviousStepPath } from '@/lib/utils/stepper'
 import { FormStep } from '@/types/form'
 import { useFormStore } from '@/store/form_store'
@@ -20,19 +20,22 @@ type IncidentFormFooterProps = {
   loading?: boolean
   ariaDescribedById?: string
   errors?: FieldErrors
+  blockNext?: boolean
 } & React.HTMLAttributes<HTMLDivElement>
 
 const IncidentFormFooter = ({
   handleSignalSubmit,
   loading,
   ariaDescribedById,
   errors,
+  blockNext,
 }: IncidentFormFooterProps) => {
   const t = useTranslations('general.form')
   const pathname = usePathname()
   const router = useRouter()
   const step = getCurrentStep(pathname)
   const { formState } = useFormStore()
+  const form = useFormContext()
 
   const goBack = () => {
     const previousStep = getPreviousStepPath(step)
@@ -58,7 +61,7 @@ const IncidentFormFooter = ({
             appearance="primary-action-button"
             type="submit"
             className="!flex !flex-row !items-center"
-            disabled={formState.isBlocking}
+            disabled={blockNext}
           >
             {t('next_button')}
             <Icon>