Merge pull request #164 from workfloworchestrator/fix-form-reset

Fix form reset

Author: DutchBen

frontend/.changeset/itchy-rice-sit.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Fixes restoring and submitting forms

frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx

@@ -5,7 +5,7 @@
  *
  * Here we define the outline of the form
  */
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
@@ -26,23 +26,10 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         isSending,
         skipSuccessNotice,
         loadingComponent,
-        rhf,
-        errorDetails,
-        formInputData,
     } = contextProps;
 
     const { formRenderer, footerRenderer, headerRenderer } = config || {};
 
-    useEffect(() => {
-        if (errorDetails) {
-            // If we have an array restore the values
-            const lastValues = [...formInputData].pop();
-            rhf.reset({
-                ...lastValues,
-            });
-        }
-    }, [errorDetails, formInputData]);
-
     const pydanticFormComponents: PydanticFormComponents =
         getPydanticFormComponents(
             pydanticFormSchema?.properties || {},

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

@@ -34,6 +34,7 @@ import {
 import {
     Locale,
     PydanticFormContextProps,
+    PydanticFormFieldType,
     PydanticFormInitialContextProps,
     PydanticFormSchemaRawJson,
     PydanticFormValidationErrorDetails,
@@ -61,8 +62,6 @@ function PydanticFormContextProvider({
         labelProvider,
         customDataProvider,
         customDataProviderCacheKey,
-        formStructureMutator,
-        fieldDetailProvider,
         resetButtonAlternative,
         allowUntouchedSubmit,
         skipSuccessNotice,
@@ -78,15 +77,15 @@ function PydanticFormContextProvider({
 
     const formRef = useRef<string>(formKey);
 
-    const updateHistory = async (
-        formInput: object,
-        previousSteps: object[],
-    ) => {
-        const hashOfPreviousSteps = await getHashForArray(previousSteps);
-        setFormInputHistory((prevState) =>
-            prevState.set(hashOfPreviousSteps, formInput),
-        );
-    };
+    const updateHistory = useCallback(
+        async (formInput: object, previousSteps: object[]) => {
+            const hashOfPreviousSteps = await getHashForArray(previousSteps);
+            setFormInputHistory((prevState) =>
+                prevState.set(hashOfPreviousSteps, formInput),
+            );
+        },
+        [],
+    );
 
     const goToPreviousStep = (formInput: object) => {
         setFormInputData((prevState) => {
@@ -95,19 +94,6 @@ function PydanticFormContextProvider({
         });
     };
 
-    const addFormInputData = useCallback(
-        (formInput: object, replaceInsteadOfAdd = false) => {
-            setFormInputData((currentInputs) => {
-                const data = replaceInsteadOfAdd
-                    ? currentInputs.slice(0, -1)
-                    : currentInputs;
-                updateHistory(formInput, data);
-                return [...data, formInput];
-            });
-        },
-        [],
-    );
-
     const [errorDetails, setErrorDetails] =
         useState<PydanticFormValidationErrorDetails>();
     const [isFullFilled, setIsFullFilled] = useState(false);
@@ -129,17 +115,21 @@ function PydanticFormContextProvider({
         error,
     } = useApiProvider(formKey, formInputData, apiProvider, metaData);
 
-    const [rawSchema, setRawSchema] = useState<PydanticFormSchemaRawJson>();
+    const emptyRawSchema: PydanticFormSchemaRawJson = useMemo(
+        () => ({
+            type: PydanticFormFieldType.OBJECT,
+            properties: {},
+        }),
+        [],
+    );
+
+    const [rawSchema, setRawSchema] =
+        useState<PydanticFormSchemaRawJson>(emptyRawSchema);
     const [hasNext, setHasNext] = useState<boolean>(false);
 
     // extract the JSON schema to a more usable custom schema
     const { pydanticFormSchema, isLoading: isParsingSchema } =
-        usePydanticFormParser(
-            rawSchema,
-            formLabels?.labels,
-            fieldDetailProvider,
-            formStructureMutator,
-        );
+        usePydanticFormParser(rawSchema, formLabels?.labels);
 
     // build validation rules based on custom schema
     const zodSchema = useGetZodValidator(
@@ -169,17 +159,39 @@ function PydanticFormContextProvider({
         mode: 'all',
         defaultValues: initialData,
         values: initialData,
-        shouldUnregister: true,
     });
 
+    const awaitReset = useCallback(
+        async (payLoad: FieldValues = {}) => {
+            rhf.reset(payLoad);
+            await new Promise((resolve) => setTimeout(resolve, 0)); // wait one tick
+        },
+        [rhf],
+    );
+
+    const addFormInputData = useCallback(
+        (formInput: object, replaceInsteadOfAdd = false) => {
+            setFormInputData((currentInputs) => {
+                const data = replaceInsteadOfAdd
+                    ? currentInputs.slice(0, -1)
+                    : currentInputs;
+                updateHistory(formInput, data);
+                return [...data, { ...formInput }];
+            });
+            awaitReset();
+        },
+        [awaitReset, setFormInputData, updateHistory],
+    );
+
     const submitFormFn = useCallback(() => {
         setIsSending(true);
-        const rhfValues = rhf.getValues();
+        const rhfValues = _.cloneDeep(rhf.getValues());
+        awaitReset();
         // 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);
+        addFormInputData(rhfValues, !!errorDetails);
         window.scrollTo(0, 0);
-    }, [rhf, errorDetails, addFormInputData]);
+    }, [rhf, errorDetails, addFormInputData, awaitReset, setIsSending]);
 
     const onClientSideError = useCallback(
         (data?: FieldValues) => {
@@ -198,10 +210,10 @@ function PydanticFormContextProvider({
         (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
             e.preventDefault();
             setErrorDetails(undefined);
-            rhf.reset();
+            awaitReset();
             rhf.trigger();
         },
-        [rhf],
+        [awaitReset, rhf],
     );
 
     const resetErrorDetails = useCallback(() => {
@@ -217,9 +229,9 @@ function PydanticFormContextProvider({
     const clearForm = useCallback(() => {
         setFormInputData([]);
         setIsFullFilled(false);
-        setRawSchema(undefined);
+        setRawSchema(emptyRawSchema);
         setHasNext(false);
-    }, []);
+    }, [emptyRawSchema]);
 
     const PydanticFormContextState = {
         // to prevent an issue where the sending state hangs
@@ -253,40 +265,23 @@ function PydanticFormContextProvider({
         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>());
-            formRef.current = formKey;
-        }
-    }, [formKey]);
-
-    // handle successfull submits
+    // a useeffect for whenever the error response updates
+    // sometimes we need to update the form,
+    // some we need to update the errors
     useEffect(() => {
-        if (!isFullFilled) {
+        if (!apiResponse) {
             return;
         }
-
-        if (onSuccess) {
-            const values = rhf.getValues();
-            if (skipSuccessNotice) {
-                onSuccess(values, apiResponse || {});
-            } else {
-                setTimeout(() => {
-                    onSuccess?.(values, apiResponse || {});
-                }, 1500); // Delay to allow notice to show first
-            }
+        // when we receive errors, we append to the scheme
+        if (apiResponse?.validation_errors) {
+            // Restore the data we got the error with
+            const errorPayload = [...formInputData].pop();
+            awaitReset(errorPayload);
+            setErrorDetails(getErrorDetailsFromResponse(apiResponse));
+            return;
         }
 
-        setFormInputHistory(new Map<string, object>());
-    }, [apiResponse, isFullFilled, onSuccess, rhf, skipSuccessNotice]);
-
-    // a useeffect for whenever the error response updates
-    // sometimes we need to update the form,
-    // some we need to update the errors
-    useEffect(() => {
+        awaitReset();
         if (apiResponse?.success) {
             setIsFullFilled(true);
             return;
@@ -301,35 +296,52 @@ function PydanticFormContextProvider({
             setErrorDetails(undefined);
         }
 
-        // when we receive errors, we append to the scheme
-        if (apiResponse?.validation_errors) {
-            setErrorDetails(getErrorDetailsFromResponse(apiResponse));
-        }
-
         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
 
+    // When a formKey changes we reset the form input data
     useEffect(() => {
-        getHashForArray(formInputData).then((hash) => {
-            const currentStepFromHistory = formInputHistory.get(hash);
+        if (formKey !== formRef.current) {
+            // When the formKey changes we need to reset the form input data
+            setFormInputData([]);
+            setFormInputHistory(new Map<string, object>());
+            awaitReset();
+            formRef.current = formKey;
+        }
+    }, [awaitReset, formKey]);
 
-            if (currentStepFromHistory) {
-                rhf.reset(currentStepFromHistory);
+    // handle successfull submits
+    useEffect(() => {
+        if (!isFullFilled) {
+            return;
+        }
+
+        if (onSuccess) {
+            const values = rhf.getValues();
+            if (skipSuccessNotice) {
+                onSuccess(values, apiResponse || {});
+            } else {
+                setTimeout(() => {
+                    onSuccess?.(values, apiResponse || {});
+                }, 1500); // Delay to allow notice to show first
             }
-        });
-    }, [formInputData, formInputHistory, rhf]);
+        }
 
-    // this is to show an error whenever there is an unexpected error from the backend
-    // for instance a 500
+        setFormInputHistory(new Map<string, object>());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [apiResponse, isFullFilled]); // Avoid completing the dependencies array here to avoid unwanted resetFormData calls
+
+    // this handles errors throws by the useApiProvider call
+    // for instance unexpected 500 errors
     useEffect(() => {
         if (!error) {
             return;
         }
 
         setErrorDetails({
-            detail: 'Er is iets misgegaan bij het verzenden.',
+            detail: 'Something unexpected went wrong',
             source: [],
             mapped: {},
         });
@@ -350,6 +362,15 @@ function PydanticFormContextProvider({
         z.config(getLocale());
     }, [locale]);
 
+    useEffect(() => {
+        getHashForArray(formInputData).then((hash) => {
+            const currentStepFromHistory = formInputHistory.get(hash);
+            if (currentStepFromHistory) {
+                awaitReset(currentStepFromHistory);
+            }
+        });
+    }, [awaitReset, formInputData, formInputHistory, rhf]);
+
     return (
         <PydanticFormContext.Provider value={PydanticFormContextState}>
             {children(PydanticFormContextState)}

frontend/packages/pydantic-forms/src/core/hooks/useGetZodValidator.tsx

@@ -104,7 +104,7 @@ export const getZodValidationObject = (
 
         validationObject[id] = zodRule ?? z.any();
     });
-    return z.object(validationObject);
+    return validationObject ? z.object(validationObject) : z.any();
 };
 
 export const useGetZodValidator = (

frontend/packages/pydantic-forms/src/core/hooks/usePydanticFormParser.tsx

@@ -147,10 +147,8 @@ export const parseProperties = (
 };
 
 export const usePydanticFormParser = (
-    rawJsonSchema: PydanticFormSchemaRawJson | undefined,
+    rawJsonSchema: PydanticFormSchemaRawJson,
     formLabels?: Record<string, string>,
-    fieldDetailProvider?: PydanticFormsContextConfig['fieldDetailProvider'],
-    formStructureMutator?: PydanticFormsContextConfig['formStructureMutator'],
 ): {
     pydanticFormSchema: PydanticFormSchema | undefined;
     isLoading: boolean;
@@ -175,14 +173,11 @@ export const usePydanticFormParser = (
                 parsedSchema.properties || {},
                 parsedSchema.required || [],
                 formLabels,
-                fieldDetailProvider,
             ),
         };
 
-        return formStructureMutator
-            ? formStructureMutator(pydanticFormSchema)
-            : pydanticFormSchema;
-    }, [formStructureMutator, parsedSchema, formLabels, fieldDetailProvider]);
+        return pydanticFormSchema;
+    }, [parsedSchema, formLabels]);
 
     return {
         pydanticFormSchema,