frontend/src/components/AssignmentsWidget.jsx

@@ -0,0 +1,43 @@
+import { useContext, useEffect, useState } from "react";
+import { Card, Container } from "react-bootstrap";
+import { Link } from "wouter";
+import UserContext from "../contexts/UserContext";
+import { makeRequest } from "../utils.ts";
+
+const AssignmentsWidget = ({ className = "", cid }) => {
+  const [assignmentData, setAssignmentData] = useState([]);
+
+  useEffect(() => {
+    makeRequest({ endpoint: `course/${cid}/assignments` })
+      .then((resp) => resp.json())
+      .then((data) => {
+        setAssignmentData(data.assignments);
+      });
+  }, [setAssignmentData]);
+
+  return (
+    <Container className={`${className} py-3 grid`}>
+      <div className="row justify-content-center">
+        {assignmentData.map((assignment, i) => {
+          return (
+            <Link
+              is="a"
+              key={i}
+              href={`/assignment/${assignment.id}`}
+              className="col col-lg-2"
+            >
+              <Card role="button" className="m-2" style={{ width: "300px" }}>
+                <Card.Body>
+                  <Card.Title className="text-center">{assignment.name}</Card.Title>
+                  <Card.Text>Due: {assignment.due_date}</Card.Text>
+                </Card.Body>
+              </Card>
+            </Link>
+          );
+        })}
+      </div>
+    </Container>
+  );
+};
+
+export default AssignmentsWidget;

frontend/src/pages/CoursePage.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Container } from "react-bootstrap";
+import AssignmentsWidget from "../components/AssignmentsWidget";
 import MyNavbar from "../components/MyNavbar";
 import { makeRequest } from "../utils.ts";
 
@@ -21,7 +22,10 @@ const CoursePage = ({ id }) => {
         <h1>{courseData.name}</h1>
         <h4 className="mb-4">{courseData.instructor}</h4>
         <hr />
-        <h4>Assignments</h4>
+        <div className="border">
+          <h3>Assignments</h3>
+          <AssignmentsWidget cid={id} />
+        </div>
       </Container>
     </div>
   );