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]/activity/activity-list.tsx

@@ -9,6 +9,7 @@ import dayjs, { type Dayjs } from 'dayjs'
 import { useTranslations } from 'next-intl'
 import { forwardRef, useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
+import { useCurrentGroup } from '../current-group-context'
 
 const PAGE_SIZE = 20
 
@@ -82,11 +83,9 @@ const ActivitiesLoading = forwardRef<HTMLDivElement>((_, ref) => {
 })
 ActivitiesLoading.displayName = 'ActivitiesLoading'
 
-export function ActivityList({ groupId }: { groupId: string }) {
+export function ActivityList() {
   const t = useTranslations('Activity')
-
-  const { data: groupData, isLoading: groupIsLoading } =
-    trpc.groups.get.useQuery({ groupId })
+  const { group, groupId } = useCurrentGroup()
 
   const {
     data: activitiesData,
@@ -105,7 +104,7 @@ export function ActivityList({ groupId }: { groupId: string }) {
     if (inView && hasMore && !isLoading) fetchNextPage()
   }, [fetchNextPage, hasMore, inView, isLoading])
 
-  if (isLoading || !activities || !groupData) return <ActivitiesLoading />
+  if (isLoading || !activities || !group) return <ActivitiesLoading />
 
   const groupedActivitiesByDate = getGroupedActivitiesByDate(activities)
 
@@ -131,7 +130,7 @@ export function ActivityList({ groupId }: { groupId: string }) {
             {groupActivities.map((activity) => {
               const participant =
                 activity.participantId !== null
-                  ? groupData.group.participants.find(
+                  ? group.participants.find(
                       (p) => p.id === activity.participantId,
                     )
                   : undefined

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

@@ -13,7 +13,7 @@ export const metadata: Metadata = {
   title: 'Activity',
 }
 
-export function ActivityPageClient({ groupId }: { groupId: string }) {
+export function ActivityPageClient() {
   const t = useTranslations('Activity')
 
   return (
@@ -24,7 +24,7 @@ export function ActivityPageClient({ groupId }: { groupId: string }) {
           <CardDescription>{t('description')}</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col space-y-4">
-          <ActivityList groupId={groupId} />
+          <ActivityList />
         </CardContent>
       </Card>
     </>

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

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