refactor: decouple fields from state in DynamicForms

Author: jorgemoya

core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts

@@ -335,9 +335,9 @@ function parseRegisterCustomerInput(
 }
 
 export async function registerCustomer<F extends Field>(
+  { fields }: { fields: Array<F | FieldGroup<F>> },
   prevState: {
     lastResult: SubmissionResult | null;
-    fields: Array<F | FieldGroup<F>>;
     passwordComplexity?: Parameters<typeof schema>[1];
   },
   formData: FormData,
@@ -347,19 +347,19 @@ export async function registerCustomer<F extends Field>(
   const cartId = await getCartId();
 
   const submission = parseWithZod(formData, {
-    schema: schema(prevState.fields, prevState.passwordComplexity),
+    schema: schema(fields, prevState.passwordComplexity),
   });
 
   if (submission.status !== 'success') {
     return {
       lastResult: submission.reply(),
-      fields: prevState.fields,
+      fields,
       passwordComplexity: prevState.passwordComplexity,
     };
   }
 
   try {
-    const input = parseRegisterCustomerInput(submission.value, prevState.fields);
+    const input = parseRegisterCustomerInput(submission.value, fields);
     const response = await client.fetch({
       document: RegisterCustomerMutation,
       variables: {
@@ -375,7 +375,7 @@ export async function registerCustomer<F extends Field>(
         lastResult: submission.reply({
           formErrors: response.data.customer.registerCustomer.errors.map((error) => error.message),
         }),
-        fields: prevState.fields,
+        fields,
         passwordComplexity: prevState.passwordComplexity,
       };
     }
@@ -397,22 +397,22 @@ export async function registerCustomer<F extends Field>(
         lastResult: submission.reply({
           formErrors: error.errors.map(({ message }) => message),
         }),
-        fields: prevState.fields,
+        fields,
         passwordComplexity: prevState.passwordComplexity,
       };
     }
 
     if (error instanceof Error) {
       return {
         lastResult: submission.reply({ formErrors: [error.message] }),
-        fields: prevState.fields,
+        fields,
         passwordComplexity: prevState.passwordComplexity,
       };
     }
 
     return {
       lastResult: submission.reply({ formErrors: [t('somethingWentWrong')] }),
-      fields: prevState.fields,
+      fields,
       passwordComplexity: prevState.passwordComplexity,
     };
   }

core/app/[locale]/(default)/account/addresses/_actions/address-action.ts

@@ -11,25 +11,28 @@ export interface State {
   addresses: Address[];
   lastResult: SubmissionResult | null;
   defaultAddress?: DefaultAddressConfiguration;
-  fields: Array<Field | FieldGroup<Field>>;
 }
 
-export async function addressAction(prevState: Awaited<State>, formData: FormData): Promise<State> {
+export async function addressAction(
+  { fields }: { fields: Array<Field | FieldGroup<Field>> },
+  prevState: Awaited<State>,
+  formData: FormData,
+): Promise<State> {
   'use server';
 
   const intent = formData.get('intent');
 
   switch (intent) {
     case 'create': {
-      return await createAddress(prevState, formData);
+      return await createAddress({ fields }, prevState, formData);
     }
 
     case 'update': {
-      return await updateAddress(prevState, formData);
+      return await updateAddress({ fields }, prevState, formData);
     }
 
     case 'delete': {
-      return await deleteAddress(prevState, formData);
+      return await deleteAddress({ fields }, prevState, formData);
     }
 
     default: {

core/app/[locale]/(default)/account/addresses/_actions/create-address.ts

@@ -196,7 +196,11 @@ function parseAddAddressInput(
   return inputSchema.parse(mappedInput);
 }
 
-export async function createAddress(prevState: Awaited<State>, formData: FormData): Promise<State> {
+export async function createAddress(
+  { fields }: { fields: Array<Field | FieldGroup<Field>> },
+  prevState: Awaited<State>,
+  formData: FormData,
+): Promise<State> {
   const t = await getTranslations('Account.Addresses');
   const customerAccessToken = await getSessionCustomerAccessToken();
 
@@ -210,7 +214,7 @@ export async function createAddress(prevState: Awaited<State>, formData: FormDat
   }
 
   try {
-    const input = parseAddAddressInput(submission.value, prevState.fields);
+    const input = parseAddAddressInput(submission.value, fields);
 
     const response = await client.fetch({
       document: AddCustomerAddressMutation,
@@ -242,7 +246,6 @@ export async function createAddress(prevState: Awaited<State>, formData: FormDat
       ],
       lastResult: submission.reply({ resetForm: true }),
       defaultAddress: prevState.defaultAddress,
-      fields: prevState.fields,
     };
   } catch (error) {
     // eslint-disable-next-line no-console

core/app/[locale]/(default)/account/addresses/_actions/delete-address.ts

@@ -4,6 +4,7 @@ import { unstable_expireTag as expireTag } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
 import { z } from 'zod';
 
+import { Field, FieldGroup } from '@/vibes/soul/form/dynamic-form/schema';
 import { schema } from '@/vibes/soul/sections/address-list-section/schema';
 import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
@@ -44,7 +45,12 @@ function parseDeleteAddressInput(
   });
 }
 
-export async function deleteAddress(prevState: Awaited<State>, formData: FormData): Promise<State> {
+export async function deleteAddress(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  { fields }: { fields: Array<Field | FieldGroup<Field>> },
+  prevState: Awaited<State>,
+  formData: FormData,
+): Promise<State> {
   const t = await getTranslations('Account.Addresses');
   const customerAccessToken = await getSessionCustomerAccessToken();
 
@@ -86,7 +92,6 @@ export async function deleteAddress(prevState: Awaited<State>, formData: FormDat
       ),
       lastResult: submission.reply({ resetForm: true }),
       defaultAddress: prevState.defaultAddress,
-      fields: prevState.fields,
     };
   } catch (error) {
     // eslint-disable-next-line no-console

core/app/[locale]/(default)/account/addresses/_actions/update-address.ts

@@ -209,7 +209,11 @@ function parseUpdateAddressInput(
   return inputSchema.parse(mappedInput);
 }
 
-export async function updateAddress(prevState: Awaited<State>, formData: FormData): Promise<State> {
+export async function updateAddress(
+  { fields }: { fields: Array<Field | FieldGroup<Field>> },
+  prevState: Awaited<State>,
+  formData: FormData,
+): Promise<State> {
   const t = await getTranslations('Account.Addresses');
   const customerAccessToken = await getSessionCustomerAccessToken();
 
@@ -223,7 +227,7 @@ export async function updateAddress(prevState: Awaited<State>, formData: FormDat
   }
 
   try {
-    const input = parseUpdateAddressInput(submission.value, prevState.fields);
+    const input = parseUpdateAddressInput(submission.value, fields);
 
     const response = await client.fetch({
       document: UpdateCustomerAddressMutation,
@@ -251,7 +255,6 @@ export async function updateAddress(prevState: Awaited<State>, formData: FormDat
       ),
       lastResult: submission.reply({ resetForm: true }),
       defaultAddress: prevState.defaultAddress,
-      fields: prevState.fields,
     };
   } catch (error) {
     // eslint-disable-next-line no-console

core/app/[locale]/(default)/gift-certificates/purchase/_actions/add-to-cart.tsx

@@ -19,7 +19,6 @@ import { getPreferredCurrencyCode } from '~/lib/currency';
 import { GiftCertificateSettingsFragment } from '../fragment';
 
 interface State {
-  fields: Array<Field | FieldGroup<Field>>;
   lastResult: SubmissionResult | null;
   successMessage?: ReactNode;
 }
@@ -101,7 +100,9 @@ const schema = (
 };
 
 export async function addGiftCertificateToCart(
-  prevState: State,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  { fields }: { fields: Array<Field | FieldGroup<Field>> },
+  _prevState: State,
   formData: FormData,
 ): Promise<State> {
   const t = await getTranslations('GiftCertificates.Purchase');
@@ -117,7 +118,7 @@ export async function addGiftCertificateToCart(
   });
 
   if (submission.status !== 'success') {
-    return { lastResult: submission.reply(), fields: prevState.fields };
+    return { lastResult: submission.reply() };
   }
 
   const amountFormatted = format.number(submission.value.amount, {
@@ -148,7 +149,6 @@ export async function addGiftCertificateToCart(
 
     return {
       lastResult: submission.reply(),
-      fields: prevState.fields,
       successMessage: t.rich('successMessage', {
         cartLink: (chunks) => (
           <Link className="underline" href="/cart" prefetch="viewport" prefetchKind="full">
@@ -168,27 +168,23 @@ export async function addGiftCertificateToCart(
             return message;
           }),
         }),
-        fields: prevState.fields,
       };
     }
 
     if (error instanceof MissingCartError) {
       return {
         lastResult: submission.reply({ formErrors: [t('missingCart')] }),
-        fields: prevState.fields,
       };
     }
 
     if (error instanceof Error) {
       return {
         lastResult: submission.reply({ formErrors: [error.message] }),
-        fields: prevState.fields,
       };
     }
 
     return {
       lastResult: submission.reply({ formErrors: [t('unknownError')] }),
-      fields: prevState.fields,
     };
   }
 }

core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts

@@ -58,18 +58,19 @@ function parseContactFormInput(
 }
 
 export async function submitContactForm<F extends Field>(
-  prevState: { lastResult: SubmissionResult | null; fields: Array<F | FieldGroup<F>> },
+  { fields }: { fields: Array<F | FieldGroup<F>> },
+  _prevState: { lastResult: SubmissionResult | null },
   formData: FormData,
 ) {
   const t = await getTranslations('WebPages.ContactUs.Form');
   const locale = await getLocale();
 
-  const submission = parseWithZod(formData, { schema: schema(prevState.fields) });
+  const submission = parseWithZod(formData, { schema: schema(fields) });
 
   if (submission.status !== 'success') {
     return {
       lastResult: submission.reply(),
-      fields: prevState.fields,
+      fields,
     };
   }
 
@@ -88,7 +89,7 @@ export async function submitContactForm<F extends Field>(
     if (result.errors.length > 0) {
       return {
         lastResult: submission.reply({ formErrors: result.errors.map((error) => error.message) }),
-        fields: prevState.fields,
+        fields,
       };
     }
   } catch (error) {
@@ -100,20 +101,20 @@ export async function submitContactForm<F extends Field>(
         lastResult: submission.reply({
           formErrors: error.errors.map(({ message }) => message),
         }),
-        fields: prevState.fields,
+        fields,
       };
     }
 
     if (error instanceof Error) {
       return {
         lastResult: submission.reply({ formErrors: [error.message] }),
-        fields: prevState.fields,
+        fields,
       };
     }
 
     return {
       lastResult: submission.reply({ formErrors: [t('somethingWentWrong')] }),
-      fields: prevState.fields,
+      fields,
     };
   }
 

core/vibes/soul/form/dynamic-form/index.tsx

@@ -38,16 +38,19 @@ import { Button, ButtonProps } from '@/vibes/soul/primitives/button';
 
 import { Field, FieldGroup, PasswordComplexitySettings, schema } from './schema';
 
-type Action<S, P> = (state: Awaited<S>, payload: P) => S | Promise<S>;
+type Action<F extends Field, S, P> = (
+  { fields }: { fields: Array<F | FieldGroup<F>> },
+  state: Awaited<S>,
+  payload: P,
+) => S | Promise<S>;
 
-interface State<F extends Field> {
-  fields: Array<F | FieldGroup<F>>;
+interface State {
   lastResult: SubmissionResult | null;
   successMessage?: ReactNode;
   passwordComplexity?: PasswordComplexitySettings | null;
 }
 
-export type DynamicFormAction<F extends Field> = Action<State<F>, FormData>;
+export type DynamicFormAction<F extends Field> = Action<F, State, FormData>;
 
 export interface DynamicFormProps<F extends Field> {
   fields: Array<F | FieldGroup<F>>;
@@ -65,7 +68,7 @@ export interface DynamicFormProps<F extends Field> {
 
 export function DynamicForm<F extends Field>({
   action,
-  fields: defaultFields,
+  fields,
   buttonSize = 'medium',
   cancelLabel = 'Cancel',
   submitLabel = 'Submit',
@@ -76,10 +79,11 @@ export function DynamicForm<F extends Field>({
   onSuccess,
   passwordComplexity: defaultPasswordComplexity,
 }: DynamicFormProps<F>) {
-  const [{ lastResult, fields, successMessage, passwordComplexity }, formAction] = useActionState(
-    action,
+  const actionWithFields = action.bind(null, { fields });
+
+  const [{ lastResult, successMessage, passwordComplexity }, formAction] = useActionState(
+    actionWithFields,
     {
-      fields: defaultFields,
       lastResult: null,
       passwordComplexity: defaultPasswordComplexity,
     },