Use tRPC for expense form (#251)

src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx

@@ -1,19 +1,9 @@
-import { cached } from '@/app/cached-functions'
-import { ExpenseForm } from '@/components/expense-form'
-import {
-  deleteExpense,
-  getCategories,
-  getExpense,
-  updateExpense,
-} from '@/lib/api'
+import { EditExpenseForm } from '@/app/groups/[groupId]/expenses/edit-expense-form'
 import { getRuntimeFeatureFlags } from '@/lib/featureFlags'
-import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'
-import { Suspense } from 'react'
 
 export const metadata: Metadata = {
-  title: 'Edit expense',
+  title: 'Edit Expense',
 }
 
 export default async function EditExpensePage({
@@ -21,35 +11,11 @@ export default async function EditExpensePage({
 }: {
   params: { groupId: string; expenseId: string }
 }) {
-  const categories = await getCategories()
-  const group = await cached.getGroup(groupId)
-  if (!group) notFound()
-  const expense = await getExpense(groupId, expenseId)
-  if (!expense) notFound()
-
-  async function updateExpenseAction(values: unknown, participantId?: string) {
-    'use server'
-    const expenseFormValues = expenseFormSchema.parse(values)
-    await updateExpense(groupId, expenseId, expenseFormValues, participantId)
-    redirect(`/groups/${groupId}`)
-  }
-
-  async function deleteExpenseAction(participantId?: string) {
-    'use server'
-    await deleteExpense(groupId, expenseId, participantId)
-    redirect(`/groups/${groupId}`)
-  }
-
   return (
-    <Suspense>
-      <ExpenseForm
-        group={group}
-        expense={expense}
-        categories={categories}
-        onSubmit={updateExpenseAction}
-        onDelete={deleteExpenseAction}
-        runtimeFeatureFlags={await getRuntimeFeatureFlags()}
-      />
-    </Suspense>
+    <EditExpenseForm
+      groupId={groupId}
+      expenseId={expenseId}
+      runtimeFeatureFlags={await getRuntimeFeatureFlags()}
+    />
   )
 }