fix(api): fix exam screen api logic

app/exam/pretest/page.tsx

@@ -2,26 +2,26 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
-import { ArrowLeft, HelpCircle, Clock, XCircle, OctagonX } from "lucide-react";
+import {
+  ArrowLeft,
+  HelpCircle,
+  Clock,
+  XCircle,
+  OctagonX,
+  RotateCw,
+} from "lucide-react";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
 import { API_URL, getToken } from "@/lib/auth";
 import { useExam } from "@/context/ExamContext";
-import { Test } from "@/types/exam";
-import { Metadata, MockMeta, SubjectMeta, TopicMeta } from "@/types/exam";
-
-type MetadataType = "mock" | "subject" | "topic";
-
-type MetadataMap = {
-  mock: MockMeta;
-  subject: SubjectMeta;
-  topic: TopicMeta;
-};
+import { Question } from "@/types/exam";
+import { Metadata } from "@/types/exam";
 
 function PretestPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { startExam, setCurrentExam } = useExam();
+  const [examData, setExamData] = useState<Question[]>();
 
   // Get params from URL search params
   const id = searchParams.get("test_id") || "";
@@ -31,19 +31,10 @@ function PretestPageContent() {
       ? typeParam
       : null;
 
-  const [metadata, setMetadata] = useState<MetadataMap[MetadataType] | null>(
-    null
-  );
+  const [metadata, setMetadata] = useState<Metadata | 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 || !type) return;
@@ -63,9 +54,11 @@ function PretestPageContent() {
         }
 
         const data = await questionResponse.json();
-        const fetchedMetadata = fetchMetadata(type, data.metadata);
+        const fetchedMetadata: Metadata = data.metadata;
+        const fetchedQuestions: Question[] = data.questions;
 
         setMetadata(fetchedMetadata);
+        setExamData(fetchedQuestions);
       } catch (error) {
         console.error(error);
         setError(error instanceof Error ? error.message : "An error occurred");
@@ -80,19 +73,25 @@ function PretestPageContent() {
   if (error) {
     return (
       <BackgroundWrapper>
-        <div className="min-h-screen">
-          <div className="mx-10 pt-10">
-            <button
-              onClick={() => router.push("/categories/subjects")}
-              className="mb-4"
-            >
-              <ArrowLeft size={30} color="black" />
-            </button>
-            <div className="">
-              <DestructibleAlert
-                text={error}
-                icon={<OctagonX size={150} color="red" />}
-              />
+        <div className="min-h-screen mx-10 pt-10 flex flex-col justify-center items-center gap-4">
+          <div className="flex flex-col justify-center items-center gap-4 w-full">
+            <DestructibleAlert
+              text={error}
+              icon={<OctagonX size={150} color="red" />}
+            />
+            <div className="flex items-center justify-evenly w-full">
+              <button
+                onClick={() => router.push(`/categories/${type}s`)}
+                className="p-4 border border-blue-200 rounded-full bg-blue-400"
+              >
+                <ArrowLeft size={35} color="white" />
+              </button>
+              <button
+                onClick={() => router.refresh()}
+                className="p-4 border border-blue-200 rounded-full bg-red-400"
+              >
+                <RotateCw size={35} color="white" />
+              </button>
             </div>
           </div>
         </div>
@@ -121,13 +120,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}?test_id=${metadata?.test_id}`);
+  }
   return (
     <BackgroundWrapper>
       <div className="min-h-screen flex flex-col justify-between">
@@ -226,7 +225,7 @@ function PretestPageContent() {
         </div>
 
         <button
-          onClick={() => console.log("Exam started")}
+          onClick={() => handleStartExam()}
           className="fixed bottom-0 w-full bg-[#113768] h-[78px] justify-center items-center flex text-white text-2xl font-bold"
         >
           Start Test