From 97e958697f88302965ca3047a2e48d1489d1865a Mon Sep 17 00:00:00 2001
From: Jagraj Aulakh <aulakhjagraj@gmail.com>
Date: Fri, 14 Apr 2023 18:31:04 -0400
Subject: [PATCH] #76 Added course content page

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

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 3ef2438..ef4209a 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 AssignmentPage from "./pages/AssignmentPage";
+import ContentPage from "./pages/ContentPage";
 import ManagePage from "./pages/ManagePage";
 import ManageStudentsPage from "./pages/ManageStudentsPage";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
@@ -50,6 +51,16 @@ function App() {
         }}
       </Route>
 
+      <Route path="/content/:id">
+        {(params) => {
+          return (
+            <AuthenticatedRoute>
+              <ContentPage id={params.id} />
+            </AuthenticatedRoute>
+          );
+        }}
+      </Route>
+
       <Route path="/assignment/:id/edit">
         {(params) => {
           return (
diff --git a/frontend/src/pages/ContentPage.jsx b/frontend/src/pages/ContentPage.jsx
new file mode 100644
index 0000000..608389e
--- /dev/null
+++ b/frontend/src/pages/ContentPage.jsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { Container } from "react-bootstrap";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+
+const ContentPage = ({ id }) => {
+  const [contentData, setContentData] = useState({});
+  const [courseData, setCourseData] = useState({});
+
+  useEffect(() => {
+    const wrap = async () => {
+      let resp = await makeRequest({ endpoint: `content/${id}` });
+      let data = await resp.json();
+      setContentData(data);
+
+      resp = await makeRequest({ endpoint: `course/${data.course_id}` });
+      data = await resp.json();
+      setCourseData(data);
+    };
+    wrap();
+  }, []);
+
+  const Title = ({ children, className, ...rest }) => {
+    return (
+      <p className={`${className} fs-6`} {...rest}>
+        {children}
+      </p>
+    );
+  };
+
+  const Value = ({ children, className, ...rest }) => {
+    return (
+      <div className={`${className} fs-4`} {...rest}>
+        {children}
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <MyNavbar />
+      <Container className="p-5 border">
+        <h1>{courseData.name}</h1>
+        <hr />
+
+        <Container className="p-5 border">
+          <Title>Name</Title>
+          <Value>{contentData.name}</Value>
+          <hr />
+          <Title>Created</Title>
+          <Value>{contentData.created_at}</Value>
+          <hr />
+          <Title>Body</Title>
+          <Value>
+            {contentData.body?.split("\n").map((line, k) => {
+              return <div key={k}>{line}</div>;
+            })}
+          </Value>
+        </Container>
+      </Container>
+    </div>
+  );
+};
+
+export default ContentPage;