Fix double onSuccess calls (#196)

* Adds formId to use instead of cacheKey

* Aligns packagelock with node 22.20

* Adds changeset

---------

Co-authored-by: Ruben van Leeuwen <ruben.vanleeuwen@surf.nl>

Author: DutchBen

frontend/.changeset/poor-mugs-rhyme.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Fixes triggering onSuccess twice

frontend/apps/example/src/app/page.tsx

@@ -25,7 +25,6 @@ export default function Home() {
         requestBody,
     }) => {
         const url = 'http://localhost:8000/form';
-
         return fetch(url, {
             method: 'POST',
             body: JSON.stringify(requestBody),
@@ -136,6 +135,7 @@ export default function Home() {
 
             <PydanticForm
                 formKey="theForm"
+                formId="example123"
                 title="Example form"
                 onCancel={() => {
                     alert('Form cancelled');

frontend/package-lock.json

@@ -30,6 +30,7 @@ export const PydanticFormValidationErrorContext =
 export const PydanticForm = ({
     config,
     formKey,
+    formId,
     onCancel,
     onSuccess,
     title,
@@ -59,6 +60,7 @@ export const PydanticForm = ({
                         onSuccess={onSuccess}
                         title={title}
                         formKey={formKey}
+                        formId={formId}
                     />
                 </PydanticFormFieldDataStorageProvider>
             </PydanticFormConfigContext.Provider>

frontend/packages/pydantic-forms/src/PydanticForm.tsx

@@ -1,40 +1,44 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { FieldValues } from 'react-hook-form';
 
-import _ from 'lodash';
-
 import { PydanticFormValidationErrorContext } from '@/PydanticForm';
 import { useGetConfig, usePydanticForm } from '@/core/hooks';
-import { PydanticFormHandlerProps, PydanticFormSuccessResponse } from '@/types';
+import { PydanticFormHandlerProps } from '@/types';
 import { getHashForArray } from '@/utils';
 
 import { ReactHookForm } from './ReactHookForm';
 
 export const PydanticFormHandler = ({
     formKey,
+    formId,
     onCancel,
     onSuccess,
     title,
 }: PydanticFormHandlerProps) => {
     const config = useGetConfig();
+    const getComposedFormKey = useCallback(() => {
+        return `${formKey}${formId}`;
+    }, [formKey, formId]);
+
     const [formStep, setStep] = useState<FieldValues>();
     const formStepsRef = useRef<FieldValues[]>([]);
     const [initialValues, setInitialValues] = useState<FieldValues>();
-    const [currentFormKey, setCurrentFormKey] = useState<string>(formKey);
-    const [cacheKey, setCacheKey] = useState<string>(_.uniqueId(formKey));
+    const [currentFormId, setCurrentFormId] = useState<string>(
+        getComposedFormKey(),
+    );
     const formInputHistoryRef = useRef<Map<string, FieldValues>>(
         new Map<string, object>(),
     );
 
     useEffect(() => {
-        if (formKey && formKey !== currentFormKey) {
+        if (formKey && getComposedFormKey() !== currentFormId) {
             formStepsRef.current = [];
             formInputHistoryRef.current = new Map<string, object>();
-            setCurrentFormKey(formKey);
+            setCurrentFormId(getComposedFormKey);
             setStep(undefined);
             setInitialValues(undefined);
         }
-    }, [formKey, currentFormKey]);
+    }, [formKey, formId, currentFormId, getComposedFormKey]);
 
     const storeHistory = useCallback(async (stepData: FieldValues) => {
         const hashOfSteps = await getHashForArray(formStepsRef.current);
@@ -50,16 +54,6 @@ export const PydanticFormHandler = ({
         }
     }, []);
 
-    const handleSuccess = (
-        fieldValues: FieldValues[],
-        response: PydanticFormSuccessResponse,
-    ) => {
-        if (onSuccess) {
-            onSuccess(fieldValues, response);
-        }
-        setCacheKey(_.uniqueId(currentFormKey));
-    };
-
     const {
         validationErrorsDetails,
         apiError,
@@ -70,10 +64,10 @@ export const PydanticFormHandler = ({
         defaultValues,
     } = usePydanticForm(
         formKey,
+        formId,
         config,
         formStepsRef,
-        cacheKey,
-        handleSuccess,
+        onSuccess,
         formStep,
     );
 
@@ -94,11 +88,10 @@ export const PydanticFormHandler = ({
     }, [restoreHistory]);
 
     const handleCancel = useCallback(() => {
-        setCacheKey(_.uniqueId(currentFormKey));
         if (onCancel) {
             onCancel();
         }
-    }, [currentFormKey, onCancel]);
+    }, [onCancel]);
 
     return (
         <PydanticFormValidationErrorContext.Provider

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

@@ -24,12 +24,12 @@ import {
 
 export function useApiProvider(
     formKey: string,
-    formInputData: FieldValues[], // TODO: This doesn't seem right
+    formId: string,
+    formInputData: FieldValues[],
     apiProvider: PydanticFormApiProvider,
-    cacheKey: string,
 ) {
     return useSWR<PydanticFormApiResponse>(
-        [formKey, formInputData, cacheKey],
+        [formKey, formInputData, formId],
         ([formKey, formInputData]) => {
             const requestBody = formInputData;
 

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

@@ -22,18 +22,18 @@ import {
 export function useLabelProvider(
     labelProvider?: PydanticFormLabelProvider,
     formKey?: string,
-    cacheKey?: string,
+    formId?: string,
 ) {
     return useSWR<PydanticFormLabelProviderResponse | undefined>(
         // cache key
-        [labelProvider, formKey, cacheKey],
+        [labelProvider, formKey, formId],
 
         // return val
         async () => {
             if (labelProvider) {
                 return labelProvider({
                     formKey: formKey || '',
-                    id: cacheKey,
+                    id: formId || '',
                 });
             }
         },