Use tRPC for group create form (#250)

src/app/groups/create/create-group.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { GroupForm } from '@/components/group-form'
+import { trpc } from '@/trpc/client'
+import { useRouter } from 'next/navigation'
+
+export const CreateGroup = () => {
+  const { mutateAsync } = trpc.groups.create.useMutation()
+  const utils = trpc.useUtils()
+  const router = useRouter()
+
+  return (
+    <GroupForm
+      onSubmit={async (groupFormValues) => {
+        const { groupId } = await mutateAsync({ groupFormValues })
+        await utils.groups.invalidate()
+        router.push(`/groups/${groupId}`)
+      }}
+    />
+  )
+}

src/app/groups/create/page.tsx

@@ -1,15 +1,10 @@
-import { GroupForm } from '@/components/group-form'
-import { createGroup } from '@/lib/api'
-import { groupFormSchema } from '@/lib/schemas'
-import { redirect } from 'next/navigation'
+import { CreateGroup } from '@/app/groups/create/create-group'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Create Group',
+}
 
 export default function CreateGroupPage() {
-  async function createGroupAction(values: unknown) {
-    'use server'
-    const groupFormValues = groupFormSchema.parse(values)
-    const group = await createGroup(groupFormValues)
-    redirect(`/groups/${group.id}`)
-  }
-
-  return <GroupForm onSubmit={createGroupAction} />
+  return <CreateGroup />
 }