CourseForm backend done

client/src/Pages/CourseTable.jsx

@@ -1,69 +1,105 @@
-// import React from "react";
-// import { useNavigate } from "react-router-dom";
+// import React, { useState, useEffect } from 'react';
+// import { useLocation, useNavigate } from "react-router-dom";
 // import "./CourseTable.css";
+// import { fetchCourses } from '../api';
 
-// const CourseTable = ({courses}) => {
-//   const navigate = useNavigate();
+// const CourseTable = () => {
+//   const { state } = useLocation();
+//   const courses = state?.courses;
+//   const navigate= useNavigate();
+//   console.log(courses);
+
+//   useEffect(() => {
+//     if (!courses || courses.length === 0) {
+//       alert("No courses available");
+//     }
+//   }, [courses]);
+
+//   if (!courses) {
+//     return <div>Loading...</div>;
+//   }
 
 //   const handleRowClick = (course) => {
-//     navigate(`/course-form/${course.id}`, { state: { course } });
+//     navigate(`/course-form/${course.courseId}`, { state: { course } });
 //   };
 
 //   return (
-//     <div className="course-table">
-//       <h1>Courses</h1>
-//       <table border="1">
-//         <thead>
-//           <tr>
-//             <th>Course ID</th>
-//             <th>Course Name</th>
-//             <th>Status</th>
+//     <table className="course-table">
+//       <thead>
+//         <tr>
+//           <th>CourseID</th>
+//           <th>Course Name</th>
+//           <th>Status</th>
+//         </tr>
+//       </thead>
+//       <tbody>
+//         {courses.map(course => (
+//           <tr key={course.courseId} onClick={() => handleRowClick(course)}>
+//             <td>{course.courseId}</td>
+//             <td>{course.name}</td>
+//             <td>{course.status}</td>
 //           </tr>
-//         </thead>
-//         <tbody>
-//           {courses.map((course) => (
-//             <tr
-//               key={course.id}
-//               onClick={() => handleRowClick(course)}
-//               style={{ cursor: "pointer" }}
-//             >
-//               <td>{course.id}</td>
-//               <td>{course.name}</td>
-//               <td>
-//                 <span className={`status ${course.status.replace(" ", "-")}`}>
-//                   {course.status}
-//                 </span>
-//               </td>
-//             </tr>
-//           ))}
-//         </tbody>
-//       </table>
-//     </div>
+//         ))}
+//       </tbody>
+//     </table>
 //   );
-// };
+// }
 
 // export default CourseTable;
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./CourseTable.css";
-import { fetchCourses } from '../api';
+import { fetchCourses } from "../api";
 
 const CourseTable = () => {
   const { state } = useLocation();
-  const courses = state?.courses;
-  console.log(courses);
+  const [courses, setCourses] = useState(state?.courses || []);
+  const [loading, setLoading] = useState(!state?.courses);
+  const navigate = useNavigate();
 
   useEffect(() => {
-    if (!courses || courses.length === 0) {
-      alert("No courses available");
-    }
-  }, [courses]);
+    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);
+        }
+      }
+    };
 
-  if (!courses) {
+    fetchAllCourses();
+  }, [state?.courses]);
+
+  useEffect(() => {
+    if (state?.updatedCourse) {
+      setCourses((prevCourses) => {
+        // Filter only the updated course
+        const filteredCourses = prevCourses.filter((course) =>
+          course.courseId === state.updatedCourse.courseId
+        );
+
+        return filteredCourses.map((course) =>
+          course.courseId === state.updatedCourse.courseId
+            ? { ...course, status: "Submitted" } // Update status
+            : course
+        );
+      });
+    }
+  }, [state?.updatedCourse]);
+
+  if (loading) {
     return <div>Loading...</div>;
   }
 
+  const handleRowClick = (course) => {
+    navigate(`/course-form/${course.courseId}`, { state: { course } });
+  };
+
   return (
     <table className="course-table">
       <thead>
@@ -74,16 +110,22 @@ const CourseTable = () => {
         </tr>
       </thead>
       <tbody>
-        {courses.map(course => (
-          <tr key={course.id}>
-            <td>{course.courseId}</td>
-            <td>{course.name}</td>
-            <td>{course.status}</td>
+        {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>
+          ))
+        ) : (
+          <tr>
+            <td colSpan="3">No courses available</td>
           </tr>
-        ))}
+        )}
       </tbody>
     </table>
   );
-}
+};
 
 export default CourseTable;