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]/layout.client.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/trpc/client'
+import { useTranslations } from 'next-intl'
+import { PropsWithChildren, useEffect } from 'react'
+import { CurrentGroupProvider } from './current-group-context'
+import { GroupHeader } from './group-header'
+import { SaveGroupLocally } from './save-recent-group'
+
+export function GroupLayoutClient({
+  groupId,
+  children,
+}: PropsWithChildren<{ groupId: string }>) {
+  const { data, isLoading } = trpc.groups.get.useQuery({ groupId })
+  const t = useTranslations('Groups.NotFound')
+  const { toast } = useToast()
+
+  useEffect(() => {
+    if (data && !data.group) {
+      toast({
+        description: t('text'),
+        variant: 'destructive',
+      })
+    }
+  }, [data])
+
+  const props =
+    isLoading || !data?.group
+      ? { isLoading: true as const, groupId, group: undefined }
+      : { isLoading: false as const, groupId, group: data.group }
+
+  if (isLoading) {
+    return (
+      <CurrentGroupProvider {...props}>
+        <GroupHeader />
+        {children}
+      </CurrentGroupProvider>
+    )
+  }
+
+  return (
+    <CurrentGroupProvider {...props}>
+      <GroupHeader />
+      {children}
+      <SaveGroupLocally />
+    </CurrentGroupProvider>
+  )
+}