Implement Minh's and Thomas's suggestions

Author: Austin-X

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

@@ -19,6 +19,8 @@ import {
 import { EllipsisVertical } from "lucide-react";
 import { useDeleteTimetableMutation } from "@/api/timetableApiSlice";
 import { EmailNotificationSettings } from "./EmailNotificationSettings";
+import ShareDialog from "../TimetableBuilder/ShareDialog";
+import { useState } from "react";
 
 interface TimetableCardKebabMenuProps {
   refetchMyTimetables: () => void;
@@ -35,6 +37,7 @@ const TimetableCardKebabMenu = ({
   refetchSharedTimetables,
   timetableId,
 }: TimetableCardKebabMenuProps) => {
+  const [openShareDialog, setOpenShareDialog] = useState(false);
   const [deleteTimetable] = useDeleteTimetableMutation();
 
   const handleDelete = async () => {
@@ -64,6 +67,10 @@ const TimetableCardKebabMenu = ({
         <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
           <EmailNotificationSettings timetableId={timetableId} />
         </DropdownMenuItem>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()} className="cursor-pointer" onClick={() => setOpenShareDialog(true)}>
+            Share Timetable
+        </DropdownMenuItem>
+        <ShareDialog open={openShareDialog} setOpen={setOpenShareDialog} calendar_id={timetableId} />
         <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
           <Dialog>
             <DialogTrigger asChild>

…c/pages/TimetableBuilder/ShareButton.tsx …c/pages/TimetableBuilder/ShareDialog.tsxcourse-matrix/frontend/src/pages/TimetableBuilder/ShareButton.tsx renamed to course-matrix/frontend/src/pages/TimetableBuilder/ShareDialog.tsx course-matrix/frontend/src/pages/TimetableBuilder/ShareButton.tsx renamed to course-matrix/frontend/src/pages/TimetableBuilder/ShareDialog.tsx

@@ -13,49 +13,47 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useRef, useState } from "react";
 import { useCreateShareMutation } from "@/api/sharedApiSlice";
-import TimetableErrorDialog from "./TimetableErrorDialog";
 import TimetableSuccessDialog from "./TimetableSuccessDialog";
+import { Spinner } from "@/components/ui/spinner";
 
-interface ShareButtonProps {
+interface ShareDialogProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
   calendar_id: number;
 }
 
-const ShareButton = ({ calendar_id }: ShareButtonProps) => {
+const ShareDialog = ({ open, setOpen, calendar_id }: ShareDialogProps) => {
   const emailRef = useRef<HTMLInputElement>(null);
   const [shareTimetable] = useCreateShareMutation();
+
+  const [loading, setLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
 
   const handleShare = async () => {
+    setLoading(true);
     const email = emailRef.current?.value;
-
     const { error } = await shareTimetable({
       shared_email: email,
       calendar_id,
     });
     if (error) {
       const errorData = (error as { data?: { error?: string } }).data;
       setErrorMessage(errorData?.error ?? "Unknown error occurred");
-      return;
     } else {
       setSuccessMessage("Timetable shared successfully!");
+      setOpen(false);
+      setErrorMessage(null);
     }
+    setLoading(false);
   };
 
-  return (
-    <Dialog>
-      <TimetableErrorDialog
-        errorMessage={errorMessage}
-        setErrorMessage={setErrorMessage}
-      />
+  return (<Dialog open={open} onOpenChange={() => { setOpen(!open); setErrorMessage(null); } }>
       <TimetableSuccessDialog
         successMessage={successMessage}
         setSuccessMessage={setSuccessMessage}
       />
       <DialogTrigger asChild>
-        <Button size="sm" variant="outline">
-          Share
-        </Button>
       </DialogTrigger>
       <DialogContent className="gap-5">
         <DialogHeader>
@@ -64,6 +62,7 @@ const ShareButton = ({ calendar_id }: ShareButtonProps) => {
             Who would you like to share your timetable with?
           </DialogDescription>
         </DialogHeader>
+        {loading && <Spinner />}
         <Label htmlFor="sharedEmail">
           Enter the email of the person you want to share your timetable with
         </Label>
@@ -74,17 +73,16 @@ const ShareButton = ({ calendar_id }: ShareButtonProps) => {
           placeholder="Email"
           className="w-full"
         />
+        <DialogDescription className="text-red-500">{errorMessage}</DialogDescription>
         <DialogFooter>
           <DialogClose asChild>
             <Button variant="secondary">Cancel</Button>
           </DialogClose>
-          <DialogClose asChild>
-            <Button onClick={handleShare}>Share</Button>
-          </DialogClose>
+          <Button onClick={handleShare}>Share</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
 };
 
-export default ShareButton;
+export default ShareDialog;

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

@@ -46,16 +46,15 @@ import {
   Timetable,
   Restriction,
 } from "@/utils/type-utils";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import OfferingInfo from "./OfferingInfo";
 import { Checkbox } from "@/components/ui/checkbox";
 import { CourseModel, TimetableGenerateResponseModel } from "@/models/models";
 import LoadingPage from "@/pages/Loading/LoadingPage";
 import { GeneratedCalendars } from "./GeneratedCalendars";
 import { Spinner } from "@/components/ui/spinner";
 import { convertRestrictionTimes } from "@/utils/convert-restriction-times";
-import ShareButton from "./ShareButton";
-import SharedCalendar from "./SharedCalendar";
+import ShareDialog from "./ShareDialog";
 
 type FormContextType = UseFormReturn<z.infer<typeof TimetableFormSchema>>;
 export const FormContext = createContext<FormContextType | null>(null);
@@ -135,6 +134,7 @@ const TimetableBuilder = () => {
   const noSearchAndFilter = () => {
     return !searchQuery && !filters;
   };
+  const [openShareDialog, setOpenShareDialog] = useState(false);
 
   // limit search number if no search query or filters for performance purposes.
   // Otherwise, limit is 10k, which effectively gets all results.
@@ -301,7 +301,7 @@ const TimetableBuilder = () => {
       setIsGeneratingTimetables(true);
       setGeneratedTimetables(data);
       setErrorMsg("");
-    } catch (error) {
+    } catch {
       setIsGeneratingTimetables(false);
       setErrorMsg("No valid timetables found");
     }
@@ -362,8 +362,11 @@ const TimetableBuilder = () => {
                 <Button size="sm" variant="outline" onClick={handleReset}>
                   Reset
                 </Button>
+                <Button size="sm" variant="outline" onClick={() => setOpenShareDialog(true)}>
+                  Share
+                </Button>
                 {isEditingTimetable && (
-                  <ShareButton calendar_id={timetableId} />
+                  <ShareDialog open={openShareDialog} setOpen={setOpenShareDialog} calendar_id={timetableId} />
                 )}
               </div>
             </div>