From aa5c625e0ede296db99d8da786f8d688e96a582c Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Sat, 16 Dec 2023 16:54:42 -0500
Subject: [PATCH] Form validation

---
 src/components/expense-form.tsx | 273 ++++++++++++++++++--------------
 src/lib/schemas.ts              | 120 ++++++++++----
 2 files changed, 242 insertions(+), 151 deletions(-)

diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index 4182d253..3e0909b3 100644
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -29,6 +29,7 @@ import {
 } from '@/components/ui/select'
 import { getExpense, getGroup } from '@/lib/api'
 import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
+import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useSearchParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
@@ -84,12 +85,12 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
               {isCreate ? <>Create expense</> : <>Edit expense</>}
             </CardTitle>
           </CardHeader>
-          <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          <CardContent className="grid sm:grid-cols-2 gap-6">
             <FormField
               control={form.control}
               name="title"
               render={({ field }) => (
-                <FormItem className="order-1">
+                <FormItem className="">
                   <FormLabel>Expense title</FormLabel>
                   <FormControl>
                     <Input
@@ -106,40 +107,11 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
               )}
             />
 
-            <FormField
-              control={form.control}
-              name="paidBy"
-              render={({ field }) => (
-                <FormItem className="order-3 sm:order-2">
-                  <FormLabel>Paid by</FormLabel>
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a participant" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {group.participants.map(({ id, name }) => (
-                        <SelectItem key={id} value={id}>
-                          {name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormDescription>
-                    Select the participant who paid the expense.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
             <FormField
               control={form.control}
               name="amount"
               render={({ field }) => (
-                <FormItem className="order-3 sm:order-4">
+                <FormItem className="sm:order-3">
                   <FormLabel>Amount</FormLabel>
                   <div className="flex items-baseline gap-2">
                     <span>{group.currency}</span>
@@ -179,45 +151,80 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
 
             <FormField
               control={form.control}
-              name="paidFor"
-              render={() => (
-                <FormItem className="order-5">
-                  <FormField
-                    control={form.control}
-                    name="splitMode"
-                    render={({ field }) => (
-                      <FormItem className="order-2 sm:order-3 mb-4">
-                        <FormLabel>Split mode</FormLabel>
-                        <FormControl>
-                          <Select
-                            onValueChange={field.onChange}
-                            defaultValue={field.value}
-                          >
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="EVENLY">Evenly</SelectItem>
-                              <SelectItem value="BY_SHARES">
-                                Unevenly – By shares
-                              </SelectItem>
-                              <SelectItem value="BY_PERCENTAGE">
-                                Unevenly – By percentage
-                              </SelectItem>
-                              <SelectItem value="BY_AMOUNT">
+              name="paidBy"
+              render={({ field }) => (
+                <FormItem className="sm:order-5">
+                  <FormLabel>Paid by</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a participant" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {group.participants.map(({ id, name }) => (
+                        <SelectItem key={id} value={id}>
+                          {name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    Select the participant who paid the expense.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="splitMode"
+              render={({ field }) => (
+                <FormItem className="sm:order-2">
+                  <FormLabel>Split mode</FormLabel>
+                  <FormControl>
+                    <Select
+                      onValueChange={(value) => {
+                        form.setValue('splitMode', value as any, {
+                          shouldDirty: true,
+                          shouldTouch: true,
+                          shouldValidate: true,
+                        })
+                      }}
+                      defaultValue={field.value}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="EVENLY">Evenly</SelectItem>
+                        <SelectItem value="BY_SHARES">
+                          Unevenly – By shares
+                        </SelectItem>
+                        <SelectItem value="BY_PERCENTAGE">
+                          Unevenly – By percentage
+                        </SelectItem>
+                        {/* <SelectItem value="BY_AMOUNT">
                                 Unevenly – By amount
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </FormControl>
-                        <FormDescription>
-                          Select how to split the expense.
-                        </FormDescription>
-                      </FormItem>
-                    )}
-                  />
+                              </SelectItem> */}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormDescription>
+                    Select how to split the expense.
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
 
-                  <div className="mb-4">
+            <FormField
+              control={form.control}
+              name="paidFor"
+              render={() => (
+                <FormItem className="sm:order-4 row-span-2">
+                  <div className="">
                     <FormLabel>
                       Paid for
                       <Button
@@ -260,11 +267,13 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                       name="paidFor"
                       render={({ field }) => {
                         return (
-                          <div className="flex items-center">
-                            <FormItem
-                              key={id}
-                              className="flex-1 flex flex-row items-start space-x-3 space-y-0"
-                            >
+                          <div
+                            data-id={`${id}/${form.getValues().splitMode}/${
+                              group.currency
+                            }`}
+                            className="flex items-center"
+                          >
+                            <FormItem className="flex-1 flex flex-row items-start space-x-3 space-y-0">
                               <FormControl>
                                 <Checkbox
                                   checked={field.value?.some(
@@ -288,51 +297,79 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                                 {name}
                               </FormLabel>
                             </FormItem>
-                            {field.value?.some(
-                              ({ participant }) => participant === id,
-                            ) &&
-                              form.getValues().splitMode !== 'EVENLY' && (
-                                <div className="flex gap-1 items-baseline">
-                                  <FormControl>
-                                    <Input
-                                      className="w-[80px]"
-                                      type="number"
-                                      value={
-                                        field.value?.find(
-                                          ({ participant }) =>
-                                            participant === id,
-                                        )?.shares
-                                      }
-                                      onChange={(event) =>
-                                        field.onChange(
-                                          field.value.map((p) =>
-                                            p.participant === id
-                                              ? {
-                                                  participant: id,
-                                                  shares: Number(
-                                                    event.target.value,
-                                                  ),
-                                                }
-                                              : p,
+                            {form.getValues().splitMode !== 'EVENLY' && (
+                              <FormField
+                                name={`paidFor[${field.value.findIndex(
+                                  ({ participant }) => participant === id,
+                                )}].shares`}
+                                render={() => (
+                                  <div>
+                                    <div className="flex gap-1 items-baseline">
+                                      <FormControl>
+                                        <Input
+                                          key={String(
+                                            !field.value?.some(
+                                              ({ participant }) =>
+                                                participant === id,
+                                            ),
+                                          )}
+                                          className="text-base w-[80px]"
+                                          type="number"
+                                          disabled={
+                                            !field.value?.some(
+                                              ({ participant }) =>
+                                                participant === id,
+                                            )
+                                          }
+                                          value={
+                                            field.value?.find(
+                                              ({ participant }) =>
+                                                participant === id,
+                                            )?.shares
+                                          }
+                                          onChange={(event) =>
+                                            field.onChange(
+                                              field.value.map((p) =>
+                                                p.participant === id
+                                                  ? {
+                                                      participant: id,
+                                                      shares: Number(
+                                                        event.target.value,
+                                                      ),
+                                                    }
+                                                  : p,
+                                              ),
+                                            )
+                                          }
+                                          inputMode="numeric"
+                                          step={1}
+                                        />
+                                      </FormControl>
+                                      <span
+                                        className={cn('text-sm', {
+                                          'text-muted': !field.value?.some(
+                                            ({ participant }) =>
+                                              participant === id,
                                           ),
-                                        )
-                                      }
-                                      inputMode="numeric"
-                                      step={1}
-                                    />
-                                  </FormControl>
-                                  <span className="text-sm">
-                                    {match(form.getValues().splitMode)
-                                      .with('EVENLY', () => <></>)
-                                      .with('BY_SHARES', () => <>share(s)</>)
-                                      .with('BY_PERCENTAGE', () => <>%</>)
-                                      .with('BY_AMOUNT', () => (
-                                        <>{group.currency}</>
-                                      ))
-                                      .exhaustive()}
-                                  </span>
-                                </div>
-                              )}
+                                        })}
+                                      >
+                                        {match(form.getValues().splitMode)
+                                          .with('EVENLY', () => <></>)
+                                          .with('BY_SHARES', () => (
+                                            <>share(s)</>
+                                          ))
+                                          .with('BY_PERCENTAGE', () => <>%</>)
+                                          .with('BY_AMOUNT', () => (
+                                            <>{group.currency}</>
+                                          ))
+                                          .exhaustive()}
+                                      </span>
+                                    </div>
+                                    <FormMessage className="float-right" />
+                                  </div>
+                                )}
+                              />
+                            )}
                           </div>
                         )
                       }}
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index 72d132ee..8756f7ca 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -39,41 +39,95 @@ export const groupFormSchema = z
 
 export type GroupFormValues = z.infer<typeof groupFormSchema>
 
-export const expenseFormSchema = z.object({
-  title: z
-    .string({ required_error: 'Please enter a title.' })
-    .min(2, 'Enter at least two characters.'),
-  amount: z
-    .union(
-      [
-        z.number(),
-        z.string().transform((value, ctx) => {
-          const valueAsNumber = Number(value)
-          if (Number.isNaN(valueAsNumber))
+export const expenseFormSchema = z
+  .object({
+    title: z
+      .string({ required_error: 'Please enter a title.' })
+      .min(2, 'Enter at least two characters.'),
+    amount: z
+      .union(
+        [
+          z.number(),
+          z.string().transform((value, ctx) => {
+            const valueAsNumber = Number(value)
+            if (Number.isNaN(valueAsNumber))
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: 'Invalid number.',
+              })
+            return Math.round(valueAsNumber * 100)
+          }),
+        ],
+        { required_error: 'You must enter an amount.' },
+      )
+      .refine((amount) => amount >= 1, 'The amount must be higher than 0.01.')
+      .refine(
+        (amount) => amount <= 10_000_000_00,
+        'The amount must be lower than 10,000,000.',
+      ),
+    paidBy: z.string({ required_error: 'You must select a participant.' }),
+    paidFor: z
+      .array(
+        z.object({
+          participant: z.string(),
+          shares: z.number().int(),
+        }),
+      )
+      .min(1, 'The expense must be paid for at least one participant.')
+      .superRefine((paidFor, ctx) => {
+        let sum = 0
+        for (const { participant, shares } of paidFor) {
+          sum += shares
+          if (shares < 1) {
             ctx.addIssue({
               code: z.ZodIssueCode.custom,
-              message: 'Invalid number.',
+              message: 'All shares must be higher than 0.',
             })
-          return Math.round(valueAsNumber * 100)
-        }),
-      ],
-      { required_error: 'You must enter an amount.' },
-    )
-    .refine((amount) => amount >= 1, 'The amount must be higher than 0.01.')
-    .refine(
-      (amount) => amount <= 10_000_000_00,
-      'The amount must be lower than 10,000,000.',
-    ),
-  paidBy: z.string({ required_error: 'You must select a participant.' }),
-  paidFor: z
-    .array(z.object({ participant: z.string(), shares: z.number().int() }))
-    .min(1, 'The expense must be paid for at least one participant.'),
-  splitMode: z
-    .enum<SplitMode, [SplitMode, ...SplitMode[]]>(
-      Object.values(SplitMode) as any,
-    )
-    .default('EVENLY'),
-  isReimbursement: z.boolean(),
-})
+          }
+        }
+      }),
+    splitMode: z
+      .enum<SplitMode, [SplitMode, ...SplitMode[]]>(
+        Object.values(SplitMode) as any,
+      )
+      .default('EVENLY'),
+    isReimbursement: z.boolean(),
+  })
+  .superRefine((expense, ctx) => {
+    let sum = 0
+    for (const { participant, shares } of expense.paidFor) {
+      sum += shares
+    }
+    switch (expense.splitMode) {
+      case 'EVENLY':
+        break // noop
+      case 'BY_SHARES':
+        break // noop
+      case 'BY_AMOUNT':
+        if (sum !== expense.amount) {
+          const detail =
+            sum < expense.amount
+              ? `${expense.amount - sum} missing`
+              : `${sum - expense.amount} surplus`
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Sum of amounts must equal the expense amount (${detail}).`,
+            path: ['paidFor'],
+          })
+        }
+        break
+      case 'BY_PERCENTAGE':
+        if (sum !== 100) {
+          const detail =
+            sum < 100 ? `${100 - sum}% missing` : `${sum - 100}% surplus`
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Sum of percentages must equal 100 (${detail})`,
+            path: ['paidFor'],
+          })
+        }
+        break
+    }
+  })
 
 export type ExpenseFormValues = z.infer<typeof expenseFormSchema>