feat(ui): add topic test screen

app/(tabs)/home/page.tsx

@@ -80,8 +80,8 @@ const HomePage = () => {
                 <div className={styles.categoriesContainer}>
                   <div className={styles.categoryRow}>
                     <button
-                      disabled
+                      onClick={() => router.push("/topics")}
-                      className={`${styles.categoryButton} ${styles.disabled}`}
+                      className={`${styles.categoryButton} `}
                     >
                       <Image
                         src="/images/icons/topic-test.png"
@@ -94,7 +94,7 @@ const HomePage = () => {
                       </span>
                     </button>
                     <button
-                      onClick={() => router.push("/unit")}
+                      onClick={() => router.push("/mocks")}
                       className={styles.categoryButton}
                     >
                       <Image
@@ -124,8 +124,8 @@ const HomePage = () => {
                       </span>
                     </button>
                     <button
-                      disabled
+                      onClick={() => router.push("/subjects")}
-                      className={`${styles.categoryButton} ${styles.disabled}`}
+                      className={`${styles.categoryButton}`}
                     >
                       <Image
                         src="/images/icons/subject-test.png"

app/(tabs)/layout.tsx

@@ -9,7 +9,11 @@ import { House, LayoutGrid, Bookmark, Settings } from "lucide-react";
 
 const tabs = [
   { name: "Home", href: "/home", component: <House size={30} /> },
-  { name: "Subjects", href: "/subjects", component: <LayoutGrid size={30} /> },
+  {
+    name: "Categories",
+    href: "/subjects",
+    component: <LayoutGrid size={30} />,
+  },
   { name: "Bookmark", href: "/bookmark", component: <Bookmark size={30} /> },
   { name: "Settings", href: "/settings", component: <Settings size={30} /> },
 ];

app/(tabs)/topics/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Header from "@/components/Header";
+import DestructibleAlert from "@/components/DestructibleAlert";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { API_URL, getToken } from "@/lib/auth";
+import { Loader, RefreshCw } from "lucide-react";
+import { useAuth } from "@/context/AuthContext";
+import { Question } from "@/types/exam";
+
+type Topic = {
+  topic_id: string;
+  name: string;
+  subject: {
+    subject_id: string;
+    name: string;
+    unit: string;
+  };
+};
+
+export default function TopicScreen() {
+  const router = useRouter();
+  const { user } = useAuth();
+
+  const [topics, setTopics] = useState<Topic[]>([]);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  async function fetchTopics() {
+    setRefreshing(true);
+    try {
+      const token = await getToken();
+      const response = await fetch(`${API_URL}/topics/`, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch topics");
+      }
+
+      const fetchedTopics: Topic[] = await response.json();
+      setTopics(fetchedTopics);
+    } catch (error) {
+      setErrorMsg(
+        "Error fetching subjects: " +
+          (error instanceof Error ? error.message : "Unknown error")
+      );
+    } finally {
+      setRefreshing(false);
+    }
+  }
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (await getToken()) {
+        fetchTopics();
+      }
+    };
+    fetchData();
+  }, []);
+
+  const onRefresh = async () => {
+    fetchTopics();
+  };
+
+  if (errorMsg) {
+    return (
+      <BackgroundWrapper>
+        <Header displayTabTitle="Subjects" />
+        <div className="overflow-y-auto">
+          <div className="mt-5 px-5">
+            <DestructibleAlert text={errorMsg} extraStyles="" />
+          </div>
+          <div className="flex justify-center mt-4">
+            <button
+              onClick={onRefresh}
+              disabled={refreshing}
+              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+            >
+              {refreshing ? <Loader /> : <RefreshCw />}
+            </button>
+          </div>
+        </div>
+      </BackgroundWrapper>
+    );
+  }
+
+  return (
+    <BackgroundWrapper>
+      <div>
+        <Header displayTabTitle="Topics" />
+        <div className="mx-10 pb-20 overflow-y-auto">
+          <h1 className="text-2xl font-semibold mb-5">
+            {user?.preparation_unit}
+          </h1>
+          <div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4">
+            {topics.length > 0 ? (
+              topics.map((topic) => (
+                <div key={topic.topic_id}>
+                  <button
+                    onClick={() =>
+                      router.push(`/exam/pretest?test_id=${topic.topic_id}`)
+                    }
+                    className="w-full border-2 border-[#B0C2DA] py-4 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors"
+                  >
+                    <h3 className="text-xl font-medium">{topic.name}</h3>
+                    <div className="flex space-x-2">
+                      <p className="text-md font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
+                        {topic.subject.name}
+                      </p>
+                      <p className="text-md font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
+                        {topic.subject.unit}
+                      </p>
+                    </div>
+                  </button>
+                </div>
+              ))
+            ) : (
+              <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-xl font-medium text-center">Loading...</p>
+              </div>
+            )}
+          </div>
+          <div className="flex justify-center mt-4">
+            <button
+              onClick={onRefresh}
+              disabled={refreshing}
+              className="p-2 bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 rounded-full"
+            >
+              {refreshing ? <Loader /> : <RefreshCw />}
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* <CustomBackHandler fallbackRoute="unit" useCustomHandler={false} /> */}
+    </BackgroundWrapper>
+  );
+}

app/(tabs)/units/page.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import React from "react";
-import { useRouter } from "next/navigation";
-import Header from "@/components/Header";
-import BackgroundWrapper from "@/components/BackgroundWrapper";
-import { v4 as uuidv4 } from "uuid";
-
-const units = [
-  {
-    id: uuidv4(),
-    name: "Science",
-    rating: 8,
-  },
-  {
-    id: uuidv4(),
-    name: "Business Studies",
-    rating: 8,
-  },
-  {
-    id: uuidv4(),
-    name: "Humanities",
-    rating: 9,
-  },
-];
-
-const Unit = () => {
-  const router = useRouter();
-
-  const handleUnitPress = (unit: {
-    id: string;
-    name: string;
-    rating?: number;
-  }) => {
-    router.push(`/paper?name=${encodeURIComponent(unit.name)}`);
-  };
-
-  return (
-    <BackgroundWrapper>
-      <div className="flex flex-col min-h-screen">
-        <Header displayTabTitle="Subjects" />
-        <div className="flex-1">
-          <div className="overflow-y-auto">
-            <div className="border border-blue-200 flex flex-col gap-4 rounded-3xl p-4 mx-10 mt-10">
-              {units ? (
-                units.map((unit) => (
-                  <button
-                    key={unit.id}
-                    onClick={() => handleUnitPress(unit)}
-                    className="border-2 border-blue-300 py-4 rounded-xl px-6 gap-2 block w-full text-left hover:bg-blue-50 transition-colors duration-200"
-                  >
-                    <p className="text-lg font-medium">{unit.name}</p>
-                    <p className="text-sm">Rating: {unit.rating} / 10</p>
-                  </button>
-                ))
-              ) : (
-                <div className="flex flex-col items-center py-8">
-                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-4"></div>
-                  <p className="font-bold text-2xl text-center">Loading...</p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-      {/* <CustomBackHandler fallbackRoute="home" useCustomHandler={false} /> */}
-    </BackgroundWrapper>
-  );
-};
-
-export default Unit;