From 72fe19987957e78cbd1d97ccfd8b87d85fea5c88 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Wed, 6 Dec 2023 15:23:18 -0500
Subject: Add currency

---
 src/app/groups/[groupId]/page.tsx |  4 ++--
 src/components/expense-form.tsx   | 23 +++++++++++++----------
 src/components/group-form.tsx     | 26 +++++++++++++++++++++++++-
 src/lib/api.ts                    |  2 ++
 src/lib/schemas.ts                |  4 ++++
 5 files changed, 46 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/app/groups/[groupId]/page.tsx b/src/app/groups/[groupId]/page.tsx
index b7dc93f..83fc3ef 100644
--- a/src/app/groups/[groupId]/page.tsx
+++ b/src/app/groups/[groupId]/page.tsx
@@ -86,8 +86,8 @@ export default async function GroupPage({
                         </Badge>
                       ))}
                     </TableCell>
-                    <TableCell className="text-right tabular-nums">
-                      $&nbsp;{expense.amount.toFixed(2)}
+                    <TableCell className="text-right tabular-nums whitespace-nowrap">
+                      {group.currency} {expense.amount.toFixed(2)}
                     </TableCell>
                     <TableCell>
                       <Button
diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index 3202788..6420bc6 100644
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -118,16 +118,19 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
               render={({ field }) => (
                 <FormItem className="order-2 sm:order-3">
                   <FormLabel>Amount</FormLabel>
-                  <FormControl>
-                    <Input
-                      className="text-base"
-                      type="number"
-                      min={0.01}
-                      step={0.01}
-                      placeholder="0.00"
-                      {...field}
-                    />
-                  </FormControl>
+                  <div className="flex items-baseline gap-2">
+                    <span>{group.currency}</span>
+                    <FormControl>
+                      <Input
+                        className="text-base max-w-[120px]"
+                        type="number"
+                        min={0.01}
+                        step={0.01}
+                        placeholder="0.00"
+                        {...field}
+                      />
+                    </FormControl>
+                  </div>
                   <FormDescription>Enter the expense amount.</FormDescription>
                   <FormMessage />
                 </FormItem>
diff --git a/src/components/group-form.tsx b/src/components/group-form.tsx
index 2e21aea..1057f27 100644
--- a/src/components/group-form.tsx
+++ b/src/components/group-form.tsx
@@ -36,10 +36,12 @@ export function GroupForm({ group, onSubmit }: Props) {
     defaultValues: group
       ? {
           name: group.name,
+          currency: group.currency,
           participants: group.participants,
         }
       : {
           name: '',
+          currency: '',
           participants: [{ name: 'John' }, { name: 'Jane' }, { name: 'Jack' }],
         },
   })
@@ -60,7 +62,7 @@ export function GroupForm({ group, onSubmit }: Props) {
           <CardHeader>
             <CardTitle>Group information</CardTitle>
           </CardHeader>
-          <CardContent>
+          <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <FormField
               control={form.control}
               name="name"
@@ -81,6 +83,28 @@ export function GroupForm({ group, onSubmit }: Props) {
                 </FormItem>
               )}
             />
+
+            <FormField
+              control={form.control}
+              name="currency"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Currency symbol</FormLabel>
+                  <FormControl>
+                    <Input
+                      className="text-base"
+                      placeholder="$, €, £…"
+                      max={5}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    We’ll used it to display amounts.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
           </CardContent>
         </Card>
         <Card>
diff --git a/src/lib/api.ts b/src/lib/api.ts
index ed3acb1..4fd4c39 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -9,6 +9,7 @@ export async function createGroup(groupFormValues: GroupFormValues) {
     data: {
       id: uuidv4(),
       name: groupFormValues.name,
+      currency: groupFormValues.currency,
       participants: {
         createMany: {
           data: groupFormValues.participants.map(({ name }) => ({
@@ -120,6 +121,7 @@ export async function updateGroup(
     where: { id: groupId },
     data: {
       name: groupFormValues.name,
+      currency: groupFormValues.currency,
       participants: {
         deleteMany: existingGroup.participants.filter(
           (p) => !groupFormValues.participants.some((p2) => p2.id === p.id),
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index 0219491..6f0c15c 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -6,6 +6,10 @@ export const groupFormSchema = z
       .string()
       .min(2, 'Enter at least two characters.')
       .max(50, 'Enter at most 50 characters.'),
+    currency: z
+      .string()
+      .min(1, 'Enter at least one character.')
+      .max(5, 'Enter at most five characters.'),
     participants: z
       .array(
         z.object({
-- 
cgit v1.3