Use refetch instead of reloading the page

Author: Austin-X

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

@@ -16,7 +16,7 @@ const Home = () => {
     (user_metadata?.user?.user_metadata?.username as string) ??
     (user_metadata?.user?.email as string);
 
-  const { data, isLoading } = useGetTimetablesQuery() as {
+  const { data, isLoading, refetch } = useGetTimetablesQuery() as {
     data: Timetable[];
     isLoading: boolean;
   };
@@ -63,6 +63,7 @@ const Home = () => {
           ) : (
             data?.map((timetable, index) => (
               <TimetableCard
+                refetch={refetch}
                 key={index}
                 timetableId={timetable.id}
                 title={timetable.timetable_title}

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

@@ -13,6 +13,7 @@ import TimetableCardKebabMenu from "./TimetableCardKebabMenu";
 import { useUpdateTimetableMutation } from "@/api/timetableApiSlice";
 
 interface TimetableCardProps {
+  refetch: () => void;
   timetableId: number;
   title: string;
   lastEditedDate: Date;
@@ -25,6 +26,7 @@ interface TimetableCardProps {
  * @returns {JSX.Element} The rendered component.
  */
 const TimetableCard = ({
+  refetch,
   timetableId,
   title,
   lastEditedDate,
@@ -88,7 +90,7 @@ const TimetableCard = ({
                 >
                   <Pencil />
                 </Button>
-                <TimetableCardKebabMenu timetableId={timetableId} />
+                <TimetableCardKebabMenu refetch={refetch} timetableId={timetableId} />
               </>
             )}
             {isEditingTitle && (

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

@@ -20,6 +20,7 @@ import { EllipsisVertical } from "lucide-react";
 import { useDeleteTimetableMutation } from "@/api/timetableApiSlice";
 
 interface TimetableCardKebabMenuProps {
+  refetch: () => void;
   timetableId: number;
 }
 
@@ -28,14 +29,15 @@ interface TimetableCardKebabMenuProps {
  * @returns {JSX.Element} The rendered component.
  */
 const TimetableCardKebabMenu = ({
+  refetch,
   timetableId,
 }: TimetableCardKebabMenuProps) => {
   const [deleteTimetable] = useDeleteTimetableMutation();
 
   const handleDelete = async () => {
     try {
       await deleteTimetable(timetableId);
-      window.location.reload();
+      refetch();
     } catch (error) {
       console.error("Failed to delete timetable:", error);
     }