Fix clicking the timetable card from Home Page

Author: Austin-X

course-matrix/frontend/src/pages/Home/Home.tsx

@@ -4,7 +4,6 @@ import TimetableCard from "./TimetableCard";
 import TimetableCompareButton from "./TimetableCompareButton";
 import TimetableCreateNewButton from "./TimetableCreateNewButton";
 import { useGetTimetablesQuery } from "../../api/timetableApiSlice";
-import { Link } from "react-router-dom";
 
 export interface Timetable {
   id: number;
@@ -73,18 +72,14 @@ const Home = () => {
             <p className="text-sm text-muted-foreground">Loading...</p>
           ) : (
             data.map((timetable) => (
-              <Link
-                to={`/dashboard/timetable?edit=${timetable.id}`}
+              <TimetableCard
+                refetch={refetch}
                 key={timetable.id}
-              >
-                <TimetableCard
-                  refetch={refetch}
-                  timetableId={timetable.id}
-                  title={timetable.timetable_title}
-                  lastEditedDate={new Date(timetable.updated_at)}
-                  owner={name}
-                />
-              </Link>
+                timetableId={timetable.id}
+                title={timetable.timetable_title}
+                lastEditedDate={new Date(timetable.updated_at)}
+                owner={name}
+              />
             ))
           )}
         </div>

course-matrix/frontend/src/pages/Home/TimetableCard.tsx

@@ -11,6 +11,7 @@ import { Pencil } from "lucide-react";
 import { useState } from "react";
 import TimetableCardKebabMenu from "./TimetableCardKebabMenu";
 import { useUpdateTimetableMutation } from "@/api/timetableApiSlice";
+import { Link } from "react-router-dom";
 
 interface TimetableCardProps {
   refetch: () => void;
@@ -62,10 +63,12 @@ const TimetableCard = ({
   return (
     <Card className="w-full">
       <CardHeader>
-        <img
-          src="../../public/img/default-timetable-card-image.png"
-          alt="Timetable default image"
-        />
+        <Link to={`/dashboard/timetable?edit=${timetableId}`}>
+          <img
+            src="../../public/img/default-timetable-card-image.png"
+            alt="Timetable default image"
+          />
+        </Link>
         <div className="flex justify-between items-center">
           <CardTitle>
             <Input

course-matrix/frontend/src/pages/TimetableBuilder/TimetableBuilder.tsx

@@ -181,13 +181,12 @@ const TimetableBuilder = () => {
       form.setValue("offeringIds", existingOfferingIds);
       setLoadedOfferingIds(true);
 
-      const existingCourseCodes = (timetableEventsData?.courseEvents || []).map(
-        (event) => event.event_name.split(" - ")[0].trim(),
+      const existingCourseIds = existingOfferingIds.map(
+        (offeringId) => offeringIdToCourseIdMap[offeringId],
+      );
+      const existingCourses = coursesData.filter((course) =>
+        existingCourseIds.includes(course.id),
       );
-      const existingCourses =
-        coursesData?.filter((course: { code: string }) =>
-          existingCourseCodes.includes(course.code),
-        ) || [];
       form.setValue("courses", existingCourses);
       setLoadedCourses(true);