Merge pull request #169 from workfloworchestrator/2101-refactor-rfh

2101 refactor rfh to reactHookForm

Author: DutchBen

frontend/.changeset/green-clubs-kiss.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Refactors rhf const to reactHookForm for better readability

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

@@ -9,10 +9,10 @@ import { disableField, itemizeArrayItem } from '@/utils';
 import { RenderFields } from '../render';
 
 export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
-    const { rhf, config } = usePydanticFormContext();
+    const { reactHookForm, config } = usePydanticFormContext();
 
     const disabled = pydanticFormField.attributes?.disabled || false;
-    const { control } = rhf;
+    const { control } = reactHookForm;
     const { id: arrayName, arrayItem } = pydanticFormField;
     const { fields, append, remove } = useFieldArray({
         control,

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

@@ -20,9 +20,9 @@ interface FieldWrapProps {
 }
 
 export const FieldWrap = ({ pydanticFormField, children }: FieldWrapProps) => {
-    const { errorDetails, rhf, config } = usePydanticFormContext();
+    const { errorDetails, reactHookForm, config } = usePydanticFormContext();
     const RowRenderer = config?.rowRenderer ? config.rowRenderer : FormRow;
-    const fieldState = rhf.getFieldState(pydanticFormField.id);
+    const fieldState = reactHookForm.getFieldState(pydanticFormField.id);
     const errorMsg =
         errorDetails?.mapped?.[pydanticFormField.id]?.msg ??
         fieldState.error?.message;

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

@@ -6,12 +6,12 @@ import { PydanticFormElementProps } from '@/types';
 export const HiddenField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
-    const { rhf } = usePydanticFormContext();
+    const { reactHookForm } = usePydanticFormContext();
     return (
         <input
             type="hidden"
             data-testid={pydanticFormField.id}
-            {...rhf.register(pydanticFormField.id)}
+            {...reactHookForm.register(pydanticFormField.id)}
         />
     );
 };

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

@@ -12,7 +12,7 @@ import { usePydanticFormContext } from '@/core';
 const Footer = () => {
     const {
         resetForm,
-        rhf,
+        reactHookForm,
         onCancel,
         onPrevious,
         cancelButton,
@@ -66,26 +66,17 @@ const Footer = () => {
     };
 
     const SubmitButton = () => (
-        <button
-            type="submit"
-            style={{ padding: '12px' }}
-            disabled={
-                !rhf.formState.isValid ||
-                (!allowUntouchedSubmit &&
-                    !rhf.formState.isDirty &&
-                    !rhf.formState.isSubmitting)
-            }
-        >
+        <button type="submit" style={{ padding: '12px' }}>
             {submitButtonLabel}
         </button>
     );
 
     return (
         <div style={{ height: '200px', marginTop: '24px' }}>
             <div style={{ display: 'flex', gap: '16px' }}>
-                {rhf.formState.isValid &&
+                {reactHookForm.formState.isValid &&
                     !allowUntouchedSubmit &&
-                    !rhf.formState.isDirty && (
+                    !reactHookForm.formState.isDirty && (
                         <div>Het formulier is nog niet aangepast</div>
                     )}
                 {formInputData && formInputData.length > 0 && (
@@ -106,9 +97,10 @@ const Footer = () => {
                     fontSize: '24px',
                 }}
             >
-                {!rhf.formState.isValid && rhf.formState.isDirty && (
-                    <div>{t('notFilledYet')}</div>
-                )}
+                {!reactHookForm.formState.isValid &&
+                    reactHookForm.formState.isDirty && (
+                        <div>{t('notFilledYet')}</div>
+                    )}
             </div>
         </div>
     );

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

@@ -6,14 +6,17 @@ import { PydanticFormField } from '@/types';
 import { preventDefault } from '@/utils';
 
 const ResetNullableFieldTrigger = ({ field }: { field: PydanticFormField }) => {
-    const { rhf } = usePydanticFormContext();
+    const { reactHookForm } = usePydanticFormContext();
 
     const setNullValue = useCallback(() => {
-        rhf.setValue(field.id, null);
-        rhf.trigger(field.id);
-    }, [rhf, field]);
+        reactHookForm.setValue(field.id, null);
+        reactHookForm.trigger(field.id);
+    }, [reactHookForm, field]);
 
-    if (!isNullableField(field) || rhf.getValues()?.[field.id] === null) {
+    if (
+        !isNullableField(field) ||
+        reactHookForm.getValues()?.[field.id] === null
+    ) {
         return null;
     }
 

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

@@ -9,18 +9,18 @@ import { usePydanticFormContext } from '@/core';
 import { getFieldLabelById } from '@/core/helper';
 
 export default function RenderReactHookFormErrors() {
-    const { rhf, pydanticFormSchema } = usePydanticFormContext();
+    const { reactHookForm, pydanticFormSchema } = usePydanticFormContext();
     const [showDetails, setShowDetails] = useState(false);
 
     const toggleDetails = useCallback(() => {
         setShowDetails((state) => !state);
     }, []);
 
-    if (rhf.formState.isValid) {
+    if (reactHookForm.formState.isValid) {
         return <></>;
     }
 
-    const numErrors = Object.keys(rhf.formState.errors).length;
+    const numErrors = Object.keys(reactHookForm.formState.errors).length;
     const multiMistakes = numErrors > 1;
 
     return (
@@ -29,7 +29,7 @@ export default function RenderReactHookFormErrors() {
         //  variant={HelpContainerVariant.ERROR}
         //  title="Het formulier bevat tenminste één niet correct ingevulde rubriek, waardoor het niet opgeslagen kan worden."
         >
-            {!!Object.keys(rhf.formState.errors).length && (
+            {!!Object.keys(reactHookForm.formState.errors).length && (
                 <>
                     <div className="d-flex align-items-center">
                         Er {multiMistakes ? 'zijn' : 'is'} {numErrors} rubriek
@@ -44,10 +44,12 @@ export default function RenderReactHookFormErrors() {
                     </div>
                     {showDetails && (
                         <ul className="error-list mb-2">
-                            {Object.keys(rhf.formState.errors).map(
+                            {Object.keys(reactHookForm.formState.errors).map(
                                 (fieldKey) => {
                                     const fieldError =
-                                        rhf.formState?.errors[fieldKey];
+                                        reactHookForm.formState?.errors[
+                                            fieldKey
+                                        ];
 
                                     const fieldName = getFieldLabelById(
                                         fieldKey,

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

@@ -154,7 +154,7 @@ function PydanticFormContextProvider({
     ]);
 
     // initialize the react-hook-form
-    const rhf = useForm({
+    const reactHookForm = useForm({
         resolver: zodResolver(zodSchema),
         mode: 'all',
         defaultValues: initialData,
@@ -163,10 +163,10 @@ function PydanticFormContextProvider({
 
     const awaitReset = useCallback(
         async (payLoad: FieldValues = {}) => {
-            rhf.reset(payLoad);
+            reactHookForm.reset(payLoad);
             await new Promise((resolve) => setTimeout(resolve, 0)); // wait one tick
         },
-        [rhf],
+        [reactHookForm],
     );
 
     const addFormInputData = useCallback(
@@ -185,35 +185,44 @@ function PydanticFormContextProvider({
 
     const submitFormFn = useCallback(() => {
         setIsSending(true);
-        const rhfValues = _.cloneDeep(rhf.getValues());
+        const reactHookFormValues = _.cloneDeep(reactHookForm.getValues());
         awaitReset();
-        // Note. If we don't use cloneDeep here we are adding a reference to the rhfValues
+        // Note. If we don't use cloneDeep here we are adding a reference to the reactHookFormValues
         // that changes on every change in the form and triggering effects before we want to.
-        addFormInputData(rhfValues, !!errorDetails);
+        addFormInputData(reactHookFormValues, !!errorDetails);
         window.scrollTo(0, 0);
-    }, [rhf, errorDetails, addFormInputData, awaitReset, setIsSending]);
+    }, [
+        reactHookForm,
+        errorDetails,
+        addFormInputData,
+        awaitReset,
+        setIsSending,
+    ]);
 
     const onClientSideError = useCallback(
         (data?: FieldValues) => {
             // TODO implement save with errors toggle
             if (data) {
-                rhf.clearErrors();
+                reactHookForm.clearErrors();
                 submitFormFn();
             }
         },
-        [rhf, submitFormFn],
+        [reactHookForm, submitFormFn],
     );
 
-    const submitForm = rhf.handleSubmit(submitFormFn, onClientSideError);
+    const submitForm = reactHookForm.handleSubmit(
+        submitFormFn,
+        onClientSideError,
+    );
 
     const resetForm = useCallback(
         (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
             e.preventDefault();
             setErrorDetails(undefined);
             awaitReset();
-            rhf.trigger();
+            reactHookForm.trigger();
         },
-        [awaitReset, rhf],
+        [awaitReset, reactHookForm],
     );
 
     const resetErrorDetails = useCallback(() => {
@@ -238,10 +247,10 @@ function PydanticFormContextProvider({
         // we check both the SWR hook state as our manual state
         isSending: isSending && isLoadingSchema,
         isLoading,
-        rhf,
+        reactHookForm,
         pydanticFormSchema,
         loadingComponent,
-        onPrevious: () => goToPreviousStep(rhf?.getValues()),
+        onPrevious: () => goToPreviousStep(reactHookForm?.getValues()),
         onCancel,
         title,
         sendLabel,
@@ -319,7 +328,7 @@ function PydanticFormContextProvider({
         }
 
         if (onSuccess) {
-            const values = rhf.getValues();
+            const values = reactHookForm.getValues();
             if (skipSuccessNotice) {
                 onSuccess(values, apiResponse || {});
             } else {
@@ -369,7 +378,7 @@ function PydanticFormContextProvider({
                 awaitReset(currentStepFromHistory);
             }
         });
-    }, [awaitReset, formInputData, formInputHistory, rhf]);
+    }, [awaitReset, formInputData, formInputHistory, reactHookForm]);
 
     return (
         <PydanticFormContext.Provider value={PydanticFormContextState}>

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

@@ -14,24 +14,24 @@ export const WrapFieldElement = ({
     pydanticFormField: PydanticFormField;
     extraTriggerFields?: string[];
 }) => {
-    const { rhf } = usePydanticFormContext();
+    const { reactHookForm } = usePydanticFormContext();
     return (
         <Controller
             name={pydanticFormField.id}
-            control={rhf.control}
+            control={reactHookForm.control}
             render={({ field }) => {
                 const { onChange, onBlur, value, name } = field;
                 const onChangeHandle = (val: string) => {
                     onChange(val);
 
                     extraTriggerFields?.forEach((extraField) => {
-                        rhf.trigger(extraField);
+                        reactHookForm.trigger(extraField);
                     });
 
                     // it seems we need this because the 2nd error would get stale..
                     // https://github.com/react-hook-form/react-hook-form/issues/8170
                     // https://github.com/react-hook-form/react-hook-form/issues/10832
-                    rhf.trigger(field.name);
+                    reactHookForm.trigger(field.name);
                 };
 
                 return (

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

@@ -449,13 +449,13 @@ export const getFieldAttributes = function (
  * This function can be used as the onValueChange handler in a react hook form form element component.
  * When used, it will trigger the related validations whenever the field changes
  *
- * @param rhf
+ * @param reactHookForm
  * @param field
  * @returns
  */
-export const rhfTriggerValidationsOnChange =
+export const ReactHookFormTriggerValidationsOnChange =
     (
-        rhf: ReturnType<typeof useForm>,
+        reactHookForm: ReturnType<typeof useForm>,
         field: ControllerRenderProps<FieldValues, string>,
     ) =>
     (value: string) => {
@@ -464,7 +464,7 @@ export const rhfTriggerValidationsOnChange =
         // it seems we need this because the 2nd error would get stale..
         // https://github.com/react-hook-form/react-hook-form/issues/8170
         // https://github.com/react-hook-form/react-hook-form/issues/10832
-        rhf.trigger(field.name);
+        reactHookForm.trigger(field.name);
     };
 
 export const getMatcher = (