feat(ui): use dynamic group routes

apps/client/src/app/dashboard/page.tsx → apps/client/src/app/[groupId]/page.tsx

@@ -1,14 +1,17 @@
 'use client'
 import { CreateQuestionModal } from 'client/c/CreateQuestionModal'
+import { ExternalLink } from 'client/c/ExternalLink'
 import { Loader } from 'client/c/Loader'
 import { YNQuestionCard } from 'client/c/QuestionCard/YN'
+import { clientConfig } from 'client/l/config'
 import { trpc } from 'client/l/trpc'
+import { ExternalLinkIcon } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import type { Question } from 'server/questions/entities'
 
-export default function Dashboard() {
+export default function Dashboard({ params: { groupId } }: { params: { groupId: string } }) {
   const [questions, setQuestions] = useState<Question[]>([])
-  const { data, isLoading } = trpc.questions.findAll.useQuery()
+  const { data, isLoading } = trpc.questions.findAll.useQuery({ groupId })
 
   useEffect(() => {
     if (data !== undefined) setQuestions(data)
@@ -28,11 +31,14 @@ export default function Dashboard() {
   if (isLoading || questions === undefined) return <Loader />
 
   return (
-    <div>
-      <div className='flex items-center mb-4'>
-        <h2 className='text-xl font-semibold flex-grow text-center'>Questions</h2>
-        <CreateQuestionModal />
-      </div>
+    <div className='flex flex-col justify-center items-center space-y-4'>
+      <ExternalLink href={`${clientConfig.bandada.appUrl}/groups/off-chain/${groupId}`}>
+        <div className='flex flex-row items-center space-x-2'>
+          <ExternalLinkIcon size={20} />
+          <div>Bandada Group</div>
+        </div>
+      </ExternalLink>
+      <CreateQuestionModal />
       <div className='overflow-y-auto max-h-[calc(100vh-12rem)] space-y-4'>
         {questions.map((question) => (
           <YNQuestionCard

apps/client/src/app/page.tsx

@@ -4,30 +4,18 @@ import { Loader } from 'client/c/Loader'
 import { LoginForm } from 'client/c/LoginForm'
 import { useAuth } from 'client/h/useAuth'
 import { useAuthState } from 'client/h/useAuthState'
+import { clientConfig } from 'client/l/config'
+import { useRouter } from 'next/navigation'
 
 export default function Home() {
   const { state } = useAuthState()
-  const { isInitializing, logout, user } = useAuth()
+  const { isInitializing, user } = useAuth()
   const { error } = useAuthenticate()
+  const router = useRouter()
 
-  if (user !== null) {
-    return (
-      <div>
-        You're logged in as {user.email}
-        <button
-          onClick={() => {
-            logout()
-          }}
-          type='button'
-        >
-          Logout
-        </button>
-      </div>
-    )
-  }
+  if (user !== null) router.push(`/${clientConfig.bandada.pseGroupId}`)
   if (error !== null) return <div>{error.message}</div>
   if (state.emailSent === true) return <div>Check your emails</div>
   if (isInitializing) return <Loader />
-
   return <LoginForm />
 }

apps/client/src/components/Header.tsx

@@ -1,10 +1,8 @@
 'use client'
 import Image from 'next/image'
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
 
 export const Header = () => {
-  const pathname = usePathname()
   return (
     <header className='p-4'>
       <ul className='flex items-center justify-between'>
@@ -14,11 +12,6 @@ export const Header = () => {
             <span className='text-4xl'>RIDEAU</span>
           </Link>
         </li>
-        {pathname.endsWith('/dashboard') === false && (
-          <li>
-            <Link href='/dashboard'>Dashboard</Link>
-          </li>
-        )}
       </ul>
     </header>
   )

apps/client/src/lib/config.ts

@@ -5,6 +5,7 @@ import { merge } from 'ts-deepmerge'
 
 interface ClientConfigI {
   alchemy: { supportUrl: string }
+  bandada: { appUrl: string }
   metadata: Metadata
   // TODO: move default config to server?
   semaphore: { fingerprintDuration: number; treeDepth: number; localStorageKey: string }
@@ -18,6 +19,7 @@ isEnvVarDefined(serverUrl, 'NEXT_PUBLIC_SERVER_URL')
 
 const _clientConfig: ClientConfigI = {
   alchemy: { supportUrl: 'gauthier@pse.dev' },
+  bandada: { appUrl: 'https://app.bandada.pse.dev' },
   semaphore: {
     fingerprintDuration: ONE_HOUR_S,
     localStorageKey: 'semaphore-id',

apps/server/src/questions/dto/find-all-questions.dto.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod'
+
+export const FindAllQuestionDto = z.object({
+  groupId: z.string().min(1), // TODO: stricter validation
+})

apps/server/src/questions/dto/index.ts

@@ -0,0 +1,2 @@
+export * from './create-question.dto'
+export * from './find-all-questions.dto'

apps/server/src/questions/questions.router.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@nestjs/common'
 import { on } from 'node:events'
+import { CreateQuestionDto, FindAllQuestionDto } from 'server/questions/dto'
+import { Question } from 'server/questions/entities'
+import { QuestionsService } from 'server/questions/questions.service'
 import { TrpcService } from 'server/trpc/trpc.service'
-import { CreateQuestionDto } from './dto/create-question.dto'
-import { Question } from './entities'
-import { QuestionsService } from './questions.service'
 
 @Injectable()
 export class QuestionsRouter {
@@ -14,7 +14,9 @@ export class QuestionsRouter {
 
   router = this.trpc.router({
     create: this.trpc.procedure.input(CreateQuestionDto).mutation(async ({ input }) => this.questions.create(input)),
-    findAll: this.trpc.procedure.query(async () => this.questions.findAll()),
+    findAll: this.trpc.procedure.input(FindAllQuestionDto).query(async ({ input: { groupId } }) =>
+      this.questions.findAll(groupId)
+    ),
     // TODO: validate output/payload https://trpc.io/docs/server/subscriptions#output-validation
     onChange: this.trpc.procedure
       .subscription(async function*({ ctx: { events }, signal }) {

apps/server/src/questions/questions.service.ts

@@ -17,8 +17,11 @@ export class QuestionsService implements OnModuleInit {
     return this.supabase.from(this.resource).insert<QuestionInsert>(createQuestionDto)
   }
 
-  async findAll() {
-    const { data } = await this.supabase.from(this.resource).select().order('created_at', { ascending: false }).returns<
+  async findAll(groupId: string) {
+    const { data } = await this.supabase.from(this.resource).select<string>().eq('group_id', groupId).order(
+      'created_at',
+      { ascending: false },
+    ).returns<
       Question[]
     >()
     return data ?? []