#58 add admin logic

frontend/src/pages/ManagePage.jsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { useContext, useEffect, useState } from "react";
-import { Container, Table } from "react-bootstrap";
+import { Form, Button, Container, Table } from "react-bootstrap";
 import { Link } from "wouter";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
@@ -8,6 +9,89 @@ import { makeRequest } from "../utils.ts";
 const ManagePage = () => {
   const [courseData, setCourseData] = useState([]);
   const { currentUser } = useContext(UserContext);
+  const [showAddCourseForm, setShowAddCourseForm] = useState(false);
+
+  const AddCourseForm = () => {
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [username, setUsername] = useState("");
+    const [coursecode, setCoursecode] = useState("");
+
+    const submitCourseForm = () => {
+      makeRequest({
+        endpoint: `course/${username}`,
+        method: "POST",
+        body: {
+          course_code: coursecode,
+          name,
+          description,
+        },
+      })
+        .then((resp) => resp.json())
+        .then((data) => {
+          window.location.reload();
+        });
+    };
+
+    return (
+      <div>
+        <Form
+          className="my-4 p-2 border justify-between items-center"
+          onSubmit={(e) => {
+            e.preventDefault();
+            submitCourseForm();
+          }}
+        >
+          <Form.Group controlId="courseCode">
+            <Form.Label>Course code</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Enter course code"
+              onChange={(e) => setCoursecode(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="courseName">
+            <Form.Label>Name</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Enter course name"
+              onChange={(e) => setName(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="courseDescription">
+            <Form.Label>Description</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Enter course description"
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="courseInstructor">
+            <Form.Label>Instructor Username</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Instructor"
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </Form.Group>
+          <Button className="my-2" type="submit" variant="success">
+            Submit
+          </Button>
+        </Form>
+      </div>
+    );
+  };
+
+  const sendDeleteCourseRequest = (cid) => {
+    makeRequest({
+      endpoint: `course/${cid}`,
+      method: "DELETE",
+    })
+      .then((resp) => resp.json())
+      .then((data) => {
+        window.location.reload();
+      });
+  };
 
   useEffect(() => {
     makeRequest({
@@ -28,6 +112,18 @@ const ManagePage = () => {
       <MyNavbar />
       <Container className="p-5 border">
         <h1 className="mb-4">Manage Courses</h1>
+        {currentUser.role === "admin" && (
+          <Button
+            className="my-3"
+            variant="primary"
+            onClick={() => {
+              setShowAddCourseForm(!showAddCourseForm);
+            }}
+          >
+            {(showAddCourseForm && "-") || "+"} Add course
+          </Button>
+        )}
+        {showAddCourseForm && <AddCourseForm />}
         <Table bordered striped hover>
           <thead>
             <tr>
@@ -59,6 +155,17 @@ const ManagePage = () => {
                       <Link href={`/manage/${course.id}/assignments`}>
                         Assignments
                       </Link>
+                      {currentUser?.role === "admin" && (
+                        <React.Fragment>
+                          <br />
+                          <Button
+                            variant="danger"
+                            onClick={() => sendDeleteCourseRequest(course.id)}
+                          >
+                            Delete
+                          </Button>
+                        </React.Fragment>
+                      )}
                     </div>
                   </td>
                 </tr>