#44 Made manage page. Displays table of all courses that the instuctor is teaching

frontend/src/pages/ManagePage.jsx

@@ -0,0 +1,74 @@
+import { useContext, useEffect, useState } from "react";
+import { Container, Table } from "react-bootstrap";
+import { Link } from "wouter";
+import MyNavbar from "../components/MyNavbar";
+import UserContext from "../contexts/UserContext";
+import { makeRequest } from "../utils.ts";
+
+const ManagePage = () => {
+  const [courseData, setCourseData] = useState([]);
+  const { currentUser } = useContext(UserContext);
+
+  useEffect(() => {
+    makeRequest({
+      url: `http://localhost:5000/user/${currentUser.id}/courses`,
+      method: "GET",
+    })
+      .then((req) => req.json())
+      .then((data) => {
+        setCourseData(data.courses);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }, []);
+
+  return (
+    <div>
+      <MyNavbar />
+      <Container className="p-5 border">
+        <h1 className="mb-4">Manage Courses</h1>
+        <Table bordered striped hover>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Course Code</th>
+              <th>Name</th>
+              <th>Instructor</th>
+              <th>Manage</th>
+            </tr>
+          </thead>
+          <tbody>
+            {courseData.map((course, k) => {
+              return (
+                <tr key={k}>
+                  <td>{course.id}</td>
+                  <td>{course.course_code}</td>
+                  <td>{course.name}</td>
+                  <td>{course.instructor}</td>
+                  <td>
+                    <div>
+                      <Link href={`/manage/${course.id}/students`}>
+                        Students
+                      </Link>
+                      <br />
+                      <Link href={`/manage/${course.id}/content`}>
+                        Course Content
+                      </Link>
+                      <br />
+                      <Link href={`/manage/${course.id}/assignments`}>
+                        Assignments
+                      </Link>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Table>
+      </Container>
+    </div>
+  );
+};
+
+export default ManagePage;