#45 Add student form, unenroll button

frontend/src/App.js

@@ -23,7 +23,7 @@ function App() {
         </AuthenticatedRoute>
       </Route>
       <Route path="/register">
-        <AuthenticatedRoute>
+        <AuthenticatedRoute isAuthenticated={false}>
           <RegisterPage />
         </AuthenticatedRoute>
       </Route>

frontend/src/pages/ManageStudentsPage.jsx

@@ -1,30 +1,89 @@
 import { useEffect, useState } from "react";
-import { Container, Table } from "react-bootstrap";
+import { Container, Table, Button, Form } from "react-bootstrap";
 import MyNavbar from "../components/MyNavbar";
 import { makeRequest } from "../utils.ts";
 
-const ManageStutentsPage = ({cid}) => {
+const ManageStutentsPage = ({ cid }) => {
   const [studentData, setStudentData] = useState([]);
+  const [showAddStudentForm, setShowAddStudentForm] = useState(false);
 
+  const submitStudentForm = async (username) => {
+    await makeRequest({
+      url: `http://localhost:5000/user/${username}/enroll/${cid}`,
+      method: "POST",
+    });
+    window.location.reload();
+    return false;
+  };
+
+  const AddStudentForm = () => {
+    const [username, setUsername] = useState("");
+
+    return (
+      <div>
+        <Form
+          className="my-4 p-2 border"
+          onSubmit={() => {
+            submitStudentForm(username);
+          }}
+        >
+          <Form.Group controlId="studentUsername">
+            <Form.Label>Username</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Enter student's username"
+              onChange={(e) => setUsername(e.target.value)}
+            />
+            <Form.Text>
+              Make sure that a user with the username exists and is not already
+              enrolled in this course
+            </Form.Text>
+          </Form.Group>
+          <Button className="my-2" type="submit" variant="success">
+            Submit
+          </Button>
+        </Form>
+      </div>
+    );
+  };
   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);
-    //   });
+    makeRequest({
+      url: `http://localhost:5000/course/${cid}/students`,
+      method: "GET",
+    })
+      .then((req) => req.json())
+      .then(async (data) => {
+        setStudentData(data.students);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
   }, []);
 
+  const sendUnenrollRequest = (uid) => {
+    makeRequest({
+      url: `http://localhost:5000/user/${uid}/enroll/${cid}`,
+      method: "DELETE",
+    }).then((resp) => {
+      window.location.reload();
+    });
+  };
+
   return (
     <div>
       <MyNavbar />
       <Container className="p-5 border">
         <h1 className="mb-4">Manage Students</h1>
+        <Button
+          className="my-3"
+          variant="primary"
+          onClick={() => {
+            setShowAddStudentForm(!showAddStudentForm);
+          }}
+        >
+          {(showAddStudentForm && "-") || "+"} Add student
+        </Button>
+        {showAddStudentForm && <AddStudentForm />}
         <Table bordered striped hover>
           <thead>
             <tr>
@@ -41,6 +100,16 @@ const ManageStutentsPage = ({cid}) => {
                   <td>{student.id}</td>
                   <td>{student.username}</td>
                   <td>{student.email}</td>
+                  <td>
+                    <div>
+                      <Button
+                        variant="danger"
+                        onClick={() => sendUnenrollRequest(student.id)}
+                      >
+                        Unenroll
+                      </Button>
+                    </div>
+                  </td>
                 </tr>
               );
             })}