feat: adds ability to configure and read prompts from database (#173)

Author: anthonydmays

lib/javascript/quiz-app/prisma/schema.prisma

@@ -15,4 +15,13 @@ model Votes {
   option     String   @db.VarChar
   userId     String   @db.VarChar
   created_at DateTime @default(now()) @db.Timestamptz(6)
+  prompt_id  BigInt
+}
+
+/// This model contains row level security and requires additional setup for migrations. Visit https://pris.ly/d/row-level-security for more info.
+model Prompts {
+  id         BigInt   @id @default(autoincrement())
+  Prompt     String?  @db.VarChar
+  created_at DateTime @default(now()) @db.Timestamptz(6)
+  Options    Json     @db.Json
 }

lib/javascript/quiz-app/src/app/results/page.tsx renamed to lib/javascript/quiz-app/src/app/results/[promptId]/page.tsx

@@ -1,10 +1,14 @@
 import ClearVotesButton from "@/components/clear-votes-button"
 import ResultsChart from "@/components/results-chart"
-import { getAllVotes } from "@/lib/db"
+import { getAllVotes, getPrompt } from "@/lib/db"
 import { currentUser } from "@clerk/nextjs/server"
 import { redirect } from "next/navigation"
 
-export default async function ResultsPage() {
+export default async function ResultsPage({
+  params,
+}: {
+  params: Promise<{ promptId: string }>
+}) {
   const user = await currentUser()
 
   // Redirect to sign-in if not authenticated
@@ -18,16 +22,18 @@ export default async function ResultsPage() {
     isAdmin = true;
   }
 
-  const topic = "What's your favorite programming language?"
-  const votes = await getAllVotes()
+  const promptId = +(await params).promptId;
+  const prompt = await getPrompt(promptId);
+  const topic = prompt?.Prompt;
+  const votes = await getAllVotes(promptId);
 
   return (
     <div className="container mx-auto py-10">
       <div className="flex flex-col justify-between items-center mb-8">
         <h1 className="text-3xl font-bold mb-8 text-center">{topic}</h1>
         {isAdmin &&(
           <div className="flex items-center gap-4">
-            <ClearVotesButton />
+            <ClearVotesButton promptId={promptId} />
           </div>
         )}
       </div>

lib/javascript/quiz-app/src/app/vote/page.tsx renamed to lib/javascript/quiz-app/src/app/vote/[promptId]/page.tsx

@@ -1,9 +1,13 @@
 import VoteForm from "@/components/vote-form";
-import { getUserVote } from "@/lib/db";
+import { getPrompt, getUserVote } from "@/lib/db";
 import { currentUser } from "@clerk/nextjs/server";
 import { redirect } from "next/navigation";
 
-export default async function VotePage() {
+export default async function VotePage({
+  params,
+}: {
+  params: Promise<{ promptId: string }>
+}) {
   const user = await currentUser()
 
   // Redirect to sign-in if not authenticated
@@ -21,13 +25,15 @@ export default async function VotePage() {
     return redirect("/results")
   }
 
-  const topic = "What's your favorite programming language?"
-  const options = ["JavaScript", "TypeScript", "Python", "Rust", "Go", "Other"]
+  const promptId = +(await params).promptId;
+  const prompt = await getPrompt(promptId);
+  const topic = '' + prompt?.Prompt;
+  const options = (prompt?.Options as {options: string[]}).options;
 
   return (
     <div className="container mx-auto py-10">
       <h1 className="text-3xl font-bold mb-8 text-center">{topic}</h1>
-      <VoteForm topic={topic} options={options} userId={userId} />
+      <VoteForm promptId={promptId} topic={topic} options={options} userId={userId} />
     </div>
   )
 }

lib/javascript/quiz-app/src/components/clear-votes-button.tsx

@@ -17,15 +17,15 @@ import { Trash2 } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
 
-export default function ClearVotesButton() {
+export default function ClearVotesButton({ promptId }: { promptId: number }) {
   const [isClearing, setIsClearing] = useState(false)
   const router = useRouter()
 
   const handleClearVotes = async () => {
     setIsClearing(true)
     try {
-      await clearAllVotes()
-      router.push("/vote")
+      await clearAllVotes(promptId)
+      router.push(`/vote/${promptId}`)
     } catch (error) {
       console.error("Failed to clear votes:", error)
     } finally {

lib/javascript/quiz-app/src/components/vote-form.tsx

@@ -10,12 +10,13 @@ import { useRouter } from "next/navigation"
 import { useState } from "react"
 
 interface VoteFormProps {
+  promptId: number
   topic: string
   options: string[]
   userId: string
 }
 
-export default function VoteForm({ topic, options, userId }: VoteFormProps) {
+export default function VoteForm({ promptId, topic, options, userId }: VoteFormProps) {
   const [selectedOption, setSelectedOption] = useState<string>("")
   const [isSubmitting, setIsSubmitting] = useState(false)
   const router = useRouter()
@@ -30,10 +31,11 @@ export default function VoteForm({ topic, options, userId }: VoteFormProps) {
       await submitVote({
         topic,
         option: selectedOption,
+        promptId,
         userId,
       })
 
-      router.push("/results")
+      router.push(`/results/${promptId}`)
     } catch (error) {
       console.error("Error submitting vote:", error)
     } finally {

lib/javascript/quiz-app/src/lib/actions.ts

@@ -5,7 +5,8 @@ import { clearVotes, saveVote } from "./db"
 interface VoteData {
   topic: string
   option: string
-  userId: string // Changed from userEmail to userId
+  promptId: number
+  userId: string
 }
 
 export async function submitVote(data: VoteData) {
@@ -19,6 +20,7 @@ export async function submitVote(data: VoteData) {
     await saveVote({
       topic: data.topic,
       option: data.option,
+      promptId: data.promptId,
       userId: data.userId,
     })
 
@@ -29,9 +31,9 @@ export async function submitVote(data: VoteData) {
   }
 }
 
-export async function clearAllVotes() {
+export async function clearAllVotes(promptId: number) {
   try {
-    await clearVotes()
+    await clearVotes(promptId)
     return { success: true }
   } catch (error) {
     console.error("Error clearing votes:", error)

lib/javascript/quiz-app/src/lib/db.ts

@@ -6,13 +6,19 @@ import prisma from "./prisma"
 interface VoteRecord {
   topic: string
   option: string
-  userId: string // Changed from userEmail to userId
+  userId: string
+  promptId: number
   createdAt: Date
 }
 
 export async function saveVote(vote: Omit<VoteRecord, "createdAt">) {
   const newVote = await prisma.votes.create({
-    data: vote,
+    data: {
+      prompt_id: vote.promptId,
+      topic: vote.topic,
+      userId: vote.userId,
+      option: vote.option,
+    },
   })
   return {...newVote, createdAt: newVote.created_at}
 }
@@ -27,11 +33,15 @@ export async function getUserVote(userId: string | null | undefined) {
   })
 }
 
-export async function getAllVotes() {
+export async function getAllVotes(promptId: number) {
   // Count votes by option
   const voteCounts: Record<string, number> = {}
 
-  const votes = await prisma.votes.findMany();
+  const votes = await prisma.votes.findMany({
+    where: {
+      prompt_id: promptId,
+    },
+  });
 
   votes.forEach((vote) => {
     if (voteCounts[vote.option]) {
@@ -48,7 +58,19 @@ export async function getAllVotes() {
   }))
 }
 
-export async function clearVotes() {
-  await prisma.votes.deleteMany({})
+export async function clearVotes(promptId: number) {
+  await prisma.votes.deleteMany({
+    where: {
+      prompt_id: promptId,
+    },
+  })
+}
+
+export async function getPrompt(id: number) {
+  return await prisma.prompts.findFirst({
+    where: {
+      id: id,
+    },
+  });
 }