2134: Reintroduce restoringHistory. Rearrange awaitReset

Author: Ruben van Leeuwen

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

@@ -77,22 +77,17 @@ function PydanticFormContextProvider({
     const formRef = useRef<string>(formKey);
 
     const updateHistory = useCallback(
-        async (formInput: object, previousSteps: object[]) => {
-            const hashOfPreviousSteps = await getHashForArray(previousSteps);
-            setFormInputHistory((prevState) =>
-                prevState.set(hashOfPreviousSteps, formInput),
+        async (previousStepsData: object[], formInputData: object) => {
+            const hashOfPreviousSteps = await getHashForArray(
+                previousStepsData,
+            );
+            setFormInputHistory((currentState) =>
+                currentState.set(hashOfPreviousSteps, formInputData),
             );
         },
         [],
     );
 
-    const goToPreviousStep = (formInput: object) => {
-        setFormInputData((prevState) => {
-            updateHistory(formInput, prevState);
-            return prevState.slice(0, -1);
-        });
-    };
-
     const [errorDetails, setErrorDetails] =
         useState<PydanticFormValidationErrorDetails>();
 
@@ -168,36 +163,38 @@ function PydanticFormContextProvider({
         before proceeding. If it finds data in formHistory based on the hash of the previo
         us steps, it uses that data to prefill the form.
     */
-    const awaitReset = useCallback(async (payLoad?: FieldValues) => {
-        await getHashForArray(formInputData)
-            .then((hash) => {
-                let resetPayload = {};
-
-                if (payLoad) {
-                    resetPayload = { ...payLoad };
-                }
-
-                reactHookForm.reset(resetPayload);
-            })
-            .catch(() => {
-                console.error('Failed to hash form input data');
-            });
-    }, []);
+    const awaitReset = useCallback(
+        async (payLoad: FieldValues = {}) => {
+            try {
+                reactHookForm.reset(payLoad);
+
+                // This is a workaround to we wait for the reset to complete
+                // https://gemini.google.com/app/26d8662d603d6322?hl=nl
+                return new Promise<void>((resolve) => {
+                    setTimeout(() => {
+                        resolve();
+                    }, 0);
+                });
+            } catch (error) {
+                console.error('Failed to reactHookFOrm', error);
+            }
+        },
+        [reactHookForm],
+    );
 
     const addFormInputData = useCallback(() => {
-        setFormInputData((currentInputs) => {
+        setFormInputData((currentFormInputData) => {
             // Note. If we don't use cloneDeep here we are adding a reference to the reactHookFormValues
             // that changes on every change in the form and triggering effects before we want to.
             const reactHookFormValues = _.cloneDeep(reactHookForm.getValues());
-            updateHistory(reactHookFormValues, currentInputs);
-            return [...currentInputs, { ...reactHookFormValues }];
+            updateHistory(currentFormInputData, reactHookFormValues);
+            // We call reset right after using the values to make sure
+            // values in reactHookForm are cleared. This avoids some
+            // race condition errors where reactHookForm data was still set where
+            // we did not expect it to be.
+            awaitReset();
+            return [...currentFormInputData, { ...reactHookFormValues }];
         });
-        // setInErrorState(false);
-        // We call reset right after using the values to make sure
-        // values in reactHookForm are cleared. This avoids some
-        // race condition errors where reacfHookForm data was still set where we did not
-        /// expect it to be.
-        awaitReset();
     }, []);
 
     const submitFormFn = useCallback(() => {
@@ -217,6 +214,16 @@ function PydanticFormContextProvider({
         [reactHookForm, submitFormFn],
     );
 
+    const goToPreviousStep = () => {
+        setFormInputData((currentFormInputData) => {
+            // Stores any data that is entered but not submitted yet to be
+            // able to restore later
+            const reactHookFormValues = _.cloneDeep(reactHookForm.getValues());
+            updateHistory(currentFormInputData, reactHookFormValues);
+            return currentFormInputData.slice(0, -1);
+        });
+    };
+
     const submitForm = reactHookForm.handleSubmit(
         submitFormFn,
         onClientSideError,
@@ -287,7 +294,7 @@ function PydanticFormContextProvider({
         isLoading,
         isSending: isSending && isLoadingSchema,
         onCancel,
-        onPrevious: () => goToPreviousStep(reactHookForm?.getValues()),
+        onPrevious: () => goToPreviousStep(),
         pydanticFormSchema,
         reactHookForm,
         resetForm,
@@ -297,19 +304,34 @@ function PydanticFormContextProvider({
 
     // useEffect to handle API responses
     useEffect(() => {
+        const restoreHistory = async () => {
+            await getHashForArray(formInputData)
+                .then((hash) => {
+                    if (formInputHistory.has(hash)) {
+                        awaitReset(formInputHistory.get(hash) as FieldValues);
+                    } else {
+                        awaitReset();
+                    }
+                })
+                .catch(() => {
+                    console.error('Failed to hash form input data');
+                });
+        };
+
         if (!apiResponse) {
             return;
         }
-        // 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();
+            // Restore the data we got the error with and remove it from
+            // formInputData so we can add it again
             setFormInputData((currentData) => {
-                const newData = [...currentData];
-                newData.pop();
-                return newData;
+                const nextData = [...currentData];
+                const errorPayload = nextData.pop();
+                awaitReset(errorPayload);
+                return nextData;
             });
-            awaitReset(errorPayload);
+
             setErrorDetails(getErrorDetailsFromResponse(apiResponse));
             return;
         }
@@ -319,22 +341,20 @@ function PydanticFormContextProvider({
             return;
         }
 
-        // when we receive a new form from JSON, we fully reset the form
         if (apiResponse?.form && rawSchema !== apiResponse.form) {
-            awaitReset();
             setRawSchema(apiResponse.form);
+            setErrorDetails(undefined);
             if (apiResponse.meta) {
                 setHasNext(!!apiResponse.meta.hasNext);
             }
-
-            setErrorDetails(undefined);
+            restoreHistory();
         }
 
         setIsSending(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiResponse]); // Avoid completing the dependencies array here to avoid unwanted resetFormData calls
 
-    // Useeffect to the form input data if the formKey changes
+    // useEffect to the form input data if the formKey changes
     useEffect(() => {
         if (formKey !== formRef.current) {
             setFormInputData([]);
@@ -343,22 +363,22 @@ function PydanticFormContextProvider({
         }
     }, [formKey]);
 
-    // UseEffect to handle successfull submits
+    // useEffect to handle successfull submits
     useEffect(() => {
         if (!isFullFilled) {
             return;
         }
 
         if (onSuccess) {
-            const values = reactHookForm.getValues();
-            onSuccess(values, apiResponse || {});
+            const reactHookFormValues = _.cloneDeep(reactHookForm.getValues());
+            onSuccess(reactHookFormValues, apiResponse || {});
         }
 
         setFormInputHistory(new Map<string, object>());
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isFullFilled]); // Avoid completing the dependencies array here to avoid unwanted resetFormData calls
 
-    // UseEffect to handles errors throws by the useApiProvider call
+    // useEffect to handles errors throws by the useApiProvider call
     // for instance unexpected 500 errors
     useEffect(() => {
         if (!error) {
@@ -372,7 +392,7 @@ function PydanticFormContextProvider({
         });
     }, [error]);
 
-    // UseEffect to handle locale change
+    // useEffect to handle locale change
     useEffect(() => {
         const getLocale = () => {
             switch (locale) {