Merge pull request #173 from workfloworchestrator/1891-refactor-legacy-code

1891: Refactor. Remove some unused code

Author: DutchBen

frontend/.changeset/gentle-webs-repair.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': minor
+---
+
+Cleans up unused code.

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

@@ -21,12 +21,14 @@ export default function Home() {
     const pydanticFormApiProvider: PydanticFormApiProvider = async ({
         requestBody,
     }) => {
-        const fetchResult = await fetch('http://localhost:8000/form', {
+        const url = 'http://localhost:8000/form';
+
+        const fetchResult = await fetch(url, {
             method: 'POST',
+            body: JSON.stringify(requestBody),
             headers: {
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify(requestBody),
         });
         const jsonResult = await fetchResult.json();
         return jsonResult;
@@ -87,20 +89,22 @@ export default function Home() {
             <h1 style={{ marginBottom: '20px' }}>Pydantic Form </h1>
 
             <PydanticForm
-                id="theForm"
+                formKey="theForm"
                 title="Example form"
-                successNotice="Custom success notice"
                 onCancel={() => {
                     alert('Form cancelled');
                 }}
+                onSuccess={() => {
+                    alert('Form submitted successfully');
+                }}
                 config={{
-                    allowUntouchedSubmit: true,
                     apiProvider: pydanticFormApiProvider,
                     labelProvider: pydanticLabelProvider,
                     customDataProvider: pydanticCustomDataProvider,
                     componentMatcherExtender: componentMatcher,
                     customTranslations: customTranslations,
                     locale: locale,
+                    loadingComponent: <div>Custom loading component</div>,
                 }}
             />
         </div>

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,9 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
 
     const t = useTranslations('renderForm');
 
-    const LoadingComponent = loadingComponent ?? <div>{t('loading')}</div>;
+    const LoadingComponent = config.loadingComponent ?? (
+        <div>{t('loading')}</div>
+    );
 
     if (isLoading && !isSending) {
         return LoadingComponent;
@@ -49,11 +48,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;