Fix the bug where switching semesters does not reset the form offeringIds and form courses

Author: Austin-X

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

@@ -156,14 +156,19 @@ const Calendar = React.memo<CalendarProps>(
     const { data: numberOfSectionsData } = useGetNumberOfCourseSectionsQuery({
       course_ids: selectedCourseIds.join(","),
       semester: semester,
+    }, {
+      skip: !selectedCourses.length,
     });
 
-    const totalNumberOfSections =
-      numberOfSectionsData?.totalNumberOfCourseSections ?? 0;
+    const totalNumberOfSections = !selectedCourses.length ? 0 : (numberOfSectionsData?.totalNumberOfCourseSections ?? 0);
 
     const allOfferingSectionsHaveBeenSelected =
       newOfferingIds.length === totalNumberOfSections;
 
+
+    console.log("TOTAL NUMBER OF SECTIONS", totalNumberOfSections);
+    console.log("NEW OFFERING IDS", newOfferingIds);
+    
     useEffect(() => {
       if (!isEditingTimetable) {
         return;

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

@@ -305,7 +305,10 @@ const TimetableBuilder = () => {
                           <FormLabel>Semester</FormLabel>
                           <FormControl>
                             <Select
-                              onValueChange={field.onChange}
+                              onValueChange={(value) => {
+                                form.reset({ offeringIds: [], courses: [] });
+                                form.setValue("semester", value);
+                              }}
                               value={field.value}
                               defaultValue={field.value}
                             >