Merge pull request #130 from unkn-wn/temp

Details page stateful now
unkn-wn · Nov 17, 2024 · e6273f4 · e6273f4
2 parents f4840c0 + f5ccc20
commit e6273f4
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 150 deletions.
diff --git a/src/components/calendar.js b/src/components/calendar.js
@@ -122,7 +122,7 @@ const Calendar = (props) => {
 
     useEffect(() => {
         getCourseData(subjectCode, courseCode, title);
-    }, []);
+    }, [subjectCode, courseCode, title]);
 
     if (Object.values(lectures).every(lecture => lecture.length === 0)) {
         return (

diff --git a/src/components/card.js b/src/components/card.js
@@ -2,8 +2,11 @@ import { semesters } from "../lib/utils"
 import React from 'react';
 import Link from 'next/link'
 
+import { useRouter } from 'next/router';
+
 
 const Card = ({ course, searchTerm }) => {
+  const router = useRouter();
 
   const instructors = new Set();
   const availableSemesters = [];
@@ -18,40 +21,51 @@ const Card = ({ course, searchTerm }) => {
   });
   const uniqueInstructors = [...instructors];
 
+  const handleLink = () => {
+    router.push({
+      pathname: `/`,
+      query: { q: searchTerm }
+    });
+  }
+
 
   return (
     <>
       <Link
-        href={{pathname: `/detail/${course.detailId}`, query: { q: searchTerm }}}
+        href={{ pathname: `/detail/${course.detailId}` }}
+        passHref
         className="flex flex-col bg-zinc-800 p-6 rounded-md shadow-md hover:scale-[1.02] transition hover:transition cursor-pointer">
 
-        <h2 className="lg:text-lg md:text-lg font-bold text-white">{course.subjectCode} {course.courseCode}: {course.title}</h2>
-        <p className="lg:text-sm text-sm text-zinc-400 font-medium my-1">
-          {course.credits[1] > 1
-            ? `${course.credits[1]} Credits`
-            : `${course.credits[1]} Credit`}
-          {` | `}
-          {uniqueInstructors[0]}
-          {uniqueInstructors.length > 1 && ", "}
-          {uniqueInstructors.length > 1 &&
-            uniqueInstructors[1]
-          }
-        </p>
-
-        <p className="text-sm text-zinc-300 mb-4 break-words grow">
-          <span>{course.description.length > 300
-            ? `${course.description.substring(0, 300)}...`
-            : course.description}
-          </span>
-        </p>
-
-        <div className="flex flex-row flex-wrap">
-          {course.sched.includes("Distance Learning") && <p className="text-sm px-2 py-1 mx-1 my-1 rounded-full border-solid border border-purple-500 bg-purple-300 whitespace-nowrap">
-            Distance Learning
-          </p>}
-          {availableSemesters.map((sem, i) => (
-            (i < 2) && <span className="text-sm text-white px-2 py-1 mx-1 my-1 rounded-full bg-sky-700 whitespace-nowrap" key={i}>{sem}</span>
-          ))}
+        <div onClick={() => handleLink()}>
+          <h2 className="lg:text-lg md:text-lg font-bold text-white">{course.subjectCode} {course.courseCode}: {course.title}</h2>
+          <p className="lg:text-sm text-sm text-zinc-400 font-medium my-1">
+            {course.credits[1] > 1
+              ? `${course.credits[1]} Credits`
+              : `${course.credits[1]} Credit`}
+            {` | `}
+            {uniqueInstructors[0]}
+            {uniqueInstructors.length > 1 && ", "}
+            {uniqueInstructors.length > 1 &&
+              uniqueInstructors[1]
+            }
+          </p>
+
+          <p className="text-sm text-zinc-300 mb-4 break-words grow">
+            <span>{course.description.length > 300
+              ? `${course.description.substring(0, 300)}...`
+              : course.description}
+            </span>
+          </p>
+
+          <div className="flex flex-row flex-wrap">
+            {course.sched.includes("Distance Learning") && <p className="text-sm px-2 py-1 mx-1 my-1 rounded-full border-solid border border-purple-500 bg-purple-300 whitespace-nowrap">
+              Distance Learning
+            </p>}
+            {availableSemesters.map((sem, i) => (
+              (i < 2) && <span className="text-sm text-white px-2 py-1 mx-1 my-1 rounded-full bg-sky-700 whitespace-nowrap" key={i}>{sem}</span>
+            ))}
+          </div>
+
         </div>
       </Link >
     </>

diff --git a/src/components/prereqs.js b/src/components/prereqs.js
@@ -4,12 +4,6 @@ import Link from 'next/link';
 const Prereqs = ({ course }) => {
   const router = useRouter();
 
-  const handleClick = (detailId) => {
-    router.push(`/detail/${detailId}`).then(() => {
-      router.reload();
-    });
-  };
-
   const parsePrereqs = (prereq, i) => {
     if (prereq.split(' ').length == 2) {
       const [detailId, concurrent] = prereq.split(' ');
@@ -25,7 +19,7 @@ const Prereqs = ({ course }) => {
 
       return (
         <span className='' key={i}>
-          <a onClick={() => handleClick(detailId)}
+          <a onClick={() => router.push(`/detail/${detailId}`)}
             className='underline decoration-dotted hover:text-blue-400 transition-all duration-300 ease-out text-blue-600'>
             {subjectCode} {courseNumber}
           </a>