fix(api): fix api endpoint logic #3

components/Header.tsx

@@ -6,8 +6,7 @@ import styles from "@/css/Header.module.css";
 import { useExam } from "@/context/ExamContext";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { useModal } from "@/context/ModalContext";
-import { API_URL, getToken } from "@/lib/auth";
-import { UserData } from "@/types/auth";
+import { useAuth } from "@/context/AuthContext";
 
 interface HeaderProps {
   displayUser?: boolean;
@@ -29,7 +28,7 @@ const Header = ({
     examDuration ? parseInt(examDuration) * 60 : 0
   );
   const { stopTimer } = useTimer();
-  const [userData, setUserData] = useState<UserData>();
+  const { user, isLoading } = useAuth();
 
   useEffect(() => {
     if (!examDuration) return;
@@ -47,33 +46,6 @@ const Header = ({
     return () => clearInterval(timer);
   }, [examDuration]);
 
-  useEffect(() => {
-    async function fetchUser() {
-      try {
-        const token = await getToken();
-        if (!token) return;
-
-        const response = await fetch(`${API_URL}/me/`, {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        });
-
-        if (response.ok) {
-          const fetchedUserData = await response.json();
-          setUserData(fetchedUserData);
-        }
-      } catch (error) {
-        console.error("Error fetching user data:", error);
-      }
-    }
-
-    if (displayUser) {
-      fetchUser();
-    }
-  }, [displayUser]);
-
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
   const seconds = totalSeconds % 60;
@@ -100,13 +72,11 @@ const Header = ({
         <div className={styles.profile}>
           <Avatar className="bg-gray-200 w-10 h-10">
             <AvatarFallback className=" text-lg">
-              {userData?.username
-                ? userData.username.charAt(0).toUpperCase()
-                : ""}
+              {user?.username ? user.username.charAt(0).toUpperCase() : ""}
             </AvatarFallback>
           </Avatar>
           <span className={styles.text}>
-            Hello, {userData?.username ? userData.username.split(" ")[0] : ""}
+            Hello, {user?.username ? user.username.split(" ")[0] : ""}
           </span>
         </div>
       )}