fix(api): fix api logic for exam screen

needs more work for the timercontext

components/Header.tsx

@@ -1,4 +1,6 @@
-import React, { useState, useEffect } from "react";
+"use client";
+
+import React from "react";
 import { useRouter } from "next/navigation";
 import { ChevronLeft, Layers } from "lucide-react";
 import { useTimer } from "@/context/TimerContext";
@@ -12,53 +14,25 @@ interface HeaderProps {
   displayUser?: boolean;
   displaySubject?: string;
   displayTabTitle?: string;
-  examDuration?: string | null;
 }
 
 const Header = ({
   displayUser,
   displaySubject,
   displayTabTitle,
-  examDuration,
 }: HeaderProps) => {
   const router = useRouter();
   const { open } = useModal();
-  const { clearExam } = useExam();
-  const [totalSeconds, setTotalSeconds] = useState(
-    examDuration ? parseInt(examDuration) * 60 : 0
-  );
-  const { stopTimer } = useTimer();
-  const { user, isLoading } = useAuth();
-
-  useEffect(() => {
-    if (!examDuration) return;
-
-    const timer = setInterval(() => {
-      setTotalSeconds((prev) => {
-        if (prev <= 0) {
-          clearInterval(timer);
-          return 0;
-        }
-        return prev - 1;
-      });
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [examDuration]);
-
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
+  const { cancelExam } = useExam();
+  const { stopTimer, timeRemaining } = useTimer();
+  const { user } = useAuth();
 
   const showExitDialog = () => {
     const confirmed = window.confirm("Are you sure you want to quit the exam?");
-
     if (confirmed) {
-      if (stopTimer) {
-        stopTimer();
-      }
-      clearExam();
-      router.push("/unit");
+      stopTimer();
+      cancelExam();
+      router.push("/categories");
     }
   };
 
@@ -66,6 +40,11 @@ const Header = ({
     router.back();
   };
 
+  // format time from context
+  const hours = Math.floor(timeRemaining / 3600);
+  const minutes = Math.floor((timeRemaining % 3600) / 60);
+  const seconds = timeRemaining % 60;
+
   return (
     <header className={styles.header}>
       {displayUser && (
@@ -96,7 +75,8 @@ const Header = ({
         </div>
       )}
 
-      {examDuration && (
+      {/* Exam timer header */}
+      {timeRemaining > 0 && (
         <div className={styles.examHeader}>
           <button onClick={showExitDialog} className={styles.iconButton}>
             <ChevronLeft size={30} color="white" />
@@ -123,10 +103,7 @@ const Header = ({
             </div>
           </div>
 
-          <button
-            onClick={open}
-            className={`${styles.iconButton} ${styles.disabled}`}
-          >
+          <button onClick={open} className={`${styles.iconButton}`}>
             <Layers size={30} color="white" />
           </button>
         </div>