Fix restrictions integration

Author: Austin-X

course-matrix/backend/src/controllers/restrictionsController.ts

@@ -33,7 +33,7 @@ export default {
       }
 
       // Function to construct date in local time
-      if (!start_time && !end_time) {
+      if (!["Restrict Day", "Days Off"].includes(type) && !start_time && !end_time) {
         return res
           .status(400)
           .json({ error: "Start time or end time must be provided" });
@@ -78,12 +78,6 @@ export default {
         endTime = restriction_end_time.toISOString().split("T")[1];
       }
 
-      if (!start_time && !end_time) {
-        return res
-          .status(400)
-          .json({ error: "Start time or end time must be provided" });
-      }
-
       const { data: restrictionData, error: restrictionError } = await supabase
         .schema("timetable")
         .from("restriction")
@@ -359,7 +353,7 @@ export default {
         return res.status(400).json({ error: restrictionError.message });
       }
 
-      return res.status(200).send("Restriction successfully deleted");
+      return res.status(200).json({ message: "Restriction succesfully deleted" });
     } catch (error) {
       return res.status(500).send({ error });
     }

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

@@ -30,9 +30,10 @@ export const restrictionsApiSlice = apiSlice.injectEndpoints({
       invalidatesTags: ["Restrictions"],
     }),
     deleteRestriction: builder.mutation({
-      query: (id) => ({
-        url: `${TIMETABLES_URL}/restrictions/${id}`,
+      query: (data) => ({
+        url: `${TIMETABLES_URL}/restrictions/${data.id}`,
         method: "DELETE",
+        params: data,
         headers: {
           "Content-Type": "application/json",
           Accept: "application/json, text/plain, */*",

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

@@ -29,7 +29,7 @@ import {
   useGetTimetablesQuery,
   useCreateTimetableMutation,
 } from "@/api/timetableApiSlice";
-import { useCreateRestrictionMutation } from "@/api/restrictionsApiSlice";
+import { useGetRestrictionsQuery, useCreateRestrictionMutation, useDeleteRestrictionMutation} from "@/api/restrictionsApiSlice";
 import { z } from "zod";
 import React, { useEffect, useRef } from "react";
 import { useGetNumberOfCourseSectionsQuery } from "@/api/coursesApiSlice";
@@ -40,14 +40,15 @@ import {
 } from "@/api/eventsApiSlice";
 import { useGetOfferingEventsQuery } from "@/api/offeringsApiSlice";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import { Event, Timetable, TimetableEvents } from "@/utils/type-utils";
+import { Event, Timetable, TimetableEvents, Restriction } from "@/utils/type-utils";
 import { TimetableForm } from "@/models/timetable-form";
 import { getSemesterStartAndEndDates } from "@/utils/semester-utils";
 
 interface CalendarProps {
   semester: string;
   selectedCourses: TimetableForm["courses"];
   newOfferingIds: number[];
+  restrictions: TimetableForm["restrictions"];
 }
 
 function parseEvent(id: number, event: Event, calendarId: string) {
@@ -71,7 +72,7 @@ function parseEvent(id: number, event: Event, calendarId: string) {
 }
 
 const Calendar = React.memo<CalendarProps>(
-  ({ semester, selectedCourses, newOfferingIds }) => {
+  ({ semester, selectedCourses, newOfferingIds, restrictions }) => {
     const form = useForm<z.infer<typeof TimetableFormSchema>>();
 
     const navigate = useNavigate();
@@ -83,6 +84,7 @@ const Calendar = React.memo<CalendarProps>(
     const [createEvent] = useCreateEventMutation();
     const [deleteEvent] = useDeleteEventMutation();
     const [createRestriction] = useCreateRestrictionMutation();
+    const [deleteRestriction] = useDeleteRestrictionMutation();
 
     const semesterStartDate = getSemesterStartAndEndDates(semester).start;
     const semesterEndDate = getSemesterStartAndEndDates(semester).end;
@@ -139,17 +141,26 @@ const Calendar = React.memo<CalendarProps>(
       },
     });
 
-    const { data: oldTimetableEvents } = useGetEventsQuery(editingTimetableId, {
+    const { data: timetableEvents } = useGetEventsQuery(editingTimetableId, {
       skip: !isEditingTimetable,
     }) as {
       data: TimetableEvents;
     };
+
     const oldOfferingIds = [
       ...new Set(
-        oldTimetableEvents?.courseEvents.map((event) => event.offering_id),
+        timetableEvents?.courseEvents.map((event) => event.offering_id),
       ),
     ].sort((a, b) => a - b);
 
+    const { data: restrictionsData } = useGetRestrictionsQuery(editingTimetableId, {
+      skip: !isEditingTimetable,
+    }) as {
+      data: Restriction[];
+    };
+
+    const oldRestrictions = restrictionsData ?? [];
+
     const timetableTitleRef = useRef<HTMLInputElement>(null);
     const selectedCourseIds = selectedCourses.map((course) => course.id);
 
@@ -204,7 +215,6 @@ const Calendar = React.memo<CalendarProps>(
       }
 
       // Create restrictions for the newly created timetable
-      const restrictions = form.getValues("restrictions") ?? [];
       for (const restriction of restrictions) {
         const restrictionObject = {
           calendar_id: newTimetableId,
@@ -259,8 +269,38 @@ const Calendar = React.memo<CalendarProps>(
           console.error(createError);
         }
       }
+
       form.setValue("offeringIds", newOfferingIds);
 
+      // Delete restrictions
+      for (const restriction of oldRestrictions) {
+        const { error: deleteError } = await deleteRestriction({
+          id: restriction.id,
+          calendar_id: editingTimetableId,
+        });
+        if (deleteError) {
+          console.error(deleteError);
+        }
+      }
+
+      // Create restrictions
+      for (const restriction of restrictions) {
+        const restrictionObject = {
+          calendar_id: editingTimetableId,
+          type: restriction.type,
+          days: restriction.days,
+          start_time: restriction.startTime,
+          end_time: restriction.endTime,
+          disabled: restriction.disabled,
+          num_days: restriction.numDays,
+        };
+        const { error: restrictionError } =
+          await createRestriction(restrictionObject);
+        if (restrictionError) {
+          console.error(restrictionError);
+        }
+      }
+
       navigate("/home");
     };
 

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

@@ -191,11 +191,17 @@ const TimetableBuilder = () => {
       form.setValue("courses", existingCourses);
       setLoadedCourses(true);
 
+      // Parse restrictions data (For startTime and endTime, we just care about the time, so we use the random date of 2025-01-01 so that the date can be parsed correctly)
+      // We also add 1 hour (i.e. 60 * 60 * 1000 milliseconds) to the time to account for the timezone difference between the server and the client
       const parsedRestrictions = restrictionsData.map(
         (restriction: Restriction) => ({
-          ...restriction,
-          days: JSON.parse(restriction?.days),
-        }),
+            days: JSON.parse(restriction?.days) as string[],
+            disabled: restriction?.disabled,
+            startTime: restriction?.start_time ? new Date(new Date(`2025-01-01T${restriction.start_time}.00Z`).getTime() + 60 * 60 * 1000) : undefined,
+            endTime: restriction?.end_time ? new Date(new Date(`2025-01-01T${restriction.end_time}.00Z`).getTime() + 60 * 60 * 1000) : undefined,
+            type: restriction?.type,
+            numDays: restriction?.num_days,
+          }) as z.infer<typeof RestrictionSchema>,
       );
       form.setValue("restrictions", parsedRestrictions);
       setLoadedRestrictions(true);
@@ -380,7 +386,7 @@ const TimetableBuilder = () => {
                       {!isEditingTimetable ||
                       (isEditingTimetable &&
                         loadedCourses &&
-                        loadedOfferingIds) ? (
+                        loadedOfferingIds && selectedCourses) ? (
                         selectedCourses.map((course, index) => {
                           return (
                             <div key={index}>
@@ -460,7 +466,7 @@ const TimetableBuilder = () => {
                       )}
                     />
                     <div className="flex gap-2 flex-col">
-                      {enabledRestrictions.map((restric, index) => (
+                      {enabledRestrictions && enabledRestrictions.map((restric, index) => (
                         <div
                           key={index}
                           className="flex p-2 justify-between bg-red-100/50 text-xs rounded-md w-[64%]"
@@ -513,6 +519,7 @@ const TimetableBuilder = () => {
               semester={selectedSemester}
               selectedCourses={selectedCourses}
               newOfferingIds={offeringIds}
+              restrictions={enabledRestrictions}
             />
           </div>