Ax/scrum 146 fix same-name-timetable frontend bug (#100)

Co-authored-by: Austin-X <Austin-X@users.noreply.github.com>

Author: Austin-X

.github/workflows/workflow.yml .github/workflows/format.yml.github/workflows/workflow.yml renamed to .github/workflows/format.yml

@@ -1,6 +1,7 @@
 name: Format the code
 
 on:
+  workflow_dispatch:
   push:
 
 jobs:

.github/workflows/testing.yml

@@ -1,5 +1,9 @@
 name: Run Tests
-on: push
+
+on:
+  workflow_dispatch:
+  push:
+
 jobs:
   build:
     runs-on: ubuntu-latest

course-matrix/backend/__tests__/timetablesController.test.ts

@@ -139,6 +139,11 @@ jest.mock("../src/db/setupDb", () => ({
       ) {
         return {
           eq: jest.fn().mockReturnThis(), // Allow further chaining of eq if required
+          neq: jest.fn().mockImplementation(() => ({
+            maybeSingle: jest
+              .fn()
+              .mockImplementation(() => ({ data: null, error: null })),
+          })),
           maybeSingle: jest.fn().mockImplementation(() => {
             return { data: mockTimetables1, error: null };
           }),

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,19 @@ 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
+          errorMessage={errorMessage}
+          setErrorMessage={setErrorMessage}
+        />
         <div className="mb-4 flex flex-row justify-between items-center">
           <div className="flex gap-4">
             <Button
@@ -78,6 +86,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,10 @@ 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
+            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,10 @@ export const GeneratedCalendars = React.memo<GeneratedCalendarsProps>(
               >
                 Cancel Generating
               </Button>
+              <TimetableErrorDialog
+                errorMessage={errorMessage}
+                setErrorMessage={setErrorMessage}
+              />
               <Dialog>
                 <DialogTrigger asChild>
                   <Button size="sm" onClick={() => {}}>

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

@@ -0,0 +1,50 @@
+import { Button } from "@/components/ui/button";
+import {
+  DialogHeader,
+  DialogFooter,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from "@/components/ui/dialog";
+import React from "react";
+
+interface TimetableErrorDialogProps {
+  errorMessage: string | null;
+  setErrorMessage: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+const TimetableErrorDialog: React.FC<TimetableErrorDialogProps> = ({
+  errorMessage,
+  setErrorMessage,
+}) => {
+  const dialogTitle =
+    errorMessage !== null ? errorMessage : "Unknown error occurred";
+  const dialogDescription = errorMessage?.includes("title already exists")
+    ? "Please choose another title for your timetable"
+    : null;
+
+  return (
+    <Dialog
+      open={errorMessage !== null}
+      onOpenChange={() => setErrorMessage(null)}
+    >
+      <DialogContent className="gap-5">
+        <DialogHeader>
+          <DialogTitle className="text-red-500">{dialogTitle}</DialogTitle>
+          <DialogDescription>{dialogDescription}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary" onClick={() => setErrorMessage(null)}>
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TimetableErrorDialog;