frontend/src/App.js

@@ -5,6 +5,7 @@ import LoginPage from "./pages/LoginPage";
 import LogoutPage from "./pages/LogoutPage";
 import RegisterPage from "./pages/RegisterPage";
 import CoursePage from "./pages/CoursePage";
+import ManagePage from "./pages/ManagePage";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
 
 function App() {
@@ -40,6 +41,12 @@ function App() {
           );
         }}
       </Route>
+
+      <Route path="/manage">
+        <AuthenticatedRoute>
+          <ManagePage />
+        </AuthenticatedRoute>
+      </Route>
     </div>
   );
 }

frontend/src/components/MyNavbar.jsx

@@ -32,8 +32,8 @@ const MyNavbar = () => {
           <Nav className="ms-auto">
             <MyLink href="/">Home</MyLink>
             {currentUser?.role === "instructor" &&
-              instructorLinks.map((item) => {
-                return <MyLink href={item.link}>{item.label}</MyLink>;
+              instructorLinks.map((item, k) => {
+                return <MyLink key={k} href={item.link}>{item.label}</MyLink>;
               })}
             {(currentUser?.id && <MyLink href="/logout">Logout</MyLink>) || (
               <MyLink href="/login">Login</MyLink>

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;