implemented timetable favourite integration

Author: thomasyzy7

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

@@ -72,16 +72,19 @@ const Home = () => {
             <p className="text-sm text-muted-foreground">Loading...</p>
           ) : (
             [...data]
-              .sort((a: Timetable, b: Timetable) =>
-                b?.updated_at.localeCompare(a?.updated_at),
-              )
+              .sort((a: Timetable, b: Timetable) => {
+                if(a.favorite) return 1;
+                if(b.favorite) return -1;
+                return b?.updated_at.localeCompare(a?.updated_at);
+              })
               .map((timetable) => (
                 <TimetableCard
                   refetch={refetch}
                   key={timetable.id}
                   timetableId={timetable.id}
                   title={timetable.timetable_title}
                   lastEditedDate={new Date(timetable.updated_at)}
+                  favorite={timetable.favorite}
                   owner={name}
                 />
               ))

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

@@ -7,18 +7,20 @@ import {
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Pencil } from "lucide-react";
-import { useState } from "react";
+import { Star, Pencil } from "lucide-react";
+import { useState,useEffect } from "react";
 import TimetableCardKebabMenu from "./TimetableCardKebabMenu";
-import { useUpdateTimetableMutation } from "@/api/timetableApiSlice";
+import { useUpdateTimetableMutation, useGetTimetableQuery} from "@/api/timetableApiSlice";
 import { Link } from "react-router-dom";
+import { TimetableModel } from "@/models/models";
 
 interface TimetableCardProps {
   refetch: () => void;
   timetableId: number;
   title: string;
   lastEditedDate: Date;
   owner: string;
+  favorite: boolean;
 }
 
 /**
@@ -32,9 +34,12 @@ const TimetableCard = ({
   title,
   lastEditedDate,
   owner,
+  favorite
 }: TimetableCardProps) => {
   const [updateTimetable] = useUpdateTimetableMutation();
 
+
+
   const lastEditedDateArray = lastEditedDate
     .toISOString()
     .split("T")[0]
@@ -47,6 +52,8 @@ const TimetableCard = ({
 
   const [timetableCardTitle, setTimetableCardTitle] = useState(title);
   const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const { data } = useGetTimetableQuery(timetableId);
+  const [toggled, setToggled] = useState(favorite);
 
   const handleSave = async () => {
     try {
@@ -60,6 +67,35 @@ const TimetableCard = ({
     }
   };
 
+  useEffect(() => {
+    if (data) {
+      const val = (data as TimetableModel[])[0]?.favorite;
+      if (val !== undefined) {
+        setToggled(val);
+      }
+    }
+  }, [data]);
+
+   const handleFavourite = async () => {
+      try {
+        await updateTimetable({
+          id: timetableId,
+          favorite: !toggled,
+        }).unwrap();
+        refetch();
+        console.log("Favourite success!");
+        setToggled(!toggled);
+        console.log(!toggled);
+        handleReload();
+      } catch (error) {
+        console.error("Failed to favourite timetable:", error);
+      }
+    };
+  
+    const handleReload = () => {
+      window.location.reload(); // Reloads the page
+    };
+
   return (
     <Card className="w-full">
       <CardHeader>
@@ -70,6 +106,7 @@ const TimetableCard = ({
           />
         </Link>
         <div className="flex justify-between items-center">
+
           <CardTitle>
             <Input
               disabled={!isEditingTitle}
@@ -82,6 +119,10 @@ const TimetableCard = ({
               onChange={(e) => setTimetableCardTitle(e.target.value)}
             />
           </CardTitle>
+
+          <Star className={`w-6 h-6 transition-colors ${
+          toggled ? "fill-none text-gray-500" : "fill-yellow-500 text-yellow-500"
+        }`}  onClick={() => handleFavourite()}/>
           <div className="flex justify-between">
             {!isEditingTitle && (
               <>

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

@@ -16,8 +16,8 @@ import {
   DialogDescription,
   DialogClose,
 } from "@/components/ui/dialog";
-import { EllipsisVertical } from "lucide-react";
-import { useDeleteTimetableMutation } from "@/api/timetableApiSlice";
+import { EllipsisVertical} from "lucide-react";
+import { useDeleteTimetableMutation} from "@/api/timetableApiSlice";
 import { EmailNotificationSettings } from "./EmailNotificationSettings";
 
 interface TimetableCardKebabMenuProps {
@@ -33,7 +33,11 @@ const TimetableCardKebabMenu = ({
   refetch,
   timetableId,
 }: TimetableCardKebabMenuProps) => {
+  
   const [deleteTimetable] = useDeleteTimetableMutation();
+  
+  
+  
 
   const handleDelete = async () => {
     try {
@@ -51,6 +55,7 @@ const TimetableCardKebabMenu = ({
           <EllipsisVertical />
         </Button>
       </DropdownMenuTrigger>
+
       <DropdownMenuContent>
         <DropdownMenuItem>
           <Link to={`/dashboard/timetable?edit=${timetableId}`}>