frontend/src/components/CoursesWidget.jsx

@@ -1,43 +1,25 @@
+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 CoursesWidget = ({ className = "" }) => {
-  const dummyData = [
+  const [courseData, setCourseData] = useState([]);
-    {
+  const { currentUser } = useContext(UserContext);
-      course_id: 1,
+
-      course_title: "Advanced Website Design",
+  useEffect(() => {
-      couse_code: "COMP 2707",
+    makeRequest({ url: `http://localhost:5000/user/${currentUser.id}/courses` })
-      instructor: "Saja Al Mamoori",
+      .then((resp) => resp.json())
-    },
+      .then((data) => {
-    {
+        setCourseData(data.courses);
-      course_id: 2,
+      });
-      course_title: "Introduction to Roman Civilization",
+  }, [setCourseData, currentUser]);
-      couse_code: "GRST 1200",
+
-      instructor: "Max Nelson",
-    },
-    {
-      course_id: 3,
-      course_title: "Software Verification and Testing",
-      couse_code: "COMP 4110",
-      instructor: "Serif Saad",
-    },
-    {
-      course_id: 4,
-      course_title: "Selected Topics in Software Engineering",
-      couse_code: "COMP 4800",
-      instructor: "Jessica Chen",
-    },
-    {
-      course_id: 5,
-      course_title: "Project Management: Techniques and Tools",
-      couse_code: "COMP 4990",
-      instructor: "Arunita Jaekel",
-    },
-  ];
   return (
     <Container className={`${className} py-3 grid`}>
       <div className="row justify-content-center">
-        {dummyData.map((course, i) => {
+        {courseData.map((course, i) => {
           return (
             <Link
               is="a"
@@ -46,9 +28,9 @@ const CoursesWidget = ({ className = "" }) => {
               className="col col-lg-2"
             >
               <Card role="button" className="m-2" style={{ width: "300px" }}>
-                <h2 className="text-center py-5 border">{course.couse_code}</h2>
+                <h2 className="text-center py-5 border">{course.course_code}</h2>
                 <Card.Body>
-                  <Card.Title>{course.course_title}</Card.Title>
+                  <Card.Title>{course.name}</Card.Title>
                   <Card.Text>{course.instructor}</Card.Text>
                 </Card.Body>
               </Card>

frontend/src/utils.ts

@@ -1,11 +1,14 @@
-const makeRequest = ({ url, method, body = {} }): Promise<Response> => {
+const makeRequest = ({ url, method, body = null }): Promise<Response> => {
-  return fetch(url, {
+  const req: RequestInit = {
     method: method,
     credentials: "include",
-    body: JSON.stringify(body),
     headers: { "content-type": "application/json" },
     mode: "cors",
-  });
+  };
+  if (body) {
+    req["body"] = JSON.stringify(body);
+  }
+  return fetch(url, req);
 };
 
 const sendLoginRequest = async (