frontend/src/App.js

@@ -6,6 +6,7 @@ import LogoutPage from "./pages/LogoutPage";
 import RegisterPage from "./pages/RegisterPage";
 import CoursePage from "./pages/CoursePage";
 import ManagePage from "./pages/ManagePage";
+import ManageStudentsPage from "./pages/ManageStudentsPage";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
 
 function App() {
@@ -47,6 +48,16 @@ function App() {
           <ManagePage />
         </AuthenticatedRoute>
       </Route>
+
+      <Route path="/manage/:cid/students">
+        {(params) => {
+          return (
+            <AuthenticatedRoute>
+              <ManageStudentsPage cid={params.cid} />
+            </AuthenticatedRoute>
+          );
+        }}
+      </Route>
     </div>
   );
 }

frontend/src/pages/ManageStudentsPage.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { Container, Table } from "react-bootstrap";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+
+const ManageStutentsPage = ({cid}) => {
+  const [studentData, setStudentData] = useState([]);
+
+  useEffect(() => {
+    // makeRequest({
+    //   url: `http://localhost:5000/course/${cid}/students`,
+    //   method: "GET",
+    // })
+    //   .then((req) => req.json())
+    //   .then((data) => {
+    //     setStudentData(data.courses);
+    //   })
+    //   .catch((err) => {
+    //     console.error(err);
+    //   });
+  }, []);
+
+  return (
+    <div>
+      <MyNavbar />
+      <Container className="p-5 border">
+        <h1 className="mb-4">Manage Students</h1>
+        <Table bordered striped hover>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Username</th>
+              <th>Email</th>
+              <th>Manage</th>
+            </tr>
+          </thead>
+          <tbody>
+            {studentData.map((student, k) => {
+              return (
+                <tr key={k}>
+                  <td>{student.id}</td>
+                  <td>{student.username}</td>
+                  <td>{student.email}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Table>
+      </Container>
+    </div>
+  );
+};
+
+export default ManageStutentsPage;