Fix Calendar Flashing Bug and Fix Default Start Date of Calendar Bug

Author: Austin-X

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

@@ -23,29 +23,28 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { UseFormReturn } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { TimetableFormSchema } from "@/models/timetable-form";
-import { useCreateTimetableMutation } from "@/api/timetableApiSlice";
+import { useGetTimetablesQuery, useCreateTimetableMutation } from "@/api/timetableApiSlice";
 import { useCreateRestrictionMutation } from "@/api/restrictionsApiSlice";
 import { z } from "zod";
-import { useEffect, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import { useGetNumberOfCourseSectionsQuery } from "@/api/coursesApiSlice";
 import {
   useCreateEventMutation,
   useGetEventsQuery,
-  useUpdateEventMutation,
   useDeleteEventMutation,
 } from "@/api/eventsApiSlice";
 import { useGetOfferingEventsQuery } from "@/api/offeringsApiSlice";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { Event, Timetable, TimetableEvents } from "@/utils/type-utils";
+import { TimetableForm } from "@/models/timetable-form";
+import { getSemesterStartAndEndDates } from "@/utils/semester-utils";
 
 interface CalendarProps {
-  timetablesData: Timetable[];
-  semesterStartDate: string;
-  semesterEndDate: string;
-  userEvents: Event[];
-  form: UseFormReturn<z.infer<typeof TimetableFormSchema>>;
+  semester: string;
+  selectedCourses: TimetableForm["courses"];
+  newOfferingIds: number[];
 }
 
 function parseEvent(id: number, event: Event, calendarId: string) {
@@ -68,31 +67,38 @@ function parseEvent(id: number, event: Event, calendarId: string) {
   };
 }
 
-function Calendar({
-  timetablesData,
-  semesterStartDate,
-  semesterEndDate,
-  userEvents,
-  form,
-}: CalendarProps) {
+const Calendar = React.memo<CalendarProps>(({
+  semester,
+  selectedCourses,
+  newOfferingIds,
+}) => {
+  const form = useForm<z.infer<typeof TimetableFormSchema>>();
+
   const navigate = useNavigate();
   const [queryParams] = useSearchParams();
   const isEditingTimetable = queryParams.has("edit");
   const editingTimetableId = parseInt(queryParams.get("edit") ?? "0");
-  const newOfferingIds = form.watch("offeringIds") ?? [];
 
   const [createTimetable] = useCreateTimetableMutation();
   const [createEvent] = useCreateEventMutation();
-  const [updateEvent] = useUpdateEventMutation();
   const [deleteEvent] = useDeleteEventMutation();
   const [createRestriction] = useCreateRestrictionMutation();
 
+  const semesterStartDate = getSemesterStartAndEndDates(semester).start;
+  const semesterEndDate = getSemesterStartAndEndDates(semester).end;
+
   const { data: courseEventsData } = useGetOfferingEventsQuery({
     offering_ids: newOfferingIds.join(","),
     semester_start_date: semesterStartDate,
     semester_end_date: semesterEndDate,
   }) as { data: Event[] };
+
+  const { data: timetablesData } = useGetTimetablesQuery() as {
+    data: Timetable[];
+  };
+
   const courseEvents = courseEventsData ?? [];
+  const userEvents: Event[] = [];
 
   let index = 1;
   const courseEventsParsed = courseEvents.map((event) =>
@@ -109,6 +115,7 @@ function Calendar({
       createViewMonthGrid(),
       createViewMonthAgenda(),
     ],
+    selectedDate: semesterStartDate,
     defaultView: viewWeek.name,
     events: [...courseEventsParsed, ...userEventsParsed],
     calendars: {
@@ -143,15 +150,14 @@ function Calendar({
     ),
   ].sort((a, b) => a - b);
 
-  const semester = form.watch("semester") ?? "";
-  const [timetableTitle, setTimetableTitle] = useState("");
-
-  const selectedCourses = form.watch("courses") ?? [];
+  const timetableTitleRef = useRef<HTMLInputElement>(null);
   const selectedCourseIds = selectedCourses.map((course) => course.id);
+
   const { data: numberOfSectionsData } = useGetNumberOfCourseSectionsQuery({
     course_ids: selectedCourseIds.join(","),
     semester: semester,
   });
+
   const totalNumberOfSections =
     numberOfSectionsData?.totalNumberOfCourseSections ?? 0;
 
@@ -162,13 +168,11 @@ function Calendar({
     if (!isEditingTimetable) {
       return;
     }
-    setTimetableTitle(
-      timetablesData?.find((timetable) => timetable.id === editingTimetableId)
-        ?.timetable_title ?? "",
-    );
-  }, [timetablesData, editingTimetableId, timetableTitle, isEditingTimetable]);
+  }, [timetablesData, editingTimetableId, isEditingTimetable]);
 
   const handleCreate = async () => {
+    const timetableTitle = timetableTitleRef.current?.value ?? "";
+
     // Create timetable
     const { data, error } = await createTimetable({
       timetable_title: timetableTitle,
@@ -249,8 +253,9 @@ function Calendar({
         console.error(createError);
       }
     }
-
     form.setValue("offeringIds", newOfferingIds);
+
+    navigate("/home");
   };
 
   return (
@@ -281,7 +286,7 @@ function Calendar({
               <Input
                 id="timetableName"
                 placeholder="Placeholder name"
-                onChange={(e) => setTimetableTitle(e.target.value.trim())}
+                ref={timetableTitleRef}
               />
               <DialogFooter>
                 <DialogClose asChild>
@@ -290,7 +295,7 @@ function Calendar({
                 <DialogClose asChild>
                   <Button
                     onClick={handleCreate}
-                    disabled={timetableTitle === ""}
+                    disabled={timetableTitleRef.current?.value === ""}
                   >
                     Save
                   </Button>
@@ -319,6 +324,6 @@ function Calendar({
       <ScheduleXCalendar calendarApp={calendar} />
     </div>
   );
-}
+});
 
 export default Calendar;

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

@@ -51,22 +51,6 @@ type FormContextType = UseFormReturn<z.infer<typeof TimetableFormSchema>>;
 export const FormContext = createContext<FormContextType | null>(null);
 const SEARCH_LIMIT = 1000;
 
-function getSemesterStartAndEndDates(semester: string) {
-  return {
-    start:
-      semester === "Summer 2025"
-        ? "2025-05-02"
-        : semester === "Fall 2025"
-          ? "2025-09-03"
-          : "2026-01-06",
-    end:
-      semester === "Summer 2025"
-        ? "2025-08-07"
-        : semester === "Fall 2025"
-          ? "2025-12-03"
-          : "2026-04-04",
-  };
-}
 
 /**
  * TimetableBuilder Component
@@ -122,7 +106,8 @@ const TimetableBuilder = () => {
   const enabledRestrictions = form.watch("restrictions") || [];
   const searchQuery = form.watch("search");
   const debouncedSearchQuery = useDebounceValue(searchQuery, 250);
-  const selectedSemester = form.getValues("semester");
+  const selectedSemester = form.watch("semester");
+  const offeringIds = form.watch("offeringIds");
 
   // console.log("Selected courses", selectedCourses);
   // console.log("Enabled restrictions", enabledRestrictions);
@@ -167,10 +152,6 @@ const TimetableBuilder = () => {
   }) as {
     data: TimetableEvents;
   };
-  const userEvents = timetableEventsData?.userEvents || [];
-
-  const semesterStartDate = getSemesterStartAndEndDates(selectedSemester).start;
-  const semesterEndDate = getSemesterStartAndEndDates(selectedSemester).end;
 
   const [loadedCourses, setLoadedCourses] = useState(false);
   const [loadedOfferingIds, setLoadedOfferingIds] = useState(false);
@@ -526,13 +507,7 @@ const TimetableBuilder = () => {
             </Form>
           </div>
           <div className="w-3/5">
-            <Calendar
-              timetablesData={timetablesData}
-              semesterStartDate={semesterStartDate}
-              semesterEndDate={semesterEndDate}
-              userEvents={userEvents}
-              form={form}
-            />
+            <Calendar semester={selectedSemester} selectedCourses={selectedCourses} newOfferingIds={offeringIds} />
           </div>
 
           {showFilters && (

course-matrix/frontend/src/utils/semester-utils.ts

@@ -0,0 +1,16 @@
+export function getSemesterStartAndEndDates(semester: string) {
+    return {
+      start:
+        semester === "Summer 2025"
+          ? "2025-05-02"
+          : semester === "Fall 2025"
+            ? "2025-09-03"
+            : "2026-01-06",
+      end:
+        semester === "Summer 2025"
+          ? "2025-08-07"
+          : semester === "Fall 2025"
+            ? "2025-12-03"
+            : "2026-04-04",
+    };
+  }