fix: refactor isBlocking to local state

delta10 · Dec 24, 2024 · 176a886 · 176a886
1 parent f275f7f
commit 176a886
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 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,7 +11,12 @@ 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, unregister } = useFormContext()
   const { formState: formStoreState, updateForm } = useFormStore()
@@ -156,10 +161,12 @@ export const RenderSingleField = ({ field }: { field: PublicQuestion }) => {
           field.meta.validators.includes('isBlocking'))
       )
 
-      updateForm({
-        ...formStoreState,
-        isBlocking: shouldRender ? isBlocking : false,
-      })
+      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
@@ -20,13 +20,15 @@ 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()
@@ -59,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>