Fix bug

Author: Austin-X

course-matrix/frontend/src/pages/Compare/CompareTimetables.tsx

@@ -17,11 +17,9 @@ import {
 import {
   Select,
   SelectContent,
-  SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { SemesterIcon } from "@/components/semester-icon";
 import { GitCompareArrows } from "lucide-react";
 import { useGetTimetablesSharedWithMeQuery } from "@/api/sharedApiSlice";
 import { TimetableShare } from "../Home/Home";
@@ -177,6 +175,7 @@ export const CompareTimetables = () => {
                               <TimetableCompareItem
                                 key={`timetable1/${timetable.id}/${timetable.user_id}`}
                                 timetable={timetable}
+                                timetableNumber={1}
                               />
                             ))}
                         </SelectContent>
@@ -213,6 +212,7 @@ export const CompareTimetables = () => {
                               <TimetableCompareItem
                                 key={`timetable2/${timetable.id}/${timetable.user_id}`}
                                 timetable={timetable}
+                                timetableNumber={2}
                               />
                             ))}
                         </SelectContent>

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

@@ -20,7 +20,6 @@ import {
 import {
   Select,
   SelectContent,
-  SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
@@ -119,6 +118,7 @@ export const TimetableCompareButton = ({
                         <TimetableCompareItem
                           key={`timetable1/${timetable.id}/${timetable.user_id}`}
                           timetable={timetable}
+                          timetableNumber={1}
                         />
                       ))}
                     </SelectContent>
@@ -145,6 +145,7 @@ export const TimetableCompareButton = ({
                         <TimetableCompareItem
                           key={`timetable2/${timetable.id}/${timetable.user_id}`}
                           timetable={timetable}
+                          timetableNumber={2}
                         />
                       ))}
                     </SelectContent>

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

@@ -7,9 +7,10 @@ import { useEffect, useState } from "react";
 
 interface TimetableCompareItemProps {
   timetable: Timetable;
+  timetableNumber: number;
 }
 
-const TimetableCompareItem = ({ timetable }: TimetableCompareItemProps) => {
+const TimetableCompareItem = ({ timetable, timetableNumber }: TimetableCompareItemProps) => {
   const { data: usernameData } = useGetUsernameFromUserIdQuery(
     timetable.user_id,
   );
@@ -24,10 +25,7 @@ const TimetableCompareItem = ({ timetable }: TimetableCompareItemProps) => {
   }, [loadedUsername, usernameData]);
 
   return (
-    <SelectItem
-      key={`timetable2/${timetable.id}/${timetable.user_id}`}
-      value={`timetable2/${timetable.id}/${timetable.user_id}`}
-    >
+    <SelectItem value={`timetable${timetableNumber}/${timetable.id}/${timetable.user_id}`}>
       <div className="flex flex-row justify-between gap-2">
         <span className="flex items-center gap-2">
           <SemesterIcon semester={timetable.semester} size={18} />