Finalized students app

routes/(apps)/students/(_islands)/ConsultStudents.tsx

@@ -1,75 +1,45 @@
 import { useEffect, useState } from "preact/hooks";
+import Promotion from "$root/routes/(apps)/students/(_components)/Promotion.tsx";
 
-interface Promotion {
-  id: number;
-  name: string;
-}
+type SingleUserResponse = { promo: Promotion; student: Student };
+type ManyUsersResponse = { promos: Promotion[]; students: Student[] };
 
-interface Student {
-  userId: string;
-  firstName: string;
-  lastName: string;
-  mail: string;
-  promotionId: number;
-}
+type APIResponse = SingleUserResponse | ManyUsersResponse;
 
 export default function ConsultStudents() {
-  const [data, setData] = useState<
-    { promotions: Promotion[]; students: Student[] } | null
-  >(null);
+  const [data, setData] = useState<APIResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchData = async () => {
-      try {
-        const response = await fetch("/students/api/students");
-        if (!response.ok) {
-          throw new Error(`Error fetching data: ${response.statusText}`);
-        }
-
-        const result = await response.json();
-        console.log("Fetched data:", result);
-        setData(result);
-      } catch (err) {
-        console.error("Error fetching data:", err);
+      const response = await fetch("/students/api/students");
+      if (!response.ok) {
         setError("Failed to load data. Please try again later.");
       }
+
+      const result: APIResponse = await response.json();
+      setData(result);
     };
 
     fetchData();
   }, []);
 
   return (
-    <section>
-      <h2>Consult Students</h2>
+    <>
       {error && <p className="error">{error}</p>}
-      {data?.promotions.map((promo) => (
-        <div key={promo.id}>
-          <h3>Promotion: {promo.name}</h3>
-          <table>
-            <thead>
-              <tr>
-                <th>ID</th>
-                <th>First Name</th>
-                <th>Last Name</th>
-                <th>Email</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data.students
-                .filter((student) => student.promotionId === promo.id)
-                .map((student) => (
-                  <tr key={student.userId}>
-                    <td>{student.userId}</td>
-                    <td>{student.firstName}</td>
-                    <td>{student.lastName}</td>
-                    <td>{student.mail}</td>
-                  </tr>
-                ))}
-            </tbody>
-          </table>
-        </div>
-      ))}
-    </section>
+      {data && ((Object.hasOwn(data, "student"))
+        ? (
+          <Promotion
+            students={[(data as SingleUserResponse).student]}
+            promo={(data as SingleUserResponse).promo}
+          />
+        )
+        : (data as ManyUsersResponse).promos.map((promo) => (
+          <Promotion
+            students={(data as ManyUsersResponse).students}
+            promo={promo}
+          />
+        )))}
+    </>
   );
 }