#46 Manage assignments page shows table of assignments for a specific course.

frontend/src/App.js

@@ -9,6 +9,7 @@ import AssignmentPage from "./pages/AssignmentPage";
 import ManagePage from "./pages/ManagePage";
 import ManageStudentsPage from "./pages/ManageStudentsPage";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
+import ManageAssignmentsPage from "./pages/ManageAssignmentsPage";
 
 const AuthRoute = ({ isAuthenticated = true, path, children }) => {
   return (
@@ -70,6 +71,17 @@ function App() {
           );
         }}
       </Route>
+
+      <Route path="/manage/:id/assignments">
+        {(params) => {
+          return (
+            <AuthenticatedRoute>
+              <ManageAssignmentsPage cid={params.id} />
+            </AuthenticatedRoute>
+          );
+        }}
+      </Route>
+
     </div>
   );
 }

frontend/src/pages/ManageAssignmentsPage.jsx

@@ -0,0 +1,159 @@
+import { useEffect, useState } from "react";
+import { Container, Table, Button, Form } from "react-bootstrap";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+
+const ManageAssignmentsPage = ({ cid }) => {
+  const [courseData, setCourseData] = useState({});
+  const [assignmentData, setAssignmentData] = useState([]);
+  const [showAddAssignmentForm, setShowAddAssignmentForm] = useState(false);
+
+  const AddAssignmentForm = () => {
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [duedate, setDuedate] = useState("");
+
+    return (
+      <div>
+        <Form
+          className="my-4 p-2 border"
+          onSubmit={() => {
+            submitAssignmentForm(name, description, duedate);
+          }}
+        >
+          <Form.Group controlId="assignmentName">
+            <Form.Label>Name</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Enter assignment name"
+              onChange={(e) => setName(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="assignmentDescription">
+            <Form.Label>Description</Form.Label>
+            <Form.Control
+              as="textarea"
+              rows={4}
+              placeholder="Enter assignment description"
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="assignmentDuedate">
+            <Form.Label>Due Date</Form.Label>
+            <Form.Control
+              type="datetime-local"
+              placeholder="Due date"
+              onChange={(e) => setDuedate(e.target.value)}
+            />
+          </Form.Group>
+          <Button className="my-2" type="submit" variant="success">
+            Submit
+          </Button>
+        </Form>
+      </div>
+    );
+  };
+
+  const submitAssignmentForm = (name, description, duedate) => {
+    makeRequest({
+      endpoint: "assignment",
+      method: "POST",
+      body: {
+        name,
+        description,
+        course_id: cid,
+        due_date: duedate,
+      },
+    });
+  };
+
+  const sendDeleteAssignmentRequest = (id) => {
+    makeRequest({
+      endpoint: `assignment/${id}`,
+      method: "DELETE",
+    }).then((resp) => {
+      window.location.reload();
+    });
+  };
+
+  useEffect(() => {
+    makeRequest({
+      endpoint: `course/${cid}/assignments`,
+      method: "GET",
+    })
+      .then((req) => req.json())
+      .then(async (data) => {
+        setAssignmentData(data.assignments);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+
+    makeRequest({
+      endpoint: `course/${cid}`,
+      method: "GET",
+    })
+      .then((req) => req.json())
+      .then(async (data) => {
+        setCourseData(data);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }, []);
+
+  return (
+    <div>
+      <MyNavbar />
+      <Container className="p-5 border">
+        <h1 className="mb-4">{courseData.name}</h1>
+        <h3 className="mb-4">Manage Assignments</h3>
+        <Button
+          className="my-3"
+          variant="primary"
+          onClick={() => {
+            setShowAddAssignmentForm(!showAddAssignmentForm);
+          }}
+        >
+          {(showAddAssignmentForm && "-") || "+"} Add assignment
+        </Button>
+        {showAddAssignmentForm && <AddAssignmentForm />}
+        <Table bordered striped hover>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Name</th>
+              <th>Due date</th>
+              <th>Manage</th>
+            </tr>
+          </thead>
+          <tbody>
+            {assignmentData.map((assignment, k) => {
+              return (
+                <tr key={k}>
+                  <td>{assignment.id}</td>
+                  <td>{assignment.name}</td>
+                  <td>{assignment.due_date}</td>
+                  <td>
+                    <div>
+                      <Button
+                        variant="danger"
+                        onClick={() =>
+                          sendDeleteAssignmentRequest(assignment.id)
+                        }
+                      >
+                        Delete
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Table>
+      </Container>
+    </div>
+  );
+};
+
+export default ManageAssignmentsPage;