Use tRPC for recent groups page (#253)

* Use tRPC for recent groups page

* Use tRPC for adding group by URL

* Use tRPC for saving visited group

* Group context

src/app/groups/[groupId]/stats/page.client.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/components/ui/card'
 import { useTranslations } from 'next-intl'
 
-export function TotalsPageClient({ groupId }: { groupId: string }) {
+export function TotalsPageClient() {
   const t = useTranslations('Stats')
 
   return (
@@ -19,7 +19,7 @@ export function TotalsPageClient({ groupId }: { groupId: string }) {
           <CardDescription>{t('Totals.description')}</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col space-y-4">
-          <Totals groupId={groupId} />
+          <Totals />
         </CardContent>
       </Card>
     </>

src/app/groups/[groupId]/stats/page.tsx

@@ -5,10 +5,6 @@ export const metadata: Metadata = {
   title: 'Totals',
 }
 
-export default async function TotalsPage({
-  params: { groupId },
-}: {
-  params: { groupId: string }
-}) {
-  return <TotalsPageClient groupId={groupId} />
+export default async function TotalsPage() {
+  return <TotalsPageClient />
 }

src/app/groups/[groupId]/stats/totals.tsx

@@ -5,16 +5,17 @@ import { TotalsYourSpendings } from '@/app/groups/[groupId]/stats/totals-your-sp
 import { Skeleton } from '@/components/ui/skeleton'
 import { useActiveUser } from '@/lib/hooks'
 import { trpc } from '@/trpc/client'
+import { useCurrentGroup } from '../current-group-context'
 
-export function Totals({ groupId }: { groupId: string }) {
+export function Totals() {
+  const { groupId, group } = useCurrentGroup()
   const activeUser = useActiveUser(groupId)
 
   const participantId =
     activeUser && activeUser !== 'None' ? activeUser : undefined
   const { data } = trpc.groups.stats.get.useQuery({ groupId, participantId })
-  const { data: groupData } = trpc.groups.get.useQuery({ groupId })
 
-  if (!data || !groupData)
+  if (!data || !group)
     return (
       <div className="flex flex-col gap-7">
         {[0, 1, 2].map((index) => (
@@ -31,7 +32,6 @@ export function Totals({ groupId }: { groupId: string }) {
     totalParticipantShare,
     totalParticipantSpendings,
   } = data
-  const { group } = groupData
 
   return (
     <>