Delete expense

src/components/async-button.tsx

@@ -0,0 +1,42 @@
+'use client'
+import { Button, ButtonProps } from '@/components/ui/button'
+import { Loader2 } from 'lucide-react'
+import { ReactNode, useState } from 'react'
+
+type Props = ButtonProps & {
+  action?: () => Promise<void>
+  loadingContent?: ReactNode
+}
+
+export function AsyncButton({
+  action,
+  children,
+  loadingContent,
+  ...props
+}: Props) {
+  const [loading, setLoading] = useState(false)
+  return (
+    <Button
+      onClick={async () => {
+        try {
+          setLoading(true)
+          await action?.()
+        } catch (err) {
+          console.error(err)
+        } finally {
+          setLoading(false)
+        }
+      }}
+      {...props}
+    >
+      {loading ? (
+        <>
+          <Loader2 className="w-4 h-4 mr-2 animate-spin" />{' '}
+          {loadingContent ?? children}
+        </>
+      ) : (
+        children
+      )}
+    </Button>
+  )
+}

src/components/expense-form.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { AsyncButton } from '@/components/async-button'
 import { SubmitButton } from '@/components/submit-button'
 import {
   Card,
@@ -33,10 +34,12 @@ import { useForm } from 'react-hook-form'
 export type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
   expense?: NonNullable<Awaited<ReturnType<typeof getExpense>>>
-  onSubmit: (values: ExpenseFormValues) => void
+  onSubmit: (values: ExpenseFormValues) => Promise<void>
+  onDelete?: () => Promise<void>
 }
 
-export function ExpenseForm({ group, expense, onSubmit }: Props) {
+export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
+  const isCreate = expense === undefined
   const form = useForm<ExpenseFormValues>({
     resolver: zodResolver(expenseFormSchema),
     defaultValues: expense
@@ -54,7 +57,9 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
       <form onSubmit={form.handleSubmit((values) => onSubmit(values))}>
         <Card>
           <CardHeader>
-            <CardTitle>Expense information</CardTitle>
+            <CardTitle>
+              {isCreate ? <>Create expense</> : <>Edit expense</>}
+            </CardTitle>
           </CardHeader>
           <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6">
             <FormField
@@ -179,8 +184,20 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
             />
           </CardContent>
 
-          <CardFooter>
-            <SubmitButton loadingContent="Submitting…">Submit</SubmitButton>
+          <CardFooter className="gap-2">
+            <SubmitButton loadingContent="Submitting…">
+              {isCreate ? <>Create</> : <>Save</>}
+            </SubmitButton>
+            {!isCreate && onDelete && (
+              <AsyncButton
+                type="button"
+                variant="destructive"
+                loadingContent="Deleting…"
+                action={onDelete}
+              >
+                Delete
+              </AsyncButton>
+            )}
           </CardFooter>
         </Card>
       </form>

src/components/group-form.tsx

@@ -22,6 +22,7 @@ import { Input } from '@/components/ui/input'
 import { getGroup } from '@/lib/api'
 import { GroupFormValues, groupFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { Trash2 } from 'lucide-react'
 import { useFieldArray, useForm } from 'react-hook-form'
 
 export type Props = {
@@ -105,11 +106,13 @@ export function GroupForm({ group, onSubmit }: Props) {
                           <div className="flex gap-2">
                             <Input className="text-base" {...field} />
                             <Button
-                              variant="destructive"
+                              variant="ghost"
+                              className="text-destructive"
                               onClick={() => remove(index)}
                               type="button"
+                              size="icon"
                             >
-                              Remove
+                              <Trash2 className="w-4 h-4" />
                             </Button>
                           </div>
                         </FormControl>

src/components/submit-button.tsx

@@ -1,16 +1,16 @@
-import { Button } from '@/components/ui/button'
+import { Button, ButtonProps } from '@/components/ui/button'
 import { Loader2 } from 'lucide-react'
-import { PropsWithChildren, ReactNode } from 'react'
+import { ReactNode } from 'react'
 import { useFormState } from 'react-hook-form'
 
-type Props = PropsWithChildren<{
+type Props = {
   loadingContent: ReactNode
-}>
+} & ButtonProps
 
-export function SubmitButton({ children, loadingContent }: Props) {
+export function SubmitButton({ children, loadingContent, ...props }: Props) {
   const { isSubmitting } = useFormState()
   return (
-    <Button type="submit" disabled={isSubmitting}>
+    <Button type="submit" disabled={isSubmitting} {...props}>
       {isSubmitting ? (
         <>
           <Loader2 className="w-4 h-4 mr-2 animate-spin" /> {loadingContent}