Use modal dialogs for expense creation & edition (#10)

* First attemps at using route interception and modals

* Remove route interception

* Make it work

* Use Vaul on small screens

* Improve vaul

1 files changed, 195 insertions, 193 deletions

diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index bdee9d0..0f677e6 100644
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -1,14 +1,12 @@
 'use client'
+import {
+  createExpenseAction,
+  deleteExpenseAction,
+  updateExpenseAction,
+} from '@/app/groups/[groupId]/expenses/actions'
 import { AsyncButton } from '@/components/async-button'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
 import {
   Form,
@@ -30,17 +28,15 @@ import {
 import { getExpense, getGroup } from '@/lib/api'
 import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useSearchParams } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 
 export type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
   expense?: NonNullable<Awaited<ReturnType<typeof getExpense>>>
-  onSubmit: (values: ExpenseFormValues) => Promise<void>
-  onDelete?: () => Promise<void>
 }
 
-export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
+export function ExpenseForm({ group, expense }: Props) {
   const isCreate = expense === undefined
   const searchParams = useSearchParams()
   const form = useForm<ExpenseFormValues>({
@@ -65,204 +61,210 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
         }
       : { title: '', amount: 0, paidFor: [], isReimbursement: false },
   })
+  const router = useRouter()
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit((values) => onSubmit(values))}>
-        <Card>
-          <CardHeader>
-            <CardTitle>
-              {isCreate ? <>Create expense</> : <>Edit expense</>}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem className="order-1">
-                  <FormLabel>Expense title</FormLabel>
+      <form
+        onSubmit={form.handleSubmit(async (values) => {
+          if (expense) {
+            await updateExpenseAction(group.id, expense.id, values)
+          } else {
+            await createExpenseAction(group.id, values)
+          }
+          router.back()
+        })}
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem className="order-1">
+                <FormLabel>Expense title</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Monday evening restaurant"
+                    className="text-base"
+                    {...field}
+                  />
+                </FormControl>
+                <FormDescription>
+                  Enter a description for the expense.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <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-2 sm:order-3">
+                <FormLabel>Amount</FormLabel>
+                <div className="flex items-baseline gap-2">
+                  <span>{group.currency}</span>
                   <FormControl>
                     <Input
-                      placeholder="Monday evening restaurant"
-                      className="text-base"
+                      className="text-base max-w-[120px]"
+                      type="number"
+                      inputMode="decimal"
+                      step={0.01}
+                      placeholder="0.00"
                       {...field}
                     />
                   </FormControl>
-                  <FormDescription>
-                    Enter a description for the expense.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+                </div>
+                <FormMessage />
 
-            <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>
+                <FormField
+                  control={form.control}
+                  name="isReimbursement"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row gap-2 items-center space-y-0 pt-2">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <div>
+                        <FormLabel>This is a reimbursement</FormLabel>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="paidFor"
+            render={() => (
+              <FormItem className="order-5">
+                <div className="mb-4">
+                  <FormLabel>
+                    Paid for
+                    <Button
+                      variant="link"
+                      type="button"
+                      className="-m-2"
+                      onClick={() => {
+                        const paidFor = form.getValues().paidFor
+                        const allSelected =
+                          paidFor.length === group.participants.length
+                        const newPairFor = allSelected
+                          ? []
+                          : group.participants.map((p) => p.id)
+                        form.setValue('paidFor', newPairFor, {
+                          shouldDirty: true,
+                          shouldTouch: true,
+                          shouldValidate: true,
+                        })
+                      }}
+                    >
+                      {form.getValues().paidFor.length ===
+                      group.participants.length ? (
+                        <>Select none</>
+                      ) : (
+                        <>Select all</>
+                      )}
+                    </Button>
+                  </FormLabel>
                   <FormDescription>
-                    Select the participant who paid the expense.
+                    Select who the expense was paid for.
                   </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="amount"
-              render={({ field }) => (
-                <FormItem className="order-2 sm:order-3">
-                  <FormLabel>Amount</FormLabel>
-                  <div className="flex items-baseline gap-2">
-                    <span>{group.currency}</span>
-                    <FormControl>
-                      <Input
-                        className="text-base max-w-[120px]"
-                        type="number"
-                        inputMode="decimal"
-                        step={0.01}
-                        placeholder="0.00"
-                        {...field}
-                      />
-                    </FormControl>
-                  </div>
-                  <FormMessage />
-
+                </div>
+                {group.participants.map(({ id, name }) => (
                   <FormField
+                    key={id}
                     control={form.control}
-                    name="isReimbursement"
-                    render={({ field }) => (
-                      <FormItem className="flex flex-row gap-2 items-center space-y-0 pt-2">
-                        <FormControl>
-                          <Checkbox
-                            checked={field.value}
-                            onCheckedChange={field.onChange}
-                          />
-                        </FormControl>
-                        <div>
-                          <FormLabel>This is a reimbursement</FormLabel>
-                        </div>
-                      </FormItem>
-                    )}
+                    name="paidFor"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key={id}
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes(id)}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, id])
+                                  : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== id,
+                                      ),
+                                    )
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="text-sm font-normal">
+                            {name}
+                          </FormLabel>
+                        </FormItem>
+                      )
+                    }}
                   />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="paidFor"
-              render={() => (
-                <FormItem className="order-5">
-                  <div className="mb-4">
-                    <FormLabel>
-                      Paid for
-                      <Button
-                        variant="link"
-                        type="button"
-                        className="-m-2"
-                        onClick={() => {
-                          const paidFor = form.getValues().paidFor
-                          const allSelected =
-                            paidFor.length === group.participants.length
-                          const newPairFor = allSelected
-                            ? []
-                            : group.participants.map((p) => p.id)
-                          form.setValue('paidFor', newPairFor, {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: true,
-                          })
-                        }}
-                      >
-                        {form.getValues().paidFor.length ===
-                        group.participants.length ? (
-                          <>Select none</>
-                        ) : (
-                          <>Select all</>
-                        )}
-                      </Button>
-                    </FormLabel>
-                    <FormDescription>
-                      Select who the expense was paid for.
-                    </FormDescription>
-                  </div>
-                  {group.participants.map(({ id, name }) => (
-                    <FormField
-                      key={id}
-                      control={form.control}
-                      name="paidFor"
-                      render={({ field }) => {
-                        return (
-                          <FormItem
-                            key={id}
-                            className="flex flex-row items-start space-x-3 space-y-0"
-                          >
-                            <FormControl>
-                              <Checkbox
-                                checked={field.value?.includes(id)}
-                                onCheckedChange={(checked) => {
-                                  return checked
-                                    ? field.onChange([...field.value, id])
-                                    : field.onChange(
-                                        field.value?.filter(
-                                          (value) => value !== id,
-                                        ),
-                                      )
-                                }}
-                              />
-                            </FormControl>
-                            <FormLabel className="text-sm font-normal">
-                              {name}
-                            </FormLabel>
-                          </FormItem>
-                        )
-                      }}
-                    />
-                  ))}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </CardContent>
+                ))}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
 
-          <CardFooter className="gap-2">
-            <SubmitButton
-              loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
+        <div className="mt-6 flex gap-2">
+          <SubmitButton
+            loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
+          >
+            {isCreate ? <>Create</> : <>Save</>}
+          </SubmitButton>
+          {!isCreate && (
+            <AsyncButton
+              type="button"
+              variant="destructive"
+              loadingContent="Deleting…"
+              action={async () => {
+                await deleteExpenseAction(group.id, expense.id)
+                router.back()
+              }}
             >
-              {isCreate ? <>Create</> : <>Save</>}
-            </SubmitButton>
-            {!isCreate && onDelete && (
-              <AsyncButton
-                type="button"
-                variant="destructive"
-                loadingContent="Deleting…"
-                action={onDelete}
-              >
-                Delete
-              </AsyncButton>
-            )}
-          </CardFooter>
-        </Card>
+              Delete
+            </AsyncButton>
+          )}
+        </div>
       </form>
     </Form>
   )