From 4faecbd29c86c9c823a93d96373e07354a2c06af Mon Sep 17 00:00:00 2001
From: Jagraj Aulakh <aulakhjagraj@gmail.com>
Date: Thu, 13 Apr 2023 16:35:25 -0400
Subject: [PATCH 1/3] #45 Made manage student page. Doesn't call backend yet

---
 frontend/src/App.js                       | 11 +++++
 frontend/src/pages/ManageStudentsPage.jsx | 54 +++++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 frontend/src/pages/ManageStudentsPage.jsx

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 0f1ece6..717c362 100644
--- a/frontend/src/App.js
+++ b/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>
   );
 }
diff --git a/frontend/src/pages/ManageStudentsPage.jsx b/frontend/src/pages/ManageStudentsPage.jsx
new file mode 100644
index 0000000..b118721
--- /dev/null
+++ b/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;
-- 
2.49.1


From a6ae87abf21ec2305e7e2e7180637c1480fcc8c9 Mon Sep 17 00:00:00 2001
From: Jagraj Aulakh <aulakhjagraj@gmail.com>
Date: Thu, 13 Apr 2023 18:05:43 -0400
Subject: [PATCH 2/3] #45 Added backend route to enroll student by username

---
 backend/app/routes.py | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/backend/app/routes.py b/backend/app/routes.py
index 9b9e64e..5c57a2e 100644
--- a/backend/app/routes.py
+++ b/backend/app/routes.py
@@ -24,7 +24,6 @@ def check_data(data, required_fields):
 def instructor_required(func):
     @wraps(func)
     def dec(*args, **kwargs):
-        print(current_user)
         if current_user.role != "instructor":
             return error_response(400, "User is not instructor!")
         return func(*args, **kwargs)
@@ -173,3 +172,28 @@ def enroll_student(uid, cid):
     resp = {"user": u.to_dict(), "course": c.to_dict()}
     return jsonify(resp)
 
+@bp.route("/user/<string:username>/enroll/<int:cid>", methods=["POST"])
+@login_required
+@instructor_required
+def enroll_student_by_username(username, cid):
+    u = User.query.filter_by(username=username).first()
+    if not u:
+        return error_response(400, f"User with username {username} does not exist")
+
+    c = Course.query.get(cid)
+    if not c:
+        return error_response(400, f"Course with id {cid} does not exist")
+
+    if request.method == "POST":
+        if not u.enroll(c):
+            return error_response(
+                400, f"User {u.id} is already enrolled in course {cid}"
+            )
+
+    elif request.method == "DELETE":
+        if not u.unenroll(c):
+            return error_response(400, f"User {u.id} is not enrolled in course {cid}")
+
+    resp = {"user": u.to_dict(), "course": c.to_dict()}
+    return jsonify(resp)
+
-- 
2.49.1


From 29e417c9d0cacbc95ec2c1c4a4dd99852011cad7 Mon Sep 17 00:00:00 2001
From: Jagraj Aulakh <aulakhjagraj@gmail.com>
Date: Thu, 13 Apr 2023 18:07:06 -0400
Subject: [PATCH 3/3] #45 Add student form, unenroll button

---
 frontend/src/App.js                       |  2 +-
 frontend/src/pages/ManageStudentsPage.jsx | 95 +++++++++++++++++++----
 2 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 717c362..946d60a 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -23,7 +23,7 @@ function App() {
         </AuthenticatedRoute>
       </Route>
       <Route path="/register">
-        <AuthenticatedRoute>
+        <AuthenticatedRoute isAuthenticated={false}>
           <RegisterPage />
         </AuthenticatedRoute>
       </Route>
diff --git a/frontend/src/pages/ManageStudentsPage.jsx b/frontend/src/pages/ManageStudentsPage.jsx
index b118721..2da86f2 100644
--- a/frontend/src/pages/ManageStudentsPage.jsx
+++ b/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>
               );
             })}
-- 
2.49.1