#47 Made manage content page

frontend/src/App.js

@@ -10,6 +10,7 @@ import ManagePage from "./pages/ManagePage";
 import ManageStudentsPage from "./pages/ManageStudentsPage";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
 import ManageAssignmentsPage from "./pages/ManageAssignmentsPage";
+import ManageContentPage from "./pages/ManageContentPage";
 
 const AuthRoute = ({ isAuthenticated = true, path, children }) => {
   return (
@@ -72,6 +73,16 @@ function App() {
         }}
       </Route>
 
+      <Route path="/manage/:id/content">
+        {(params) => {
+          return (
+            <AuthenticatedRoute>
+              <ManageContentPage cid={params.id} />
+            </AuthenticatedRoute>
+          );
+        }}
+      </Route>
+
       <Route path="/manage/:id/assignments">
         {(params) => {
           return (

frontend/src/pages/ManageContentPage.jsx

@@ -0,0 +1,149 @@
+import { useEffect, useState } from "react";
+import { Container, Table, Button, Form } from "react-bootstrap";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+
+const ManageContentPage = ({ cid }) => {
+  const [courseData, setCourseData] = useState({});
+  const [contentData, setContentData] = useState([]);
+  const [showAddContentForm, setShowAddContentForm] = useState(false);
+
+  const AddContentForm = () => {
+    const [name, setName] = useState("");
+    const [body, setBody] = useState("");
+
+    return (
+      <div>
+        <Form
+          className="my-4 p-2 border"
+          onSubmit={() => {
+            submitContentForm(name, body);
+          }}
+        >
+          <Form.Group controlId="contentName">
+            <Form.Label>Name</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Enter content name"
+              onChange={(e) => setName(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="contentBody">
+            <Form.Label>Body</Form.Label>
+            <Form.Control
+              as="textarea"
+              rows={4}
+              placeholder="Enter content body"
+              onChange={(e) => setBody(e.target.value)}
+            />
+          </Form.Group>
+          <Button className="my-2" type="submit" variant="success">
+            Submit
+          </Button>
+        </Form>
+      </div>
+    );
+  };
+
+  const submitContentForm = (name, body) => {
+    makeRequest({
+      endpoint: "content",
+      method: "POST",
+      body: {
+        name,
+        body,
+        course_id: cid,
+      },
+    });
+  };
+
+  const sendDeleteContentRequest = (id) => {
+    makeRequest({
+      endpoint: `content/${id}`,
+      method: "DELETE",
+    }).then((resp) => {
+      window.location.reload();
+    });
+  };
+
+  useEffect(() => {
+    makeRequest({
+      endpoint: `course/${cid}/content`,
+      method: "GET",
+    })
+      .then((req) => req.json())
+      .then(async (data) => {
+        setContentData(data.content);
+      })
+      .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 Course Content</h3>
+        <Button
+          className="my-3"
+          variant="primary"
+          onClick={() => {
+            setShowAddContentForm(!showAddContentForm);
+          }}
+        >
+          {(showAddContentForm && "-") || "+"} Add course content
+        </Button>
+        {showAddContentForm && <AddContentForm />}
+        <Table bordered striped hover>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Name</th>
+              <th>Created</th>
+              <th>Manage</th>
+            </tr>
+          </thead>
+          <tbody>
+            {contentData.map((content, k) => {
+              return (
+                <tr key={k}>
+                  <td>{content.id}</td>
+                  <td>{content.name}</td>
+                  <td>{content.created_at}</td>
+                  <td>
+                    <div>
+                      <Button
+                        variant="danger"
+                        onClick={() =>
+                          sendDeleteContentRequest(content.id)
+                        }
+                      >
+                        Delete
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Table>
+      </Container>
+    </div>
+  );
+};
+
+export default ManageContentPage;