Final fixes form reset bug

Author: Ruben van Leeuwen

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

@@ -62,8 +62,6 @@ function PydanticFormContextProvider({
         labelProvider,
         customDataProvider,
         customDataProviderCacheKey,
-        formStructureMutator,
-        fieldDetailProvider,
         resetButtonAlternative,
         allowUntouchedSubmit,
         skipSuccessNotice,
@@ -72,27 +70,22 @@ function PydanticFormContextProvider({
         cancelButton,
     } = config;
 
-    const awaitReset = async (payLoad: FieldValues = {}) => {
-        rhf.reset(payLoad);
-        await new Promise((resolve) => setTimeout(resolve, 0)); // wait one tick
-    };
-
     const [formInputHistory, setFormInputHistory] = useState(
         new Map<string, object>(),
     );
     const [formInputData, setFormInputData] = useState<object[]>([]);
 
     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) => {
@@ -122,17 +115,21 @@ function PydanticFormContextProvider({
         error,
     } = useApiProvider(formKey, formInputData, apiProvider, metaData);
 
-    const emptyRawSchema: PydanticFormSchemaRawJson = {
-        type: PydanticFormFieldType.OBJECT,
-        properties: {},
-    };
+    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, formKey, formLabels?.labels);
+        usePydanticFormParser(rawSchema, formLabels?.labels);
 
     // build validation rules based on custom schema
     const zodSchema = useGetZodValidator(
@@ -164,6 +161,14 @@ function PydanticFormContextProvider({
         values: initialData,
     });
 
+    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) => {
@@ -208,7 +213,7 @@ function PydanticFormContextProvider({
             awaitReset();
             rhf.trigger();
         },
-        [rhf],
+        [awaitReset, rhf],
     );
 
     const resetErrorDetails = useCallback(() => {
@@ -226,7 +231,7 @@ function PydanticFormContextProvider({
         setIsFullFilled(false);
         setRawSchema(emptyRawSchema);
         setHasNext(false);
-    }, []);
+    }, [emptyRawSchema]);
 
     const PydanticFormContextState = {
         // to prevent an issue where the sending state hangs
@@ -299,7 +304,6 @@ function PydanticFormContextProvider({
     // When a formKey changes we reset the form input data
     useEffect(() => {
         if (formKey !== formRef.current) {
-            console.log('formchange', formKey, formRef.current);
             // When the formKey changes we need to reset the form input data
             setFormInputData([]);
             setFormInputHistory(new Map<string, object>());
@@ -327,7 +331,45 @@ function PydanticFormContextProvider({
 
         setFormInputHistory(new Map<string, object>());
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [apiResponse, isFullFilled]);
+    }, [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: 'Something unexpected went wrong',
+            source: [],
+            mapped: {},
+        });
+    }, [error]);
+
+    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]);
+
+    useEffect(() => {
+        getHashForArray(formInputData).then((hash) => {
+            const currentStepFromHistory = formInputHistory.get(hash);
+            if (currentStepFromHistory) {
+                awaitReset(currentStepFromHistory);
+            }
+        });
+    }, [awaitReset, formInputData, formInputHistory, rhf]);
 
     return (
         <PydanticFormContext.Provider value={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,

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

@@ -6,40 +6,38 @@
  * In the JSON Schema there are references to other places in the object.
  * After this hook is run with the data those references will be resolved.
  */
-import useSWR, { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
 
 import $RefParser from '@apidevtools/json-schema-ref-parser';
 
 import { PydanticFormSchemaParsed, PydanticFormSchemaRawJson } from '@/types';
 
 export function useRefParser(
     id: string,
-    rawJsonSchema?: PydanticFormSchemaRawJson,
-    swrConfig?: SWRConfiguration,
+    rawJsonSchema: PydanticFormSchemaRawJson,
 ) {
     return useSWR<PydanticFormSchemaParsed | undefined>(
         [id, rawJsonSchema],
-
-        // return val
         async ([, source]) => {
-            try {
-                if (!source) {
-                    return undefined;
-                }
-                const parsedSchema = $RefParser.dereference(source, {
-                    mutateInputSchema: false,
-                }) as unknown as PydanticFormSchemaParsed;
-
-                return parsedSchema;
-            } catch (error) {
-                console.error(error);
-                new Error('Could not parse JSON references');
+            if (!source) {
+                return undefined;
             }
+            const parsedSchema = (await $RefParser.dereference(source, {
+                mutateInputSchema: false,
+            })) as unknown as PydanticFormSchemaParsed;
+            return parsedSchema;
         },
-
-        // swr config
         {
-            ...swrConfig,
+            fallback: {},
+
+            // We revalidate to make sure the form updates when we use it a second time
+            revalidateIfStale: true,
+            revalidateOnReconnect: false,
+            revalidateOnFocus: false,
+            // We want to make sure the correct data is showing so we don't want to prefill with stale data
+            // we dont use the previous data because of that
+            keepPreviousData: false,
+            shouldRetryOnError: false,
         },
     );
 }