feat: set question to (in)active (#86)

* feat: add `author` column to `questions`

* feat: define question page

* feat(client): set question to inactive

.biome.jsonc

@@ -60,6 +60,7 @@
         "apps/client/src/hooks/useIdentity.ts",
         "apps/client/src/hooks/useSendFeedback.ts",
         "apps/client/src/components/withAuth.tsx",
+        "apps/client/src/app/[groupId]/[questionId]/page.tsx",
       ],
       "linter": { "rules": { "correctness": { "useExhaustiveDependencies": "off" } } },
     },
@@ -73,7 +74,11 @@
       "linter": { "rules": { "style": { "noDefaultExport": "off" } } },
     },
     {
-      "include": ["apps/client/src/app/layout.tsx", "apps/client/src/app/[groupId]/page.tsx"],
+      "include": [
+        "apps/client/src/app/layout.tsx",
+        "apps/client/src/app/[groupId]/page.tsx",
+        "apps/client/src/app/[groupId]/[questionId]/page.tsx",
+      ],
       "linter": { "rules": { "nursery": { "useComponentExportOnlyModules": "off" } } },
     },
   ],

apps/client/src/app/[groupId]/[questionId]/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+import { useUser } from '@account-kit/react'
+import { Loader } from 'client/c/Loader'
+import { withAuth } from 'client/components/withAuth'
+import { trpc } from 'client/l/trpc'
+import { useEffect } from 'react'
+
+const QuestionDetails = ({ params: { questionId: questionIdStr } }: { params: { questionId: string } }) => {
+  const questionId = Number.parseInt(questionIdStr)
+  const user = useUser()
+  const { mutate: toggle, isPending } = trpc.questions.toggle.useMutation()
+  const { data: question, isLoading, refetch } = trpc.questions.find.useQuery({ questionId }, {
+    select: ({ data }) => data,
+  })
+
+  useEffect(() => {
+    refetch()
+  }, [isPending])
+
+  if (isLoading || question === undefined || question === null) return <Loader />
+  return (
+    <div>
+      <h1 className='text-2xl'>{question.title}</h1>
+      <p>yes: {question.yes}</p>
+      <p>no: {question.no}</p>
+      {user?.email === question.author && (
+        <button
+          type='button'
+          onClick={() => {
+            toggle({ active: !question.active, questionId })
+          }}
+        >
+          Set {question.active ? 'Ina' : 'A'}ctive
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default withAuth(QuestionDetails)

apps/client/src/components/CreateQuestionForm.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { useUser } from '@account-kit/react'
 import { useForm } from '@tanstack/react-form'
 import { zodValidator } from '@tanstack/zod-form-adapter'
 import { clientConfig } from 'client/l/config'
@@ -10,10 +11,12 @@ interface CreateQuestionFormProps {
   onClose: () => void
 }
 export const CreateQuestionForm: FC<CreateQuestionFormProps> = ({ onClose }) => {
+  const user = useUser()
   const form = useForm({
     defaultValues: { title: '' },
     onSubmit: ({ value: { title } }) => {
-      createQuestion({ groupId: clientConfig.bandada.pseGroupId, title })
+      if (user?.email === undefined) throw new Error('User not found')
+      createQuestion({ author: user.email, groupId: clientConfig.bandada.pseGroupId, title })
     },
     validatorAdapter: zodValidator(),
     validators: { onChange: CreateQuestionDto.pick({ title: true }) },

apps/client/src/components/QuestionCard/YN/YNQuestionStatus.tsx

@@ -1,20 +1,18 @@
-import { Equal, Hourglass, ThumbsDown, ThumbsUp } from 'lucide-react'
+import { Equal, ThumbsDown, ThumbsUp } from 'lucide-react'
 import type { FC } from 'react'
 
 interface YNQuestionStatusProps {
-  active: boolean
   no: number
   size: number
   yes: number
 }
 
-export const YNQuestionStatus: FC<YNQuestionStatusProps> = ({ active, no, size, yes }) => {
+export const YNQuestionStatus: FC<YNQuestionStatusProps> = ({ no, size, yes }) => {
   const hasVotes = (yes + no) > 0
   const hasMoreYes = yes > no && hasVotes
   const hasMoreNo = no > yes && hasVotes
   const draw = yes === no && hasVotes
 
-  if (active) return <Hourglass size={size} />
   if (hasMoreYes) return <ThumbsUp className='text-green-500' size={size} />
   if (hasMoreNo) return <ThumbsDown className='text-red-500' size={size} />
   if (draw) return <Equal className='text-gray-500' size={size} />

apps/client/src/components/QuestionCard/YN/index.tsx

@@ -1,6 +1,7 @@
 import { YNQuestionStatus } from 'client/c/QuestionCard/YN/YNQuestionStatus'
 import { useSendFeedback } from 'client/h/useSendFeedback'
 import { ThumbsDown, ThumbsUp } from 'lucide-react'
+import Link from 'next/link'
 import type { FC } from 'react'
 import type { Question } from 'server/questions/entities'
 
@@ -31,29 +32,46 @@ export const YNQuestionCard: FC<Question> = ({
       style={{ backgroundColor: '#fffae3', borderColor: '#5d576b', borderStyle: 'solid', borderWidth: '2px' }}
     >
       <div className='flex flex-row justify-between space-x-4 mb-2'>
-        <h3 className='text-xl font-bold mb-2'>{title}</h3>
-        <YNQuestionStatus active={active} yes={yes} no={no} size={20} />
+        <Link href={`${groupId}/${questionId.toString()}`}>
+          <h3 className='text-xl font-bold mb-2'>{title}</h3>
+        </Link>
+        <YNQuestionStatus yes={yes} no={no} size={20} />
       </div>
       <div className='flex justify-center items-center text-gray-600'>
-        <button
-          className='mr-2'
-          type='button'
-          onClick={() => {
-            sendFeedback(true)
-          }}
-          disabled={isSending}
-        >
-          {yes} <ThumbsUp className='inline-block' size={20} />
-        </button>
-        <button
-          type='button'
-          disabled={isSending}
-          onClick={() => {
-            sendFeedback(false)
-          }}
-        >
-          {no} <ThumbsDown className='inline-block' size={20} />
-        </button>
+        {active
+          ? (
+            <>
+              <button
+                className='mr-2'
+                type='button'
+                onClick={() => {
+                  sendFeedback(true)
+                }}
+                disabled={isSending}
+              >
+                {yes} <ThumbsUp className='inline-block' size={20} />
+              </button>
+              <button
+                type='button'
+                disabled={isSending}
+                onClick={() => {
+                  sendFeedback(false)
+                }}
+              >
+                {no} <ThumbsDown className='inline-block' size={20} />
+              </button>
+            </>
+          )
+          : (
+            <div className='flex space-x-4'>
+              <div>
+                {yes} <ThumbsUp className='inline-block' size={20} />
+              </div>
+              <div>
+                {no} <ThumbsDown className='inline-block' size={20} />
+              </div>
+            </div>
+          )}
       </div>
     </div>
   )

apps/server/src/questions/dto/create-question.dto.ts

@@ -1,6 +1,7 @@
 import { z } from 'zod'
 
 export const CreateQuestionDto = z.object({
+  author: z.string().email(),
   groupId: z.string().min(1, { message: 'Group ID cannot be empty' }),
   title: z.string().min(10, { message: 'Title must be at least 10 characters long' }).includes('?', {
     message: 'Title must include a question mark',

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

@@ -1,3 +1,4 @@
 export * from './create-question.dto'
 export * from './find-all-questions.dto'
 export * from './find-question.dto'
+export * from './toggle-question.dto'

apps/server/src/questions/dto/toggle-question.dto.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod'
+
+export const ToggleQuestionDto = z.object({
+  active: z.boolean(),
+  questionId: z.number().positive(),
+})
+
+export type ToggleQuestionDto = z.infer<typeof ToggleQuestionDto>

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

@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common'
 import { on } from 'node:events'
-import { CreateQuestionDto, FindAllQuestionsDto } from 'server/questions/dto'
+import { CreateQuestionDto, FindAllQuestionsDto, FindQuestionDto, ToggleQuestionDto } from 'server/questions/dto'
 import { Question } from 'server/questions/entities'
 import { QuestionsService } from 'server/questions/questions.service'
 import { TrpcService } from 'server/trpc/trpc.service'
@@ -14,6 +14,7 @@ export class QuestionsRouter {
 
   router = this.trpc.router({
     create: this.trpc.procedure.input(CreateQuestionDto).mutation(async ({ input }) => this.questions.create(input)),
+    find: this.trpc.procedure.input(FindQuestionDto).query(async ({ input }) => this.questions.find(input)),
     findAll: this.trpc.procedure.input(FindAllQuestionsDto).query(async ({ input }) => this.questions.findAll(input)),
     // TODO: validate output/payload https://trpc.io/docs/server/subscriptions#output-validation
     onChange: this
@@ -31,5 +32,6 @@ export class QuestionsRouter {
           yield payload as { type: 'INSERT' | 'UPDATE'; data: Question }
         }
       }),
+    toggle: this.trpc.procedure.input(ToggleQuestionDto).mutation(async ({ input }) => this.questions.toggle(input)),
   })
 }

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

@@ -1,5 +1,5 @@
 import { Injectable, OnModuleInit } from '@nestjs/common'
-import type { CreateQuestionDto, FindAllQuestionsDto, FindQuestionDto } from 'server/questions/dto'
+import type { CreateQuestionDto, FindAllQuestionsDto, FindQuestionDto, ToggleQuestionDto } from 'server/questions/dto'
 import { SupabaseService } from 'server/supabase/supabase.service'
 
 @Injectable()
@@ -12,8 +12,8 @@ export class QuestionsService implements OnModuleInit {
     this.supabase.subscribe(this.resource)
   }
 
-  async create({ groupId: group_id, title }: CreateQuestionDto) {
-    return this.supabase.from(this.resource).insert({ group_id, title })
+  async create({ author, groupId: group_id, title }: CreateQuestionDto) {
+    return this.supabase.from(this.resource).insert({ author, group_id, title })
   }
 
   async find({ questionId }: FindQuestionDto) {
@@ -33,4 +33,8 @@ export class QuestionsService implements OnModuleInit {
     if (data === null) throw new Error('This question does not exist')
     return data.active
   }
+
+  async toggle({ active, questionId }: ToggleQuestionDto) {
+    return this.supabase.from(this.resource).update({ active }).eq('id', questionId)
+  }
 }

apps/server/src/supabase/supabase.types.ts

@@ -102,6 +102,7 @@ export type Database = {
       questions: {
         Row: {
           active: boolean
+          author: string
           created_at: string
           group_id: string
           id: number
@@ -111,6 +112,7 @@ export type Database = {
         }
         Insert: {
           active?: boolean
+          author: string
           created_at?: string
           group_id: string
           id?: never
@@ -120,6 +122,7 @@ export type Database = {
         }
         Update: {
           active?: boolean
+          author?: string
           created_at?: string
           group_id?: string
           id?: never

supabase/migrations/20241023064101_create_questions_table.sql

@@ -1,10 +1,11 @@
 create table public.questions (
   id bigint generated always as identity primary key,
+  active boolean not null default true,
+  author text not null,
   created_at timestamptz not null default now(),
   title text not null,
-  active boolean not null default true,
-  yes integer not null default 0,
   no integer not null default 0,
+  yes integer not null default 0,
   group_id text not null -- TODO allow list of groupIds? Build dynamically union of groups on the fly in bandada?
 );
 comment on table public.questions is 'Questions for users to give feedback on';