Fix tags and Fix the bug where the window reloads after timetable creation

Author: Austin-X

course-matrix/frontend/src/api/baseApiSlice.ts

@@ -5,6 +5,6 @@ const baseQuery = fetchBaseQuery({ baseUrl: BASE_URL });
 
 export const apiSlice = createApi({
   baseQuery,
-  tagTypes: ["Auth", "Course", "Department", "Offering", "Timetable", "Event"],
+  tagTypes: ["Auth", "Course", "Department", "Offering", "Timetable", "Event", "Restrictions"],
   endpoints: () => ({}),
 });

course-matrix/frontend/src/api/eventsApiSlice.ts

@@ -13,10 +13,10 @@ export const eventsApiSlice = apiSlice.injectEndpoints({
           "Content-Type": "application/json",
           Accept: "application/json, text/plain, */*",
         },
-        providesTags: ["Event"],
         body: data,
         credentials: "include",
       }),
+      invalidatesTags: ["Event"],
     }),
     getEvents: builder.query<unknown, number>({
       query: (id) => ({
@@ -38,10 +38,10 @@ export const eventsApiSlice = apiSlice.injectEndpoints({
           "Content-Type": "application/json",
           Accept: "application/json, text/plain, */*",
         },
-        providesTags: ["Event"],
         body: data,
         credentials: "include",
       }),
+      invalidatesTags: ["Event"],
     }),
     deleteEvent: builder.mutation({
       query: (id) => ({
@@ -51,9 +51,9 @@ export const eventsApiSlice = apiSlice.injectEndpoints({
           "Content-Type": "application/json",
           Accept: "application/json, text/plain, */*",
         },
-        providesTags: ["Event"],
         credentials: "include",
       }),
+      invalidatesTags: ["Event"],
     }),
   }),
 });

course-matrix/frontend/src/api/restrictionsApiSlice.ts

@@ -24,10 +24,10 @@ export const restrictionsApiSlice = apiSlice.injectEndpoints({
           "Content-Type": "application/json",
           Accept: "application/json, text/plain, */*",
         },
-        providesTags: ["Restrictions"],
         body: data,
         credentials: "include",
       }),
+      invalidatesTags: ["Restrictions"],
     }),
     deleteRestriction: builder.mutation({
       query: (id) => ({
@@ -37,9 +37,9 @@ export const restrictionsApiSlice = apiSlice.injectEndpoints({
           "Content-Type": "application/json",
           Accept: "application/json, text/plain, */*",
         },
-        providesTags: ["Restrictions"],
         credentials: "include",
       }),
+      invalidatesTags: ["Restrictions"],
     }),
   }),
 });

course-matrix/frontend/src/api/timetableApiSlice.ts

@@ -12,10 +12,10 @@ export const timetableApiSlice = apiSlice.injectEndpoints({
           "Content-Type": "application/json",
           Accept: "application/json, text/plain, */*",
         },
-        providesTags: ["Timetable"],
         body: data,
         credentials: "include",
       }),
+      invalidatesTags: ["Timetable"],
     }),
     getTimetables: builder.query<unknown, void>({
       query: () => ({
@@ -28,6 +28,7 @@ export const timetableApiSlice = apiSlice.injectEndpoints({
         providesTags: ["Timetable"],
         credentials: "include",
       }),
+      keepUnusedDataFor: 0,
     }),
     updateTimetable: builder.mutation({
       query: (data) => ({
@@ -37,10 +38,10 @@ export const timetableApiSlice = apiSlice.injectEndpoints({
           "Content-Type": "application/json",
           Accept: "application/json, text/plain, */*",
         },
-        providesTags: ["Timetable"],
         body: data,
         credentials: "include",
       }),
+      invalidatesTags: ["Timetable"],
     }),
     deleteTimetable: builder.mutation({
       query: (id) => ({
@@ -50,9 +51,9 @@ export const timetableApiSlice = apiSlice.injectEndpoints({
           "Content-Type": "application/json",
           Accept: "application/json, text/plain, */*",
         },
-        providesTags: ["Timetable"],
         credentials: "include",
       }),
+      invalidatesTags: ["Timetable"],
     }),
   }),
 });

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

@@ -28,13 +28,14 @@ import { TimetableFormSchema } from "@/models/timetable-form";
 import {
   useCreateTimetableMutation,
   useDeleteTimetableMutation,
+  useGetTimetablesQuery,
 } from "@/api/timetableApiSlice";
 import { useCreateRestrictionMutation } from "@/api/restrictionsApiSlice";
 import { z } from "zod";
 import { useEffect, useState } from "react";
 import { useGetNumberOfCourseSectionsQuery } from "@/api/coursesApiSlice";
 import { useCreateEventMutation } from "@/api/eventsApiSlice";
-import { useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { Event, Timetable } from "@/utils/type-utils";
 
 interface CalendarProps {
@@ -74,6 +75,7 @@ function Calendar({
   userEvents,
   form,
 }: CalendarProps) {
+  const navigate = useNavigate();
   const [queryParams] = useSearchParams();
   const isEditingTimetable = queryParams.has("edit");
   const timetableId = parseInt(queryParams.get("edit") ?? "0");
@@ -163,6 +165,7 @@ function Calendar({
     });
     if (error) {
       console.error(error);
+      return;
     }
 
     // Create course events for the newly created timetable
@@ -200,9 +203,8 @@ function Calendar({
     });
     await Promise.all(restrictionPromises);
 
-    // Refresh the page and redirect to the home page to see the newly created timetable
-    window.location.reload();
-    window.location.href = "/home";
+    // Redirect to the home page to see the newly created timetable
+    navigate("/home");
   };
 
   const handleUpdate = async () => {
@@ -284,4 +286,4 @@ function Calendar({
   );
 }
 
-export default Calendar;
+export default Calendar;