academicYear logic

client/src/Pages/CourseTable.jsx

@@ -1,82 +1,81 @@
 import React, { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./CourseTable.css";
-import { fetchCourses } from "../api";
+import { fetchCourses, fetchAppointments } from "../api";
 import Navbar from "./Navbar";
 
 const CourseTable = () => {
   const { state } = useLocation();
   const [courses, setCourses] = useState(state?.courses || []);
+  const [appointments, setAppointments] = useState([]);
   const [loading, setLoading] = useState(!state?.courses);
   const navigate = useNavigate();
 
   useEffect(() => {
-    const fetchAllCourses = async () => {
-      if (!state?.courses) {
-        try {
-          const fetchedCourses = await fetchCourses(); // Fetch courses from API
-          setCourses(fetchedCourses);
-        } catch (error) {
-          console.error("Failed to fetch courses:", error);
-        } finally {
-          setLoading(false);
-        }
+    const fetchData = async () => {
+      try {
+        const academicYear = state?.academicYear;
+        const [fetchedAppointments, fetchedCourses] = await Promise.all([
+          fetchAppointments(academicYear),
+          state?.courses ? Promise.resolve(state.courses) : fetchCourses(),
+        ]);
+        setAppointments(fetchedAppointments);
+        if (!state?.courses) setCourses(fetchedCourses);
+      } catch (error) {
+        console.error("Failed to fetch data:", error);
+      } finally {
+        setLoading(false);
       }
     };
 
-    fetchAllCourses();
-  }, [state?.courses]);
-
-  useEffect(() => {
-    if (state?.updatedCourse) {
-      setCourses((prevCourses) =>
-        prevCourses.map((course) =>
-          course.courseId === state.updatedCourse.courseId
-            ? { ...course, status: "Submitted" } // Update the status for the specific course
-            : course
-        )
-      );
-    }
-  }, [state?.updatedCourse]);
-  
+    fetchData();
+  }, [state?.courses, state?.academicYear]);
 
+  const getStatus = (courseId) => {
+    // Check if there's an appointment for the given courseId
+    return appointments.some((appointment) => appointment.courseId === courseId)
+      ? "Submitted"
+      : "Not Submitted";
+  };
 
   if (loading) {
     return <div>Loading...</div>;
   }
 
   const handleRowClick = (course) => {
-    navigate(`/course-form/${course.courseId}`, { state: { course } });
+    navigate(`/course-form/${course.courseId}`, {
+      state: { course, academicYear: state?.academicYear },
+    });
   };
 
   return (
-   <>
-   <Navbar/>
-    <table className="course-table">
-      <thead>
-        <tr>
-          <th>CourseID</th>
-          <th>Course Name</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        {courses.length > 0 ? (
-          courses.map((course) => (
-            <tr key={course.courseId} onClick={() => handleRowClick(course)}>
-              <td>{course.courseId}</td>
-              <td>{course.name}</td>
-              <td>{course.status}</td>
-            </tr>
-          ))
-        ) : (
+    <>
+      <Navbar />
+      <table className="course-table">
+        <thead>
           <tr>
-            <td colSpan="3">No courses available</td>
+            <th>CourseID</th>
+            <th>Course Name</th>
+            <th>Status</th>
           </tr>
-        )}
-      </tbody>
-    </table>
-   </>
+        </thead>
+        <tbody>
+          {courses.length > 0 ? (
+            courses.map((course) => (
+              <tr key={course.courseId} onClick={() => handleRowClick(course)}>
+                <td>{course.courseId}</td>
+                <td>{course.name}</td>
+                <td>{getStatus(course.courseId)}</td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan="3">No courses available</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </>
   );
 };