Add check for same name timetables in frontend and check for same name timetables in update endpoint

Author: Austin-X

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

@@ -190,6 +190,27 @@ export default {
         return res.status(404).json({ error: "Calendar id not found" });
       }
 
+      // Check if another timetable with the same title already exist for this user
+      const { data: existingTimetable, error: existingTimetableError } =
+        await supabase
+          .schema("timetable")
+          .from("timetables")
+          .select("id")
+          .eq("user_id", user_id)
+          .eq("timetable_title", timetable_title)
+          .neq("id", id)
+          .maybeSingle();
+      
+      if (existingTimetableError) {
+        return res.status(400).json({ error: existingTimetableError.message });
+      }
+
+      if (existingTimetable) {
+        return res
+          .status(400)
+          .json({ error: "Another timetable with this title already exists" });
+      }
+
       let updateData: any = {};
       if (timetable_title) updateData.timetable_title = timetable_title;
       if (semester) updateData.semester = semester;

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

@@ -4,6 +4,8 @@ import TimetableCard from "./TimetableCard";
 import TimetableCompareButton from "./TimetableCompareButton";
 import TimetableCreateNewButton from "./TimetableCreateNewButton";
 import { useGetTimetablesQuery } from "../../api/timetableApiSlice";
+import { useState } from "react";
+import TimetableErrorDialog from "../TimetableBuilder/TimetableErrorDialog";
 
 export interface Timetable {
   id: number;
@@ -31,13 +33,16 @@ const Home = () => {
     refetch: () => void;
   };
 
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
   return (
     <div className="w-full">
       <div className="m-8">
         <div className="mb-4 flex items-center gap-2 relative group">
           <h1 className="text-2xl font-medium tracking-tight">My Timetables</h1>
           <Pin size={24} className="text-blue-500" />
         </div>
+        <TimetableErrorDialog isCreating={false} errorMessage={errorMessage} setErrorMessage={setErrorMessage} />
         <div className="mb-4 flex flex-row justify-between items-center">
           <div className="flex gap-4">
             <Button
@@ -78,6 +83,7 @@ const Home = () => {
               .map((timetable) => (
                 <TimetableCard
                   refetch={refetch}
+                  setErrorMessage={setErrorMessage}
                   key={timetable.id}
                   timetableId={timetable.id}
                   title={timetable.timetable_title}

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

@@ -15,6 +15,7 @@ import { Link } from "react-router-dom";
 
 interface TimetableCardProps {
   refetch: () => void;
+  setErrorMessage: React.Dispatch<React.SetStateAction<string | null>>;
   timetableId: number;
   title: string;
   lastEditedDate: Date;
@@ -28,6 +29,7 @@ interface TimetableCardProps {
  */
 const TimetableCard = ({
   refetch,
+  setErrorMessage,
   timetableId,
   title,
   lastEditedDate,
@@ -56,7 +58,9 @@ const TimetableCard = ({
       }).unwrap();
       setIsEditingTitle(false);
     } catch (error) {
-      console.error("Failed to update timetable title:", error);
+      const errorData = (error as { data?: { error?: string } }).data;
+      setErrorMessage(errorData?.error ?? "Unknown error occurred");
+      return;
     }
   };
 

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

@@ -35,7 +35,7 @@ import {
   useDeleteRestrictionMutation,
 } from "@/api/restrictionsApiSlice";
 import { z } from "zod";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useGetNumberOfCourseSectionsQuery } from "@/api/coursesApiSlice";
 import {
   useCreateEventMutation,
@@ -58,6 +58,7 @@ import {
   getSemesterStartAndEndDatesPlusOneWeek,
 } from "@/utils/semester-utils";
 import { courseEventStyles } from "@/constants/calendarConstants";
+import TimetableErrorDialog from "./TimetableErrorDialog";
 
 interface CalendarProps {
   setShowLoadingPage: React.Dispatch<React.SetStateAction<boolean>>;
@@ -110,6 +111,8 @@ const Calendar = React.memo<CalendarProps>(
     const [createRestriction] = useCreateRestrictionMutation();
     const [deleteRestriction] = useDeleteRestrictionMutation();
 
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
     const semesterStartDate = getSemesterStartAndEndDates(semester).start;
     const { start: semesterStartDatePlusOneWeek, end: semesterEndDate } =
       getSemesterStartAndEndDatesPlusOneWeek(semester);
@@ -224,17 +227,18 @@ const Calendar = React.memo<CalendarProps>(
     }, [timetablesData, editingTimetableId, isEditingTimetable]);
 
     const handleCreate = async () => {
-      setShowLoadingPage(true);
       const timetableTitle = timetableTitleRef.current?.value ?? "";
       // Create timetable
       const { data, error } = await createTimetable({
         timetable_title: timetableTitle,
         semester: semester,
       });
       if (error) {
-        console.error(error);
+        const errorData = (error as { data?: { error?: string } }).data;
+        setErrorMessage(errorData?.error ?? "Unknown error occurred");
         return;
       }
+      setShowLoadingPage(true);
       // Create course events for the newly created timetable
       const newTimetableId = data[0].id;
       for (const offeringId of newOfferingIds) {
@@ -336,6 +340,11 @@ const Calendar = React.memo<CalendarProps>(
       <div>
         <h1 className="text-2xl flex flex-row justify-between font-medium tracking-tight mb-8">
           <div>Your Timetable </div>
+          <TimetableErrorDialog
+            isCreating={!isEditingTimetable}
+            errorMessage={errorMessage}
+            setErrorMessage={setErrorMessage}
+          />
           {!isEditingTimetable ? (
             <Dialog>
               {isChoosingSectionsManually &&

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

@@ -45,6 +45,8 @@ import { useCreateTimetableMutation } from "@/api/timetableApiSlice";
 import { useCreateEventMutation } from "@/api/eventsApiSlice";
 import { useCreateRestrictionMutation } from "@/api/restrictionsApiSlice";
 import { TimetableForm } from "@/models/timetable-form";
+import { set } from "zod";
+import TimetableErrorDialog from "./TimetableErrorDialog";
 
 interface GeneratedCalendarsProps {
   setShowLoadingPage: (_: boolean) => void;
@@ -120,18 +122,21 @@ export const GeneratedCalendars = React.memo<GeneratedCalendarsProps>(
         parseEvent(index + 1, event, "courseEvent"),
       ) ?? [];
 
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
     const handleCreate = async () => {
-      setShowLoadingPage(true);
       const timetableTitle = timetableTitleRef.current?.value ?? "";
       // Create timetable
       const { data, error } = await createTimetable({
         timetable_title: timetableTitle,
         semester: semester,
       });
       if (error) {
-        console.error(error);
+        const errorData = (error as { data?: { error?: string } }).data;
+        setErrorMessage(errorData?.error ?? "Unknown error occurred");
         return;
-      }
+      } 
+      setShowLoadingPage(true);
       // Create course events for the newly created timetable
       const newTimetableId = data[0].id;
       for (const offering of currentTimetableOfferings) {
@@ -210,6 +215,11 @@ export const GeneratedCalendars = React.memo<GeneratedCalendarsProps>(
               >
                 Cancel Generating
               </Button>
+              <TimetableErrorDialog
+                isCreating={true}
+                errorMessage={errorMessage}
+                setErrorMessage={setErrorMessage}
+              />
               <Dialog>
                 <DialogTrigger asChild>
                   <Button size="sm" onClick={() => {}}>

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

@@ -0,0 +1,41 @@
+import { Button } from "@/components/ui/button";
+import {
+    DialogHeader,
+    DialogFooter,
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+  } from "@/components/ui/dialog";
+import React from "react";
+
+interface TimetableErrorDialogProps {
+    isCreating: boolean;
+    errorMessage: string | null;
+    setErrorMessage: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+const TimetableErrorDialog: React.FC<TimetableErrorDialogProps> = ({ isCreating, errorMessage, setErrorMessage }) => {
+    const dialogTitle = isCreating ? "An error occurred while creating your timetable" : "An error occurred while updating your timetable";
+
+    return (
+        <Dialog open={errorMessage !== null} onOpenChange={() => setErrorMessage(null)}>
+            <DialogContent className="gap-5">
+            <DialogHeader>
+                <DialogTitle className="text-red-500">{dialogTitle}</DialogTitle>
+                <DialogDescription>{errorMessage}</DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+                <DialogClose asChild>
+                <Button variant="secondary" onClick={() => setErrorMessage(null)}>
+                    Close
+                </Button>
+                </DialogClose>
+            </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default TimetableErrorDialog;