Merge pull request #181 from workfloworchestrator/2143-REFACTOR

2143 refactor components and context setup

Author: DutchBen

backend/main.py

@@ -165,19 +165,19 @@ def form_generator(state: State):
         class TestForm0(FormPage):
             model_config = ConfigDict(title="Form Title Page 1")
 
-            number: NumberExample
-            list: TestExampleNumberList
+            number: NumberExample = 3
+            # list: TestExampleNumberList
             # list_list: unique_conlist(TestExampleNumberList, min_items=1, max_items=5)
             # list_list_list: unique_conlist(
             # unique_conlist(Person2, min_items=1, max_items=5),
             # min_items=1,
             # max_items=2,
             # ) = [1, 2]
-            test: TestString
-            textList: unique_conlist(TestString, min_items=1, max_items=5)
+            test: TestString = "aa"
+            # textList: unique_conlist(TestString, min_items=1, max_items=5)
             # numberList: TestExampleNumberList = [1, 2]
-            person: Person2
-            personList: unique_conlist(Person2, min_items=2, max_items=5)
+            # person: Person2
+            # personList: unique_conlist(Person2, min_items=2, max_items=5)
             # ingleNumber: NumberExample
             # number0: Annotated[int, Ge(18), Le(99)] = 17
 

frontend/.changeset/floppy-eels-invent.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Improves handling 500 api errors

frontend/.changeset/mighty-dingos-run.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': minor
+---
+
+Refactors component and contextprovider setup

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

@@ -1,5 +1,7 @@
 'use client';
 
+import type { FieldValues } from 'react-hook-form';
+
 import {
     Locale,
     PydanticForm,
@@ -11,6 +13,7 @@ import type {
     PydanticFormApiProvider,
     PydanticFormCustomDataProvider,
     PydanticFormLabelProvider,
+    PydanticFormSuccessResponse,
 } from 'pydantic-forms';
 
 import { TextArea } from '@/fields';
@@ -23,15 +26,49 @@ export default function Home() {
     }) => {
         const url = 'http://localhost:8000/form';
 
-        const fetchResult = await fetch(url, {
+        return fetch(url, {
             method: 'POST',
             body: JSON.stringify(requestBody),
             headers: {
                 'Content-Type': 'application/json',
             },
-        });
-        const jsonResult = await fetchResult.json();
-        return jsonResult;
+        })
+            .then(async (fetchResult) => {
+                // Note: https://chatgpt.com/share/68c16538-5544-800c-9684-1e641168dbff
+                if (
+                    fetchResult.status === 400 ||
+                    fetchResult.status === 510 ||
+                    fetchResult.status === 200 ||
+                    fetchResult.status === 201
+                ) {
+                    const data = await fetchResult.json();
+
+                    return new Promise<Record<string, unknown>>(
+                        (resolve, reject) => {
+                            if (
+                                fetchResult.status === 510 ||
+                                fetchResult.status === 400
+                            ) {
+                                resolve({
+                                    ...data,
+                                    status: fetchResult.status,
+                                });
+                            }
+                            if (fetchResult.status === 200) {
+                                resolve({ status: 200, data });
+                            }
+                            reject('No valid status in response');
+                        },
+                    );
+                }
+                throw new Error(
+                    `Status not 400, 510 or 200: ${fetchResult.statusText}`,
+                );
+            }) //
+            .catch((error) => {
+                // Note: https://chatgpt.com/share/68c16538-5544-800c-9684-1e641168dbff
+                throw new Error(`Fetch error: ${error}`);
+            });
     };
 
     const pydanticLabelProvider: PydanticFormLabelProvider = async () => {
@@ -84,6 +121,15 @@ export default function Home() {
     };
     const locale = Locale.enGB;
 
+    const onSuccess = (
+        _: FieldValues[],
+        apiResponse: PydanticFormSuccessResponse,
+    ) => {
+        alert(
+            `Form submitted successfully: ${JSON.stringify(apiResponse.data)}`,
+        );
+    };
+
     return (
         <div className={styles.page}>
             <h1 style={{ marginBottom: '20px' }}>Pydantic Form </h1>
@@ -94,9 +140,7 @@ export default function Home() {
                 onCancel={() => {
                     alert('Form cancelled');
                 }}
-                onSuccess={() => {
-                    alert('Form submitted successfully');
-                }}
+                onSuccess={onSuccess}
                 config={{
                     apiProvider: pydanticFormApiProvider,
                     labelProvider: pydanticLabelProvider,

frontend/package-lock.json

@@ -6,34 +6,48 @@
  * This is the component that will be included when we want to use a form.
  * It initializes the context and calls the mainForm
  */
-import React from 'react';
+import React, { createContext } 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 {
+    PydanticFormConfig,
+    PydanticFormProps,
+    PydanticFormValidationErrorDetails,
+} from '@/types';
+
+import { PydanticFormHandler } from './core';
+import { PydanticFormFieldDataStorageProvider } from './core/PydanticFieldDataStorageProvider';
+
+export const PydanticFormConfigContext =
+    createContext<PydanticFormConfig | null>(null);
+
+export const PydanticFormValidationErrorContext =
+    createContext<PydanticFormValidationErrorDetails | null>(null);
 
 export const PydanticForm = ({
     config,
     formKey,
     onCancel,
     onSuccess,
     title,
-}: Omit<PydanticFormContextProviderProps, 'children'>) => (
-    <TranslationsProvider
-        customTranslations={config.customTranslations}
-        locale={config.locale}
-    >
-        <PydanticFormContextProvider
-            config={config}
-            onCancel={onCancel}
-            onSuccess={onSuccess}
-            title={title}
-            formKey={formKey}
+}: PydanticFormProps) => {
+    return (
+        <TranslationsProvider
+            customTranslations={config.customTranslations}
+            locale={config.locale}
         >
-            {RenderForm}
-        </PydanticFormContextProvider>
-    </TranslationsProvider>
-);
+            <PydanticFormConfigContext.Provider value={config}>
+                <PydanticFormFieldDataStorageProvider>
+                    <PydanticFormHandler
+                        onCancel={onCancel}
+                        onSuccess={onSuccess}
+                        title={title}
+                        formKey={formKey}
+                    />
+                </PydanticFormFieldDataStorageProvider>
+            </PydanticFormConfigContext.Provider>
+        </TranslationsProvider>
+    );
+};
 
 export default PydanticForm;

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

@@ -1,18 +1,18 @@
 import React from 'react';
 import { useFieldArray } from 'react-hook-form';
 
-import { usePydanticFormContext } from '@/core';
+import { useGetConfig, useGetForm } from '@/core';
 import { fieldToComponentMatcher } from '@/core/helper';
 import { PydanticFormElementProps } from '@/types';
 import { disableField, itemizeArrayItem } from '@/utils';
 
 import { RenderFields } from '../render';
 
 export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
-    const { reactHookForm, config } = usePydanticFormContext();
-
+    const { control } = useGetForm();
+    const { componentMatcherExtender } = useGetConfig();
     const disabled = pydanticFormField.attributes?.disabled || false;
-    const { control } = reactHookForm;
+
     const { id: arrayName, arrayItem } = pydanticFormField;
     const { fields, append, remove } = useFieldArray({
         control,
@@ -25,7 +25,7 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
 
     const component = fieldToComponentMatcher(
         arrayItem,
-        config?.componentMatcherExtender,
+        componentMatcherExtender,
     );
 
     const renderField = (field: Record<'id', string>, index: number) => {

frontend/packages/pydantic-forms/src/components/fields/ArrayField.tsx

@@ -9,32 +9,41 @@
  */
 import React from 'react';
 
-import { usePydanticFormContext } from '@/core';
+import { useGetConfig } from '@/core';
+import { useGetValidationErrors } from '@/core';
 import { PydanticFormField } from '@/types';
 
 import { FormRow } from './FormRow';
 
 interface FieldWrapProps {
     pydanticFormField: PydanticFormField;
+    isInvalid: boolean;
     children: React.ReactNode;
+    frontendValidationMessage?: string;
 }
 
-export const FieldWrap = ({ pydanticFormField, children }: FieldWrapProps) => {
-    const { errorDetails, reactHookForm, config } = usePydanticFormContext();
-    const RowRenderer = config?.rowRenderer ? config.rowRenderer : FormRow;
-    const fieldState = reactHookForm.getFieldState(pydanticFormField.id);
+export const FieldWrap = ({
+    pydanticFormField,
+    isInvalid,
+    frontendValidationMessage,
+    children,
+}: FieldWrapProps) => {
+    const config = useGetConfig();
+    const validationErrors = useGetValidationErrors();
+    const RowRenderer = config.rowRenderer ?? FormRow;
+
     const errorMsg =
-        errorDetails?.mapped?.[pydanticFormField.id]?.msg ??
-        fieldState.error?.message;
-    const isInvalid = errorMsg ?? fieldState.invalid;
+        validationErrors?.mapped?.[pydanticFormField.id]?.msg ??
+        frontendValidationMessage;
+    const isInvalidField = errorMsg ?? isInvalid;
 
     return (
         <RowRenderer
             title={pydanticFormField.title}
             description={pydanticFormField.description}
             required={pydanticFormField.required}
-            isInvalid={!!isInvalid}
-            error={errorMsg as string}
+            isInvalid={!!isInvalidField}
+            error={errorMsg}
             data-testid={pydanticFormField.id}
         >
             <div>{children}</div>

frontend/packages/pydantic-forms/src/components/fields/FieldWrap.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
-import { usePydanticFormContext } from '@/core';
+import { useGetForm } from '@/core';
 import { PydanticFormElementProps } from '@/types';
 
 export const HiddenField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
-    const { reactHookForm } = usePydanticFormContext();
+    const { register } = useGetForm();
     return (
         <input
             type="hidden"
             data-testid={pydanticFormField.id}
-            {...reactHookForm.register(pydanticFormField.id)}
+            {...register(pydanticFormField.id)}
         />
     );
 };

frontend/packages/pydantic-forms/src/components/fields/HiddenField.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import _ from 'lodash';
-
 import type { PydanticFormControlledElementProps } from '@/types';
 
 export const IntegerField = ({
@@ -20,8 +18,7 @@ export const IntegerField = ({
                 onChange(value);
             }}
             disabled={disabled}
-            // Value will be an object when it is added by an array field. We do this be able to add more than one empty field
-            value={_.isObject(value) ? '' : value}
+            value={value}
             type="number"
             style={{
                 padding: '8px',