feat(ui): add topic, subject screen

fix(api): fix api endpoint logic for pretest screen
2025-08-21 14:19:55 +06:00
parent be5c723bff
commit 6f4f2a8668
8 changed files with 369 additions and 105 deletions
--- a/app/(tabs)/categories/topics/page.tsx
+++ b/app/(tabs)/categories/topics/page.tsx
@ -0,0 +1,144 @@
+"use client";
+
+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";
+
+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 my-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?type=topic&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>
+  );
+}