fix(api): fix api endpoint logic #3

app/(tabs)/settings/page.tsx

@@ -2,8 +2,8 @@
 
 import BackgroundWrapper from "@/components/BackgroundWrapper";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { API_URL, getToken } from "@/lib/auth";
-import { UserData } from "@/types/auth";
+import { useAuth } from "@/context/AuthContext";
+import { clearAuthToken } from "@/lib/auth";
 import {
   Bookmark,
   ChartColumn,
@@ -19,49 +19,16 @@ import {
   UserCircle2,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 const SettingsPage = () => {
   const router = useRouter();
-  const [userData, setUserData] = useState<UserData>({
-    user_id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    username: "",
-    full_name: "",
-    email: "",
-    is_verified: false,
-    phone_number: "",
-    ssc_roll: 0,
-    ssc_board: "",
-    hsc_roll: 0,
-    hsc_board: "",
-    college: "",
-    preparation_unit: "Science",
-  });
+  const { user, isLoading } = useAuth();
 
-  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);
-      }
-    }
-
-    fetchUser();
-  }, []);
+  function handleLogout() {
+    clearAuthToken();
+    router.replace("/");
+  }
 
   return (
     <BackgroundWrapper>
@@ -81,16 +48,14 @@ const SettingsPage = () => {
               <div className="flex gap-4 items-center">
                 <Avatar className="bg-[#113768] w-20 h-20">
                   <AvatarFallback className="text-3xl text-white">
-                    {userData?.username
-                      ? userData.username.charAt(0).toUpperCase()
+                    {user?.username
+                      ? user.username.charAt(0).toUpperCase()
                       : ""}
                   </AvatarFallback>
                 </Avatar>
                 <div className="flex flex-col items-start">
-                  <h1 className="font-semibold text-2xl">
-                    {userData?.full_name}
-                  </h1>
-                  <h3 className=" text-md">{userData?.email}</h3>
+                  <h1 className="font-semibold text-2xl">{user?.full_name}</h1>
+                  <h3 className=" text-md">{user?.email}</h3>
                 </div>
               </div>
             </section>
@@ -181,7 +146,7 @@ const SettingsPage = () => {
                 </div>
                 <ChevronRight size={30} color="#113768" />
               </div>
-              <div className="flex justify-between">
+              <button onClick={handleLogout} className="flex justify-between">
                 <div className="flex items-center gap-4">
                   <LogOut size={30} color="#113768" />
                   <h3 className="text-md font-medium text-[#113768]">
@@ -189,7 +154,7 @@ const SettingsPage = () => {
                   </h3>
                 </div>
                 <ChevronRight size={30} color="#113768" />
-              </div>
+              </button>
               <div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
               <p className="text-center text-[#113768]/50 font-medium">
                 ExamJam | Version 1.0