1891: Refactor. Remove some unused code

Author: Ruben van Leeuwen

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

@@ -10,31 +10,26 @@ import React from 'react';
 
 import RenderForm from '@/components/render/RenderForm';
 import PydanticFormContextProvider from '@/core/PydanticFormContextProvider';
+import type { PydanticFormContextProviderProps } from '@/core/PydanticFormContextProvider';
 import { TranslationsProvider } from '@/messages/translationsProvider';
-import type {
-    PydanticFormInitialContextProps,
-    PydanticFormMetaData,
-} from '@/types';
-
-export interface PydanticFormProps
-    extends Omit<PydanticFormInitialContextProps, 'formKey' | 'children'> {
-    id: string;
-    metaData?: PydanticFormMetaData;
-}
 
 export const PydanticForm = ({
-    id,
-    metaData,
-    ...contextProps
-}: PydanticFormProps) => (
+    config,
+    formKey,
+    onCancel,
+    onSuccess,
+    title,
+}: Omit<PydanticFormContextProviderProps, 'children'>) => (
     <TranslationsProvider
-        customTranslations={contextProps.config.customTranslations}
-        locale={contextProps.config.locale}
+        customTranslations={config.customTranslations}
+        locale={config.locale}
     >
         <PydanticFormContextProvider
-            {...contextProps}
-            formKey={id}
-            metaData={metaData}
+            config={config}
+            onCancel={onCancel}
+            onSuccess={onSuccess}
+            title={title}
+            formKey={formKey}
         >
             {RenderForm}
         </PydanticFormContextProvider>

frontend/packages/pydantic-forms/src/components/form/Footer.tsx

@@ -10,21 +10,11 @@ import { useTranslations } from 'next-intl';
 import { usePydanticFormContext } from '@/core';
 
 const Footer = () => {
-    const {
-        resetForm,
-        reactHookForm,
-        onCancel,
-        onPrevious,
-        cancelButton,
-        resetButtonAlternative,
-        sendLabel,
-        allowUntouchedSubmit,
-        hasNext,
-        formInputData,
-    } = usePydanticFormContext();
+    const { resetForm, onCancel, onPrevious, hasNext, formInputData } =
+        usePydanticFormContext();
 
     const t = useTranslations('footer');
-    const submitButtonLabel = sendLabel ?? hasNext ? t('send') : t('submit');
+    const submitButtonLabel = hasNext ? t('send') : t('submit');
     const PreviousButton = () => (
         <button
             type="button"
@@ -37,31 +27,27 @@ const Footer = () => {
 
     const ResetButton = () => {
         return (
-            resetButtonAlternative ?? (
-                <button
-                    type="button"
-                    onClick={(e) => {
-                        resetForm(e);
-                    }}
-                    style={{ padding: '12px' }}
-                >
-                    {t('reset')}
-                </button>
-            )
+            <button
+                type="button"
+                onClick={(e) => {
+                    resetForm(e);
+                }}
+                style={{ padding: '12px' }}
+            >
+                {t('reset')}
+            </button>
         );
     };
 
     const CancelButton = () => {
         return (
-            cancelButton ?? (
-                <button
-                    type="button"
-                    onClick={onCancel}
-                    style={{ padding: '12px' }}
-                >
-                    {t('cancel')}
-                </button>
-            )
+            <button
+                type="button"
+                onClick={onCancel}
+                style={{ padding: '12px' }}
+            >
+                {t('cancel')}
+            </button>
         );
     };
 
@@ -74,11 +60,6 @@ const Footer = () => {
     return (
         <div style={{ height: '200px', marginTop: '24px' }}>
             <div style={{ display: 'flex', gap: '16px' }}>
-                {reactHookForm.formState.isValid &&
-                    !allowUntouchedSubmit &&
-                    !reactHookForm.formState.isDirty && (
-                        <div>Het formulier is nog niet aangepast</div>
-                    )}
                 {formInputData && formInputData.length > 0 && (
                     <PreviousButton />
                 )}
@@ -89,19 +70,6 @@ const Footer = () => {
 
                 <SubmitButton />
             </div>
-            <div
-                style={{
-                    margin: '8px 0',
-                    color: 'red',
-                    fontWeight: '600',
-                    fontSize: '24px',
-                }}
-            >
-                {!reactHookForm.formState.isValid &&
-                    reactHookForm.formState.isDirty && (
-                        <div>{t('notFilledYet')}</div>
-                    )}
-            </div>
         </div>
     );
 };

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

@@ -22,10 +22,7 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         config,
         isLoading,
         isFullFilled,
-        successNotice,
         isSending,
-        skipSuccessNotice,
-        loadingComponent,
     } = contextProps;
 
     const { formRenderer, footerRenderer, headerRenderer } = config || {};
@@ -38,7 +35,7 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
 
     const t = useTranslations('renderForm');
 
-    const LoadingComponent = loadingComponent ?? <div>{t('loading')}</div>;
+    const LoadingComponent = <div>{t('loading')}</div>;
 
     if (isLoading && !isSending) {
         return LoadingComponent;
@@ -49,11 +46,7 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
     }
 
     if (isFullFilled) {
-        if (skipSuccessNotice) {
-            return <></>;
-        }
-
-        return <div>{successNotice ?? t('successfullySent')}</div>;
+        return <div>{t('successfullySent')}</div>;
     }
 
     const FormRenderer = formRenderer ?? Form;

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

@@ -35,39 +35,39 @@ import {
     Locale,
     PydanticFormContextProps,
     PydanticFormFieldType,
-    PydanticFormInitialContextProps,
     PydanticFormSchemaRawJson,
     PydanticFormValidationErrorDetails,
+    PydanticFormsContextConfig,
 } from '@/types';
 import { getHashForArray } from '@/utils';
 
 export const PydanticFormContext =
     createContext<PydanticFormContextProps | null>(null);
 
+export interface PydanticFormContextProviderProps {
+    children: (props: PydanticFormContextProps) => React.ReactNode;
+    config: PydanticFormsContextConfig;
+    formKey: string;
+    onCancel?: () => void;
+    onSuccess?: (fieldValues: FieldValues, response: object) => void;
+    title?: string;
+}
+
 function PydanticFormContextProvider({
-    formKey,
-    formIdKey,
-    metaData,
-    title,
-    sendLabel,
-    loadingComponent,
-    successNotice,
-    onSuccess,
-    onCancel,
     children,
     config,
-}: PydanticFormInitialContextProps) {
+    formKey,
+    onCancel,
+    onSuccess,
+    title,
+}: PydanticFormContextProviderProps) {
     const {
         apiProvider,
-        labelProvider,
+        componentMatcherExtender,
         customDataProvider,
         customDataProviderCacheKey,
-        resetButtonAlternative,
-        allowUntouchedSubmit,
-        skipSuccessNotice,
-        componentMatcherExtender,
+        labelProvider,
         locale,
-        cancelButton,
     } = config;
 
     const [formInputHistory, setFormInputHistory] = useState(
@@ -96,24 +96,27 @@ function PydanticFormContextProvider({
 
     const [errorDetails, setErrorDetails] =
         useState<PydanticFormValidationErrorDetails>();
+
     const [isFullFilled, setIsFullFilled] = useState(false);
     const [isSending, setIsSending] = useState(false);
 
     // fetch the labels of the form, can also contain default values
     const { data: formLabels, isLoading: isLoadingFormLabels } =
-        useLabelProvider(labelProvider, formKey, formIdKey);
+        useLabelProvider(labelProvider, formKey);
 
+    // fetch custom data
     const { data: customData, isLoading: isLoadingCustomData } =
         useCustomDataProvider(
             customDataProviderCacheKey ?? 100,
             customDataProvider,
         );
 
+    // fetch API response with form definition
     const {
         data: apiResponse,
         isLoading: isLoadingSchema,
         error,
-    } = useApiProvider(formKey, formInputData, apiProvider, metaData);
+    } = useApiProvider(formKey, formInputData, apiProvider);
 
     const emptyRawSchema: PydanticFormSchemaRawJson = useMemo(
         () => ({
@@ -295,39 +298,29 @@ function PydanticFormContextProvider({
     const PydanticFormContextState = {
         // to prevent an issue where the sending state hangs
         // we check both the SWR hook state as our manual state
-        isSending: isSending && isLoadingSchema,
-        isLoading,
-        reactHookForm,
-        pydanticFormSchema,
-        loadingComponent,
-        onPrevious: () => goToPreviousStep(reactHookForm?.getValues()),
-        onCancel,
-        title,
-        sendLabel,
-        isFullFilled,
+        clearForm,
+        config,
         customDataProvider,
         errorDetails,
-        resetErrorDetails,
-        successNotice,
-        submitForm,
-        resetForm,
-        cancelButton,
-        skipSuccessNotice,
-        allowUntouchedSubmit,
-        resetButtonAlternative,
-        config,
-        formKey,
-        formIdKey,
-        clearForm,
+        fieldDataStorage,
         formInputData,
+        formKey,
         hasNext,
         initialData,
-        fieldDataStorage,
+        isFullFilled,
+        isLoading,
+        isSending: isSending && isLoadingSchema,
+        onCancel,
+        onPrevious: () => goToPreviousStep(reactHookForm?.getValues()),
+        pydanticFormSchema,
+        reactHookForm,
+        resetErrorDetails,
+        resetForm,
+        submitForm,
+        title,
     };
 
-    // a useeffect for whenever the error response updates
-    // sometimes we need to update the form,
-    // some we need to update the errors
+    // useEffect to handle API responses
     useEffect(() => {
         if (!apiResponse) {
             return;
@@ -359,41 +352,33 @@ function PydanticFormContextProvider({
         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 to the form input data if the formKey changes
     useEffect(() => {
         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]);
 
-    // handle successfull submits
+    // UseEffect to handle successfull submits
     useEffect(() => {
         if (!isFullFilled) {
             return;
         }
 
         if (onSuccess) {
             const values = reactHookForm.getValues();
-            if (skipSuccessNotice) {
-                onSuccess(values, apiResponse || {});
-            } else {
-                setTimeout(() => {
-                    onSuccess?.(values, apiResponse || {});
-                }, 1500); // Delay to allow notice to show first
-            }
+            onSuccess(values, apiResponse || {});
         }
 
         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
+    // UseEffect to handles errors throws by the useApiProvider call
     // for instance unexpected 500 errors
     useEffect(() => {
         if (!error) {
@@ -407,6 +392,7 @@ function PydanticFormContextProvider({
         });
     }, [error]);
 
+    // UseEffect to handle locale change
     useEffect(() => {
         const getLocale = () => {
             switch (locale) {

frontend/packages/pydantic-forms/src/core/helper.spec.ts

@@ -29,7 +29,6 @@ export const getMockPydanticFormField = (
         properties: {},
         required: false,
         options: [],
-        columns: 6,
         schema: {
             type: PydanticFormFieldType.STRING,
             format: PydanticFormFieldFormat.DEFAULT,