Use tRPC for expense form (#251)

src/app/groups/[groupId]/expenses/edit-expense-form.tsx

@@ -0,0 +1,65 @@
+'use client'
+import { RuntimeFeatureFlags } from '@/lib/featureFlags'
+import { trpc } from '@/trpc/client'
+import { useRouter } from 'next/navigation'
+import { ExpenseForm } from './expense-form'
+
+export function EditExpenseForm({
+  groupId,
+  expenseId,
+  runtimeFeatureFlags,
+}: {
+  groupId: string
+  expenseId: string
+  runtimeFeatureFlags: RuntimeFeatureFlags
+}) {
+  const { data: groupData } = trpc.groups.get.useQuery({ groupId })
+  const group = groupData?.group
+
+  const { data: categoriesData } = trpc.categories.list.useQuery()
+  const categories = categoriesData?.categories
+
+  const { data: expenseData } = trpc.groups.expenses.get.useQuery({
+    groupId,
+    expenseId,
+  })
+  const expense = expenseData?.expense
+
+  const { mutateAsync: updateExpenseMutateAsync } =
+    trpc.groups.expenses.update.useMutation()
+  const { mutateAsync: deleteExpenseMutateAsync } =
+    trpc.groups.expenses.delete.useMutation()
+
+  const utils = trpc.useUtils()
+  const router = useRouter()
+
+  if (!group || !categories || !expense) return null
+
+  return (
+    <ExpenseForm
+      group={group}
+      expense={expense}
+      categories={categories}
+      onSubmit={async (expenseFormValues, participantId) => {
+        await updateExpenseMutateAsync({
+          expenseId,
+          groupId,
+          expenseFormValues,
+          participantId,
+        })
+        utils.groups.expenses.invalidate()
+        router.push(`/groups/${group.id}`)
+      }}
+      onDelete={async (participantId) => {
+        await deleteExpenseMutateAsync({
+          expenseId,
+          groupId,
+          participantId,
+        })
+        utils.groups.expenses.invalidate()
+        router.push(`/groups/${group.id}`)
+      }}
+      runtimeFeatureFlags={runtimeFeatureFlags}
+    />
+  )
+}