Use tRPC for expense form (#251)

src/app/groups/[groupId]/expenses/create/page.tsx

@@ -1,14 +1,9 @@
-import { cached } from '@/app/cached-functions'
-import { ExpenseForm } from '@/components/expense-form'
-import { createExpense, getCategories } from '@/lib/api'
+import { CreateExpenseForm } from '@/app/groups/[groupId]/expenses/create-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: 'Create expense',
+  title: 'Create Expense',
 }
 
 export default async function ExpensePage({
@@ -16,25 +11,10 @@ export default async function ExpensePage({
 }: {
   params: { groupId: string }
 }) {
-  const categories = await getCategories()
-  const group = await cached.getGroup(groupId)
-  if (!group) notFound()
-
-  async function createExpenseAction(values: unknown, participantId?: string) {
-    'use server'
-    const expenseFormValues = expenseFormSchema.parse(values)
-    await createExpense(expenseFormValues, groupId, participantId)
-    redirect(`/groups/${groupId}`)
-  }
-
   return (
-    <Suspense>
-      <ExpenseForm
-        group={group}
-        categories={categories}
-        onSubmit={createExpenseAction}
-        runtimeFeatureFlags={await getRuntimeFeatureFlags()}
-      />
-    </Suspense>
+    <CreateExpenseForm
+      groupId={groupId}
+      runtimeFeatureFlags={await getRuntimeFeatureFlags()}
+    />
   )
 }