feat(ui): add topic, subject screen

fix(api): fix api endpoint logic for pretest screen

app/exam/pretest/page.tsx

@@ -5,40 +5,66 @@ import { Suspense, useEffect, useState } from "react";
 import { ArrowLeft, HelpCircle, Clock, XCircle } from "lucide-react";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
-import { API_URL } from "@/lib/auth";
+import { API_URL, getToken } from "@/lib/auth";
 import { useExam } from "@/context/ExamContext";
 import { Test } from "@/types/exam";
-import { Metadata } from "@/types/exam";
+import { Metadata, MockMeta, SubjectMeta, TopicMeta } from "@/types/exam";
+
+type MetadataType = "mock" | "subject" | "topic";
+
+type MetadataMap = {
+  mock: MockMeta;
+  subject: SubjectMeta;
+  topic: TopicMeta;
+};
 
 function PretestPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const [examData, setExamData] = useState<Test>();
   const { startExam, setCurrentExam } = useExam();
 
   // Get params from URL search params
-  const id = searchParams.get("id") || "";
+  const id = searchParams.get("test_id") || "";
+  const typeParam = searchParams.get("type");
+  const type =
+    typeParam === "mock" || typeParam === "subject" || typeParam === "topic"
+      ? typeParam
+      : null;
 
-  const [metadata, setMetadata] = useState<Metadata | null>(null);
+  const [metadata, setMetadata] = useState<MetadataMap[MetadataType] | null>(
+    null
+  );
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string>();
 
+  function fetchMetadata<T extends MetadataType>(
+    type: T,
+    data: unknown
+  ): MetadataMap[T] {
+    return data as MetadataMap[T]; // you'd validate in real code
+  }
+
   useEffect(() => {
     async function fetchQuestions() {
-      if (!id) return;
+      if (!id || !type) return;
 
       try {
         setLoading(true);
-        const questionResponse = await fetch(`${API_URL}/mock/${id}`, {
+        const token = await getToken();
+        const questionResponse = await fetch(`${API_URL}/tests/${type}/${id}`, {
           method: "GET",
+          headers: {
+            authorization: `Bearer ${token}`,
+          },
         });
+
         if (!questionResponse.ok) {
           throw new Error("Failed to fetch questions");
         }
-        const data = await questionResponse.json();
-        const fetchedMetadata: Metadata = data;
 
-        setExamData(data);
+        const data = await questionResponse.json();
+        const fetchedMetadata = fetchMetadata(type, data.metadata);
+
         setMetadata(fetchedMetadata);
       } catch (error) {
         console.error(error);
@@ -47,17 +73,19 @@ function PretestPageContent() {
         setLoading(false);
       }
     }
-    if (id) {
-      fetchQuestions();
-    }
-  }, [id]);
+
+    fetchQuestions();
+  }, [id, type]);
 
   if (error) {
     return (
       <BackgroundWrapper>
         <div className="min-h-screen">
           <div className="mx-10 mt-10">
-            <button onClick={() => router.push("/subjects")} className="mb-4">
+            <button
+              onClick={() => router.push("/categories/subjects")}
+              className="mb-4"
+            >
               <ArrowLeft size={30} color="black" />
             </button>
             <DestructibleAlert text={error} extraStyles="" />
@@ -72,12 +100,15 @@ function PretestPageContent() {
       <BackgroundWrapper>
         <div className="min-h-screen">
           <div className="mx-10 pt-10">
-            <button onClick={() => router.push("/subjects")} className="mb-4">
+            <button
+              onClick={() => router.push(`/categories/${type}s`)}
+              className="mb-4"
+            >
               <ArrowLeft size={30} color="black" />
             </button>
             <div className="flex flex-col items-center justify-center">
               <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
-            <p className="text-lg font-medium text-gray-900">Loading...</p>
+              <p className="text-lg font-medium text-gray-900">Loading...</p>
             </div>
           </div>
         </div>
@@ -85,13 +116,13 @@ function PretestPageContent() {
     );
   }
 
-  function handleStartExam() {
-    if (!examData) return;
+  // function handleStartExam() {
+  //   if (!examData) return;
 
-    setCurrentExam(examData);
-    startExam(examData);
-    router.push(`/exam/${id}?time=${metadata?.metadata.duration}`);
-  }
+  //   setCurrentExam(examData);
+  //   startExam(examData);
+  //   router.push(`/exam/${id}?time=${metadata?.metadata.duration}`);
+  // }
   return (
     <BackgroundWrapper>
       <div className="min-h-screen flex flex-col justify-between">
@@ -102,10 +133,12 @@ function PretestPageContent() {
                 <ArrowLeft size={30} color="black" />
               </button>
 
-              <h1 className="text-4xl font-semibold text-[#113768]">{title}</h1>
+              <h1 className="text-4xl font-semibold text-[#113768]">
+                {metadata.name}
+              </h1>
 
               <p className="text-xl font-medium text-[#113768]">
-                Rating: {rating} / 10
+                Rating: 8 / 10
               </p>
 
               <div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-8 py-7 px-5 space-y-8">
@@ -113,10 +146,10 @@ function PretestPageContent() {
                   <HelpCircle size={40} color="#113768" />
                   <div className="space-y-2">
                     <p className="font-bold text-4xl text-[#113768]">
-                      {metadata.metadata.quantity}
+                      {metadata.num_questions}
                     </p>
                     <p className="font-normal text-lg">
-                      {metadata.metadata.type}
+                      Multiple Choice Questions
                     </p>
                   </div>
                 </div>
@@ -125,7 +158,7 @@ function PretestPageContent() {
                   <Clock size={40} color="#113768" />
                   <div className="space-y-2">
                     <p className="font-bold text-4xl text-[#113768]">
-                      {metadata.metadata.duration} mins
+                      {String(metadata.time_limit_minutes)} mins
                     </p>
                     <p className="font-normal text-lg">Time Taken</p>
                   </div>
@@ -135,7 +168,7 @@ function PretestPageContent() {
                   <XCircle size={40} color="#113768" />
                   <div className="space-y-2">
                     <p className="font-bold text-4xl text-[#113768]">
-                      {metadata.metadata.marking}
+                      {metadata.deduction} marks
                     </p>
                     <p className="font-normal text-lg">
                       From each wrong answer
@@ -188,7 +221,7 @@ function PretestPageContent() {
         </div>
 
         <button
-          onClick={async () => handleStartExam()}
+          onClick={() => console.log("Exam started")}
           className="fixed bottom-0 w-full bg-[#113768] h-[78px] justify-center items-center flex text-white text-2xl font-bold"
         >
           Start Test