2076: Rearrange useEffects. Remove rhf from zodRule definitions

Author: Ruben van Leeuwen

frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx

@@ -14,7 +14,6 @@ import React, {
     useState,
 } from 'react';
 import { FieldValues, useForm } from 'react-hook-form';
-import { Subscription } from 'react-hook-form/dist/utils/createSubject';
 
 import _ from 'lodash';
 import { z } from 'zod/v4';
@@ -54,7 +53,6 @@ function PydanticFormContextProvider({
     successNotice,
     onSuccess,
     onCancel,
-    onChange,
     children,
     config,
 }: PydanticFormInitialContextProps) {
@@ -65,7 +63,6 @@ function PydanticFormContextProvider({
         customDataProviderCacheKey,
         formStructureMutator,
         fieldDetailProvider,
-        onFieldChangeHandler,
         resetButtonAlternative,
         allowUntouchedSubmit,
         skipSuccessNotice,
@@ -81,21 +78,6 @@ function PydanticFormContextProvider({
 
     const formRef = useRef<string>(formKey);
 
-    useEffect(() => {
-        const getLocale = () => {
-            switch (locale) {
-                case Locale.enGB:
-                    return z.locales.en();
-                case Locale.nlNL:
-                    return z.locales.nl();
-                default:
-                    return z.locales.en();
-            }
-        };
-
-        z.config(getLocale());
-    }, [locale]);
-
     const updateHistory = async (
         formInput: object,
         previousSteps: object[],
@@ -131,10 +113,7 @@ function PydanticFormContextProvider({
     const [isFullFilled, setIsFullFilled] = useState(false);
     const [isSending, setIsSending] = useState(false);
 
-    // TODO: Fix leave confirmation functionality
-    const [, setSaveToLeavePageInCurrentState] = useState(false);
-
-    // fetch the labels of the form, but can also include the current form values
+    // fetch the labels of the form, can also contain default values
     const { data: formLabels, isLoading: isLoadingFormLabels } =
         useLabelProvider(labelProvider, formKey, formIdKey);
 
@@ -144,20 +123,16 @@ function PydanticFormContextProvider({
             customDataProvider,
         );
 
-    // fetch the form definition using SWR hook
     const {
         data: apiResponse,
         isLoading: isLoadingSchema,
         error,
     } = useApiProvider(formKey, formInputData, apiProvider, metaData);
 
-    // we cache the form scheme so when there is an error, we still have the form
-    // the form is not in the error response
     const [rawSchema, setRawSchema] = useState<PydanticFormSchemaRawJson>();
     const [hasNext, setHasNext] = useState<boolean>(false);
 
     // extract the JSON schema to a more usable custom schema
-
     const { pydanticFormSchema, isLoading: isParsingSchema } =
         usePydanticFormParser(
             rawSchema,
@@ -166,12 +141,9 @@ function PydanticFormContextProvider({
             formStructureMutator,
         );
 
-    const rhfRef = useRef<ReturnType<typeof useForm>>();
-
     // build validation rules based on custom schema
     const zodSchema = useGetZodValidator(
         pydanticFormSchema,
-        rhfRef.current,
         componentMatcherExtender,
     );
 
@@ -197,42 +169,99 @@ function PydanticFormContextProvider({
         mode: 'all',
         defaultValues: initialData,
         values: initialData,
+        shouldUnregister: true,
     });
 
+    const submitFormFn = useCallback(() => {
+        setIsSending(true);
+        const rhfValues = rhf.getValues();
+        // Note. If we don't use cloneDeep here we are adding a reference to the rhfValues
+        // that changes on every change in the form and triggering effects before we want to.
+        addFormInputData(_.cloneDeep(rhfValues), !!errorDetails);
+        window.scrollTo(0, 0);
+    }, [rhf, errorDetails, addFormInputData]);
+
+    const onClientSideError = useCallback(
+        (data?: FieldValues) => {
+            // TODO implement save with errors toggle
+            if (data) {
+                rhf.clearErrors();
+                submitFormFn();
+            }
+        },
+        [rhf, submitFormFn],
+    );
+
+    const submitForm = rhf.handleSubmit(submitFormFn, onClientSideError);
+
+    const resetForm = useCallback(
+        (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            e.preventDefault();
+            setErrorDetails(undefined);
+            rhf.reset();
+            rhf.trigger();
+        },
+        [rhf],
+    );
+
+    const resetErrorDetails = useCallback(() => {
+        setErrorDetails(undefined);
+    }, []);
+
+    const isLoading =
+        isLoadingFormLabels ||
+        isLoadingSchema ||
+        isParsingSchema ||
+        (customDataProvider ? isLoadingCustomData : false);
+
+    const clearForm = useCallback(() => {
+        setFormInputData([]);
+        setIsFullFilled(false);
+        setRawSchema(undefined);
+        setHasNext(false);
+    }, []);
+
+    const PydanticFormContextState = {
+        // to prevent an issue where the sending state hangs
+        // we check both the SWR hook state as our manual state
+        isSending: isSending && isLoadingSchema,
+        isLoading,
+        rhf,
+        pydanticFormSchema,
+        loadingComponent,
+        onPrevious: () => goToPreviousStep(rhf?.getValues()),
+        onCancel,
+        title,
+        sendLabel,
+        isFullFilled,
+        customDataProvider,
+        errorDetails,
+        resetErrorDetails,
+        successNotice,
+        submitForm,
+        resetForm,
+        cancelButton,
+        skipSuccessNotice,
+        allowUntouchedSubmit,
+        resetButtonAlternative,
+        config,
+        formKey,
+        formIdKey,
+        clearForm,
+        formInputData,
+        hasNext,
+        initialData,
+    };
+
+    /** UseEffects */
     useEffect(() => {
         if (formKey !== formRef.current) {
             // When the formKey changes we need to reset the form input data
             setFormInputData([]);
             setFormInputHistory(new Map<string, object>());
-            rhf?.reset({});
             formRef.current = formKey;
         }
-    }, [formKey, rhf]);
-
-    rhfRef.current = rhf;
-
-    // Adds watch subscripton on form values
-    useEffect(() => {
-        const sub = rhf.watch((values) => {
-            setSaveToLeavePageInCurrentState(false);
-            onChange?.(values);
-        });
-
-        return () => sub.unsubscribe();
-    }, [rhf, onChange]);
-
-    /* TODO: Reimplement
-    // prevent user from navigating away when there are unsaved changes
-    const hasUnsavedData =
-        !saveToLeavePageInCurrentState &&
-        !isFullFilled &&
-        rhf.formState.isDirty;
-
-    useLeavePageConfirm(
-        hasUnsavedData,
-        'Er zijn aanpassingen in het formulier. \nWeet je zeker dat je de pagina wilt verlaten?',
-    );
-    */
+    }, [formKey]);
 
     // handle successfull submits
     useEffect(() => {
@@ -252,7 +281,6 @@ function PydanticFormContextProvider({
         }
 
         setFormInputHistory(new Map<string, object>());
-        rhf.reset({});
     }, [apiResponse, isFullFilled, onSuccess, rhf, skipSuccessNotice]);
 
     // a useeffect for whenever the error response updates
@@ -266,7 +294,6 @@ function PydanticFormContextProvider({
 
         // when we receive a new form from JSON, we fully reset the form
         if (apiResponse?.form && rawSchema !== apiResponse.form) {
-            rhf.reset({});
             setRawSchema(apiResponse.form);
             if (apiResponse.meta) {
                 setHasNext(!!apiResponse.meta.hasNext);
@@ -282,7 +309,6 @@ function PydanticFormContextProvider({
         setIsSending(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiResponse]); // Avoid completing the dependencies array here to avoid unwanted resetFormData calls
-
     // a useeffect for filling data whenever formdefinition or labels update
 
     useEffect(() => {
@@ -309,112 +335,20 @@ function PydanticFormContextProvider({
         });
     }, [error]);
 
-    const submitFormFn = useCallback(() => {
-        setIsSending(true);
-        const rhfValues = rhf.getValues();
-        // Note. If we don't use cloneDeep here we are adding a reference to the rhfValues
-        // that changes on every change in the form and triggering effects before we want to.
-        addFormInputData(_.cloneDeep(rhfValues), !!errorDetails);
-        window.scrollTo(0, 0);
-    }, [rhf, errorDetails, addFormInputData]);
-
-    const onClientSideError = useCallback(
-        (data?: FieldValues) => {
-            // TODO implement save with errors toggle
-            if (data) {
-                rhf.clearErrors();
-                submitFormFn();
-            }
-        },
-        [rhf, submitFormFn],
-    );
-
-    const submitForm = rhf.handleSubmit(submitFormFn, onClientSideError);
-
-    const resetForm = useCallback(
-        (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-            e.preventDefault();
-            setErrorDetails(undefined);
-            rhf.reset();
-            rhf.trigger();
-        },
-        [rhf],
-    );
-
-    const resetErrorDetails = useCallback(() => {
-        setErrorDetails(undefined);
-    }, []);
-
-    // with this we have the possibility to have listeners for specific fields
-    // this could be used to trigger validations of related fields, casting changes to elsewhere, etc.
     useEffect(() => {
-        let sub: Subscription;
-
-        if (onFieldChangeHandler) {
-            sub = rhf.watch((value, { name, type }) => {
-                onFieldChangeHandler(
-                    {
-                        name,
-                        type,
-                        value,
-                    },
-                    rhf,
-                );
-            });
-        }
-
-        return () => {
-            if (sub) {
-                return sub.unsubscribe();
+        const getLocale = () => {
+            switch (locale) {
+                case Locale.enGB:
+                    return z.locales.en();
+                case Locale.nlNL:
+                    return z.locales.nl();
+                default:
+                    return z.locales.en();
             }
         };
-    }, [rhf, onFieldChangeHandler]);
 
-    const isLoading =
-        isLoadingFormLabels ||
-        isLoadingSchema ||
-        isParsingSchema ||
-        (customDataProvider ? isLoadingCustomData : false);
-
-    const clearForm = useCallback(() => {
-        setFormInputData([]);
-        setIsFullFilled(false);
-        setRawSchema(undefined);
-        setHasNext(false);
-    }, []);
-
-    const PydanticFormContextState = {
-        // to prevent an issue where the sending state hangs
-        // we check both the SWR hook state as our manual state
-        isSending: isSending && isLoadingSchema,
-        isLoading,
-        rhf,
-        pydanticFormSchema,
-        loadingComponent,
-        onPrevious: () => goToPreviousStep(rhf?.getValues()),
-        onCancel,
-        title,
-        sendLabel,
-        isFullFilled,
-        customDataProvider,
-        errorDetails,
-        resetErrorDetails,
-        successNotice,
-        submitForm,
-        resetForm,
-        cancelButton,
-        skipSuccessNotice,
-        allowUntouchedSubmit,
-        resetButtonAlternative,
-        config,
-        setSaveToLeavePageInCurrentState,
-        formKey,
-        formIdKey,
-        clearForm,
-        formInputData,
-        hasNext,
-        initialData,
-    };
+        z.config(getLocale());
+    }, [locale]);
 
     return (
         <PydanticFormContext.Provider value={PydanticFormContextState}>

frontend/packages/pydantic-forms/src/core/helper.ts

@@ -477,7 +477,6 @@ export const getMatcher = (
 
 export const getClientSideValidationRule = (
     pydanticFormField: PydanticFormField | undefined,
-    rhf?: ReturnType<typeof useForm>,
     componentMatcherExtender?: PydanticFormsContextConfig['componentMatcherExtender'],
 ): ZodType => {
     if (!pydanticFormField) return z.unknown();
@@ -486,7 +485,7 @@ export const getClientSideValidationRule = (
     const componentMatch = matcher(pydanticFormField);
 
     let validationRule =
-        componentMatch?.validator?.(pydanticFormField, rhf) ?? z.unknown();
+        componentMatch?.validator?.(pydanticFormField) ?? z.unknown();
 
     if (!pydanticFormField.required) {
         validationRule = validationRule.optional();