#31 Added course page that querys backend for a specific course id

frontend/src/App.js

@@ -4,6 +4,7 @@ import HomePage from "./pages/HomePage";
 import LoginPage from "./pages/LoginPage";
 import LogoutPage from "./pages/LogoutPage";
 import RegisterPage from "./pages/RegisterPage";
+import CoursePage from "./pages/CoursePage";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
 
 function App() {
@@ -20,15 +21,25 @@ function App() {
         </AuthenticatedRoute>
       </Route>
       <Route path="/register">
-        <AuthenticatedRoute isAuthenticated={false}>
+        <AuthenticatedRoute>
           <RegisterPage />
         </AuthenticatedRoute>
       </Route>
       <Route path="/">
-        <AuthenticatedRoute isAuthenticated={true}>
+        <AuthenticatedRoute>
           <HomePage />
         </AuthenticatedRoute>
       </Route>
+
+      <Route path="/course/:id">
+        {(params) => {
+          return (
+            <AuthenticatedRoute>
+              <CoursePage id={params.id} />
+            </AuthenticatedRoute>
+          );
+        }}
+      </Route>
     </div>
   );
 }

frontend/src/components/AuthenticatedRoute.jsx

@@ -2,7 +2,7 @@ import { useContext, useEffect } from "react";
 import { useLocation } from "wouter";
 import UserContext from "../contexts/UserContext";
 
-const AuthenticatedRoute = ({ children, isAuthenticated }) => {
+const AuthenticatedRoute = ({ children, isAuthenticated=true }) => {
   const { currentUser } = useContext(UserContext);
   const [location, setLocation] = useLocation();
 

frontend/src/components/CoursesWidget.jsx

@@ -9,6 +9,9 @@ const CoursesWidget = ({ className = "" }) => {
   const { currentUser } = useContext(UserContext);
 
   useEffect(() => {
+    if (!currentUser.id) {
+      return;
+    }
     makeRequest({ url: `http://localhost:5000/user/${currentUser.id}/courses` })
       .then((resp) => resp.json())
       .then((data) => {
@@ -28,7 +31,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.course_code}</h2>
+                <h2 className="text-center py-5 border">
+                  {course.course_code}
+                </h2>
                 <Card.Body>
                   <Card.Title>{course.name}</Card.Title>
                   <Card.Text>{course.instructor}</Card.Text>

frontend/src/pages/CoursePage.jsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { Container } from "react-bootstrap";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+
+const CoursePage = ({ id }) => {
+  const [courseData, setCourseData] = useState({});
+
+  useEffect(() => {
+    makeRequest({ url: `http://localhost:5000/course/${id}` })
+      .then((resp) => resp.json())
+      .then((data) => {
+        setCourseData(data);
+      });
+  }, []);
+
+  return (
+    <div>
+      <MyNavbar />
+      <Container className="p-5 border">
+        <h1>{courseData.name}</h1>
+        <h4 className="mb-4">{courseData.instructor}</h4>
+        <hr />
+        <h4>Assignments</h4>
+      </Container>
+    </div>
+  );
+};
+
+export default CoursePage;