From ecbbcb04c088f69203b508651991c832d6ebaa98 Mon Sep 17 00:00:00 2001
From: Jagraj Aulakh <aulakhjagraj@gmail.com>
Date: Fri, 14 Apr 2023 15:11:27 -0400
Subject: [PATCH] #62 Made assignment page, showing name, description, and due
 date

---
 frontend/src/App.js                   | 11 ++++++
 frontend/src/pages/AssignmentPage.jsx | 50 +++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 frontend/src/pages/AssignmentPage.jsx

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 3ecc99f..242083c 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -5,6 +5,7 @@ import LoginPage from "./pages/LoginPage";
 import LogoutPage from "./pages/LogoutPage";
 import RegisterPage from "./pages/RegisterPage";
 import CoursePage from "./pages/CoursePage";
+import AssignmentPage from "./pages/AssignmentPage";
 import ManagePage from "./pages/ManagePage";
 import ManageStudentsPage from "./pages/ManageStudentsPage";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
@@ -46,6 +47,16 @@ function App() {
         }}
       </Route>
 
+      <Route path="/assignment/:id">
+        {(params) => {
+          return (
+            <AuthenticatedRoute>
+              <AssignmentPage id={params.id} />
+            </AuthenticatedRoute>
+          );
+        }}
+      </Route>
+
       <AuthRoute path="/manage">
           <ManagePage />
       </AuthRoute>
diff --git a/frontend/src/pages/AssignmentPage.jsx b/frontend/src/pages/AssignmentPage.jsx
new file mode 100644
index 0000000..a477dbd
--- /dev/null
+++ b/frontend/src/pages/AssignmentPage.jsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { Container } from "react-bootstrap";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+
+const AssignmentPage = ({ id }) => {
+  const [assignmentData, setAssignmentData] = useState({});
+
+  useEffect(() => {
+    makeRequest({ endpoint: `assignment/${id}` })
+      .then((resp) => resp.json())
+      .then((data) => {
+        setAssignmentData(data);
+      });
+  }, []);
+
+  const Title = ({ children, className, ...rest }) => {
+    return (
+      <p className={`${className} fs-6`} {...rest}>
+        {children}
+      </p>
+    );
+  };
+
+  const Value = ({ children, className, ...rest }) => {
+    return (
+      <p className={`${className} fs-4`} {...rest}>
+        {children}
+      </p>
+    );
+  };
+
+  return (
+    <div>
+      <MyNavbar />
+      <Container className="p-5 border">
+        <Title>Name</Title>
+        <Value>{assignmentData.name}</Value>
+        <hr />
+        <Title>Description</Title>
+        <Value>{assignmentData.description}</Value>
+        <hr />
+        <Title>Due Date</Title>
+        <Value>{assignmentData.due_date}</Value>
+      </Container>
+    </div>
+  );
+};
+
+export default AssignmentPage;
-- 
2.49.1