Use tRPC for group create form (#250)

src/app/groups/[groupId]/edit/edit-group.tsx

@@ -5,16 +5,9 @@ import { trpc } from '@/trpc/client'
 
 export const EditGroup = ({ groupId }: { groupId: string }) => {
   const { data, isLoading } = trpc.groups.get.useQuery({ groupId })
-  const { mutateAsync, isPending } = trpc.groups.update.useMutation()
+  const { mutateAsync } = trpc.groups.update.useMutation()
   const utils = trpc.useUtils()
 
-  // async function updateGroupAction(values: unknown, participantId?: string) {
-  //   'use server'
-  //   const groupFormValues = groupFormSchema.parse(values)
-  //   const group = await updateGroup(groupId, groupFormValues, participantId)
-  //   redirect(`/groups/${group.id}`)
-  // }
-
   if (isLoading) return <></>
 
   return (

src/app/groups/[groupId]/information/group-information.tsx

@@ -40,10 +40,10 @@ export default function GroupInformation({ groupId }: { groupId: string }) {
               <Skeleton className="h-3 w-3/4" />
               <Skeleton className="h-3 w-1/2" />
             </div>
+          ) : data.group.information ? (
+            <p className="text-foreground">{data.group.information}</p>
           ) : (
-            data.group.information || (
-              <p className="text-muted-foreground text-sm">{t('empty')}</p>
-            )
+            <p className="text-muted-foreground text-sm">{t('empty')}</p>
           )}
         </CardContent>
       </Card>

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 />
 }

src/trpc/routers/groups/create.procedure.ts

@@ -0,0 +1,15 @@
+import { createGroup } from '@/lib/api'
+import { groupFormSchema } from '@/lib/schemas'
+import { baseProcedure } from '@/trpc/init'
+import { z } from 'zod'
+
+export const createGroupProcedure = baseProcedure
+  .input(
+    z.object({
+      groupFormValues: groupFormSchema,
+    }),
+  )
+  .mutation(async ({ input: { groupFormValues } }) => {
+    const group = await createGroup(groupFormValues)
+    return { groupId: group.id }
+  })

src/trpc/routers/groups/index.ts

@@ -1,6 +1,7 @@
 import { createTRPCRouter } from '@/trpc/init'
 import { activitiesRouter } from '@/trpc/routers/groups/activities'
 import { groupBalancesRouter } from '@/trpc/routers/groups/balances'
+import { createGroupProcedure } from '@/trpc/routers/groups/create.procedure'
 import { groupExpensesRouter } from '@/trpc/routers/groups/expenses'
 import { getGroupProcedure } from '@/trpc/routers/groups/get.procedure'
 import { groupStatsRouter } from '@/trpc/routers/groups/stats'
@@ -13,5 +14,6 @@ export const groupsRouter = createTRPCRouter({
   activities: activitiesRouter,
 
   get: getGroupProcedure,
+  create: createGroupProcedure,
   update: updateGroupProcedure,
 })