93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import "./CourseTable.css";
|
|
import { fetchCourses, fetchAppointments } from "../api";
|
|
|
|
import FilterPage from "./FilterPage";
|
|
import Footer from "./Footer";
|
|
|
|
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 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);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [state?.courses, state?.academicYear]);
|
|
|
|
const getStatus = (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, academicYear: state?.academicYear },
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div style={{
|
|
display:"flex",
|
|
flexDirection:"column",
|
|
minHeight: "100vh"
|
|
}}>
|
|
|
|
{/* Pass setCourses to FilterPage so it can update the course list */}
|
|
<div style={{flexGrow:1}}>
|
|
<FilterPage setCourses={setCourses} />
|
|
<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>{getStatus(course.courseId)}</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan="3">No courses available</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<Footer/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CourseTable;
|