2143: Re-implement back fucntionality

Author: Ruben van Leeuwen

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

@@ -2,10 +2,11 @@ import React, { useCallback, useRef, useState } from 'react';
 import type { FieldValues } from 'react-hook-form';
 
 import { PydanticFormValidationErrorContext } from '@/PydanticForm';
+import { useGetConfig, usePydanticForm } from '@/core/hooks';
 import { PydanticFormSuccessResponse } from '@/types';
+import { getHashForArray } from '@/utils';
 
 import { ReactHookForm } from './ReactHookForm';
-import { useGetConfig, usePydanticForm } from './hooks';
 
 export interface PydanticFormHandlerProps {
     formKey: string;
@@ -26,18 +27,44 @@ export const PydanticFormHandler = ({
     const config = useGetConfig();
     const [formStep, setStep] = useState<FieldValues>();
     const formStepsRef = useRef<FieldValues[]>([]);
+    const [initialValues, setInitialValues] = useState<FieldValues>();
+    const formInputHistoryRef = useRef<Map<string, FieldValues>>(
+        new Map<string, object>(),
+    );
+
+    const storeHistory = useCallback(async (stepData: FieldValues) => {
+        const hashOfPreviousSteps = await getHashForArray(formStepsRef.current);
+        formInputHistoryRef.current.set(hashOfPreviousSteps, stepData);
+    }, []);
+
     const {
         validationErrorsDetails,
         apiError,
         hasNext,
         isFullFilled,
         isLoading,
         pydanticFormSchema,
-        initialValues,
+        defaultValues,
     } = usePydanticForm(formKey, config, formStepsRef, onSuccess, formStep);
 
-    const handleStepSubmit = useCallback((fieldValues: FieldValues) => {
-        setStep(fieldValues);
+    const handleStepSubmit = useCallback(
+        async (fieldValues: FieldValues) => {
+            await storeHistory(fieldValues);
+            setStep(fieldValues);
+        },
+        [storeHistory],
+    );
+
+    const onPrevious = useCallback(async () => {
+        const previousSteps = formStepsRef.current.slice(0, -1);
+        const hashOfPreviousSteps = await getHashForArray(previousSteps);
+        if (formInputHistoryRef.current.has(hashOfPreviousSteps)) {
+            setInitialValues(
+                formInputHistoryRef.current.get(hashOfPreviousSteps) || {},
+            );
+        }
+        formStepsRef.current = previousSteps;
+        setStep(undefined);
     }, []);
 
     const handleCancel = useCallback(() => {
@@ -50,16 +77,17 @@ export const PydanticFormHandler = ({
             value={validationErrorsDetails}
         >
             <ReactHookForm
-                pydanticFormSchema={pydanticFormSchema}
-                isLoading={isLoading}
-                isFullFilled={isFullFilled}
-                isSending={false}
-                hasNext={hasNext}
                 apiError={apiError}
-                initialValues={initialValues}
-                handleSubmit={handleStepSubmit}
-                hasPrevious={false}
+                defaultValues={defaultValues}
                 handleCancel={handleCancel}
+                handleSubmit={handleStepSubmit}
+                hasNext={hasNext}
+                hasPrevious={formStepsRef.current.length > 0}
+                initialValues={initialValues}
+                isFullFilled={isFullFilled}
+                isLoading={isLoading}
+                onPrevious={onPrevious}
+                pydanticFormSchema={pydanticFormSchema}
                 title={title}
             />
         </PydanticFormValidationErrorContext.Provider>

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

@@ -24,28 +24,30 @@ import { useGetZodSchema } from './hooks';
 
 export interface ReactHookFormProps {
     apiError?: string;
+    defaultValues: FieldValues;
     handleCancel: () => void;
     handleSubmit: (fieldValues: FieldValues) => void;
     hasNext: boolean;
     hasPrevious: boolean;
-    initialValues: FieldValues;
+    initialValues?: FieldValues;
     isFullFilled: boolean;
     isLoading: boolean;
-    isSending: boolean;
+    onPrevious: () => void;
     pydanticFormSchema?: PydanticFormSchema;
     title?: string;
 }
 
 export const ReactHookForm = ({
     apiError,
+    defaultValues,
     handleCancel,
     handleSubmit,
     hasNext,
     hasPrevious,
     initialValues,
     isFullFilled,
     isLoading,
-    isSending,
+    onPrevious,
     pydanticFormSchema,
     title,
 }: ReactHookFormProps) => {
@@ -66,19 +68,16 @@ export const ReactHookForm = ({
     const reactHookForm = useForm({
         resolver: zodResolver(zodSchema),
         mode: 'all',
-        values: initialValues,
+        defaultValues,
+        values: initialValues || defaultValues,
     });
 
     if (apiError) {
         console.error('API Error:', apiError);
         return ErrorComponent;
     }
 
-    if (isLoading && !isSending) {
-        return LoadingComponent;
-    }
-
-    if (!pydanticFormSchema || isSending) {
+    if (isLoading || !pydanticFormSchema) {
         return LoadingComponent;
     }
 
@@ -113,6 +112,7 @@ export const ReactHookForm = ({
                     onCancel={handleCancel}
                     hasNext={hasNext}
                     hasPrevious={hasPrevious}
+                    onPrevious={onPrevious}
                 />
             </form>
         </FormProvider>

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

@@ -24,7 +24,7 @@ export interface UsePydanticFormReturn {
     isLoading: boolean;
     isSending: boolean;
     pydanticFormSchema?: PydanticFormSchema;
-    initialValues: FieldValues;
+    defaultValues: FieldValues;
 }
 
 export function usePydanticForm(
@@ -75,7 +75,7 @@ export function usePydanticForm(
     const { pydanticFormSchema, isLoading: isParsingSchema } =
         usePydanticFormParser(rawSchema, formLabels?.labels);
 
-    const initialValues = useMemo(() => {
+    const defaultValues = useMemo(() => {
         return getFormValuesFromFieldOrLabels(
             pydanticFormSchema?.properties,
             {
@@ -139,7 +139,7 @@ export function usePydanticForm(
         isFullFilled,
         isLoading,
         pydanticFormSchema,
-        initialValues,
+        defaultValues,
         isSending,
     };
 }