feat: add and connect database for quiz progress tracking

Author: Eric-Zhang-Developer

src/components/tutorial-quiz.tsx

@@ -1,6 +1,10 @@
+"use client";
+
 import { Cinzel } from "next/font/google";
 import { useState } from "react";
 import { QuizData } from "@/lib/types/types";
+import { createClient } from "@/lib/supabase/client";
+// Idk if to use from server, or client
 
 const cinzel = Cinzel({ subsets: ["latin"], weight: ["700"] });
 
@@ -40,6 +44,7 @@ export default function Quiz({ quizData }: QuizProps) {
         setIsCorrect(null);
       } else {
         setShowResults(true);
+        updateUserQuizProgress();
       }
     }, 2000); // 2 second delay so they can read the feedback
   };
@@ -52,6 +57,30 @@ export default function Quiz({ quizData }: QuizProps) {
     setIsCorrect(null);
   };
 
+  // Updates database that user completed quiz, no score to keep things simple
+  const updateUserQuizProgress = async () => {
+    const supabase = createClient();
+
+    // Get user
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+
+    if (!user) {
+      console.error("User not logged in, cannot save progress.");
+      return;
+    }
+
+    const { error: insertError } = await supabase.from("user_quiz_progress").insert({
+      user_id: user.id,
+      quiz_id: quizData.id,
+    });
+
+    if (insertError) {
+      console.error(`Supabase insertion error: ${insertError}`);
+    }
+  };
+
   return (
     <div className="mt-12 p-8 border-2 border-amber-800/50 rounded-xl bg-amber-50/50 shadow-inner shadow-amber-900/20">
       <h2 className={`text-3xl font-bold text-center mb-6 text-amber-900 ${cinzel.className}`}>

src/data/quizzes/01-hello-world.ts

@@ -2,6 +2,7 @@ import { QuizData } from "@/lib/types/types";
 
 export const helloWorldQuiz: QuizData = {
   title: "The Oracle's First Greeting",
+  id: "hello-world",
   questions: [
     {
       questionText: "What is the primary purpose of a 'Hello World' program?",

src/lib/types/types.ts

@@ -6,5 +6,6 @@ export type Question = {
 
 export type QuizData = {
   title: string;
+  id: string;
   questions: Question[];
 };