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 (

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;