From 94dfd77523af95003aadd02fb2f92420c680eeb0 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Thu, 13 Jun 2024 21:32:31 -0700
Subject: [PATCH] feat: support switching skeleton schedules (#994)

---
 .../components/Calendar/CalendarToolbar.tsx   | 63 +++++++++++++------
 .../AddedCourses/AddedCoursePane.tsx          | 10 +--
 .../src/components/buttons/Copy.tsx           | 17 ++---
 apps/antalmanac/src/stores/AppStore.ts        | 10 ++-
 apps/antalmanac/src/stores/Schedules.ts       |  6 +-
 5 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx b/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx
index 863eba1d8..85e33f543 100644
--- a/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx
+++ b/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx
@@ -46,7 +46,12 @@ function handleUndo() {
     undoDelete(null);
 }
 
-function EditScheduleButton(props: { index: number }) {
+interface RenameScheduleButtonProps {
+    index: number;
+    disabled?: boolean;
+}
+
+function RenameScheduleButton({ index, disabled }: RenameScheduleButtonProps) {
     const [open, setOpen] = useState(false);
 
     const handleOpen = useCallback(() => {
@@ -59,15 +64,24 @@ function EditScheduleButton(props: { index: number }) {
 
     return (
         <Box>
-            <IconButton onClick={handleOpen} size="small">
-                <EditIcon />
-            </IconButton>
-            <RenameScheduleDialog fullWidth open={open} index={props.index} onClose={handleClose} />
+            <Tooltip title="Rename Schedule">
+                <span>
+                    <IconButton onClick={handleOpen} size="small" disabled={disabled}>
+                        <EditIcon />
+                    </IconButton>
+                </span>
+            </Tooltip>
+            <RenameScheduleDialog fullWidth open={open} index={index} onClose={handleClose} />
         </Box>
     );
 }
 
-function DeleteScheduleButton(props: { index: number }) {
+interface DeleteScheduleButtonProps {
+    index: number;
+    disabled?: boolean;
+}
+
+function DeleteScheduleButton({ index, disabled }: DeleteScheduleButtonProps) {
     const [open, setOpen] = useState(false);
 
     const handleOpen = useCallback(() => {
@@ -80,18 +94,30 @@ function DeleteScheduleButton(props: { index: number }) {
 
     return (
         <Box>
-            <IconButton onClick={handleOpen} size="small" disabled={AppStore.schedule.getNumberOfSchedules() === 1}>
-                <ClearIcon />
-            </IconButton>
-            <DeleteScheduleDialog fullWidth open={open} index={props.index} onClose={handleClose} />
+            <Tooltip title="Delete Schedule">
+                <span>
+                    <IconButton
+                        onClick={handleOpen}
+                        size="small"
+                        disabled={AppStore.schedule.getNumberOfSchedules() === 1 || disabled}
+                    >
+                        <ClearIcon />
+                    </IconButton>
+                </span>
+            </Tooltip>
+            <DeleteScheduleDialog fullWidth open={open} index={index} onClose={handleClose} />
         </Box>
     );
 }
 
+interface AddScheduleButtonProps {
+    disabled: boolean;
+}
+
 /**
  * MenuItem nested in the select menu to add a new schedule through a dialog.
  */
-function AddScheduleButton() {
+function AddScheduleButton({ disabled }: AddScheduleButtonProps) {
     const [open, setOpen] = useState(false);
 
     const handleOpen = useCallback(() => {
@@ -104,7 +130,7 @@ function AddScheduleButton() {
 
     return (
         <>
-            <Button color="inherit" onClick={handleOpen} sx={{ display: 'flex', gap: 1 }}>
+            <Button color="inherit" onClick={handleOpen} sx={{ display: 'flex', gap: 1 }} disabled={disabled}>
                 <AddIcon />
                 <Typography whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" textTransform="none">
                     Add Schedule
@@ -179,7 +205,6 @@ function SelectSchedulePopover(props: { scheduleNames: string[] }) {
                 variant="outlined"
                 onClick={handleClick}
                 sx={{ minWidth, maxWidth, justifyContent: 'space-between' }}
-                disabled={skeletonMode}
             >
                 <Typography whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" textTransform="none">
                     {currentScheduleName}
@@ -221,16 +246,16 @@ function SelectSchedulePopover(props: { scheduleNames: string[] }) {
                                 </Button>
                             </Box>
                             <Box display="flex" alignItems="center" gap={0.5}>
-                                <CopyScheduleButton index={index} />
-                                <EditScheduleButton index={index} />
-                                <DeleteScheduleButton index={index} />
+                                <CopyScheduleButton index={index} disabled={skeletonMode} />
+                                <RenameScheduleButton index={index} disabled={skeletonMode} />
+                                <DeleteScheduleButton index={index} disabled={skeletonMode} />
                             </Box>
                         </Box>
                     ))}
 
                     <Box marginY={1} />
 
-                    <AddScheduleButton />
+                    <AddScheduleButton disabled={skeletonMode} />
                 </Box>
             </Popover>
         </Box>
@@ -251,6 +276,7 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
     const { showFinalsSchedule, toggleDisplayFinalsSchedule } = props;
     const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames());
     const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
+    const [skeletonScheduleNames, setSkeletonScheduleNames] = useState(AppStore.getSkeletonScheduleNames());
 
     const handleToggleFinals = useCallback(() => {
         logAnalytics({
@@ -267,6 +293,7 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
     useEffect(() => {
         const handleSkeletonModeChange = () => {
             setSkeletonMode(AppStore.getSkeletonMode());
+            setSkeletonScheduleNames(AppStore.getSkeletonScheduleNames());
         };
 
         AppStore.on('skeletonModeChange', handleSkeletonModeChange);
@@ -298,7 +325,7 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
             }}
         >
             <Box gap={1} display="flex" alignItems="center">
-                <SelectSchedulePopover scheduleNames={scheduleNames} />
+                <SelectSchedulePopover scheduleNames={skeletonMode ? skeletonScheduleNames : scheduleNames} />
                 <Tooltip title="Toggle showing finals schedule">
                     <Button
                         color={showFinalsSchedule ? 'primary' : 'inherit'}
diff --git a/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx b/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx
index 51d70d598..f865fc17b 100644
--- a/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx
+++ b/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx
@@ -83,7 +83,7 @@ function CustomEventsBox() {
     const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
 
     const [customEvents, setCustomEvents] = useState(
-        skeletonMode ? AppStore.getSkeletonSchedule().customEvents : AppStore.schedule.getCurrentCustomEvents()
+        skeletonMode ? AppStore.getCurrentSkeletonSchedule().customEvents : AppStore.schedule.getCurrentCustomEvents()
     );
 
     useEffect(() => {
@@ -138,7 +138,7 @@ function CustomEventsBox() {
 function ScheduleNoteBox() {
     const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
     const [scheduleNote, setScheduleNote] = useState(
-        skeletonMode ? AppStore.getSkeletonSchedule().scheduleNote : AppStore.getCurrentScheduleNote()
+        skeletonMode ? AppStore.getCurrentSkeletonSchedule().scheduleNote : AppStore.getCurrentScheduleNote()
     );
     const [scheduleIndex, setScheduleIndex] = useState(AppStore.getCurrentScheduleIndex());
 
@@ -201,17 +201,19 @@ function ScheduleNoteBox() {
 }
 
 function SkeletonSchedule() {
-    const [skeletonSchedule, setSkeletonSchedule] = useState(AppStore.getSkeletonSchedule());
+    const [skeletonSchedule, setSkeletonSchedule] = useState(AppStore.getCurrentSkeletonSchedule());
 
     useEffect(() => {
         const updateSkeletonSchedule = () => {
-            setSkeletonSchedule(AppStore.getSkeletonSchedule());
+            setSkeletonSchedule(AppStore.getCurrentSkeletonSchedule());
         };
 
         AppStore.on('skeletonScheduleChange', updateSkeletonSchedule);
+        AppStore.on('currentScheduleIndexChange', updateSkeletonSchedule);
 
         return () => {
             AppStore.off('skeletonScheduleChange', updateSkeletonSchedule);
+            AppStore.off('currentScheduleIndexChange', updateSkeletonSchedule);
         };
     }, []);
 
diff --git a/apps/antalmanac/src/components/buttons/Copy.tsx b/apps/antalmanac/src/components/buttons/Copy.tsx
index 875730d48..79ae91bd6 100644
--- a/apps/antalmanac/src/components/buttons/Copy.tsx
+++ b/apps/antalmanac/src/components/buttons/Copy.tsx
@@ -1,15 +1,16 @@
 import { ContentCopy } from '@mui/icons-material';
-import { IconButton, SxProps, Tooltip } from '@mui/material';
+import { Box, IconButton, SxProps, Tooltip } from '@mui/material';
 import { useCallback, useState } from 'react';
 
 import CopyScheduleDialog from '$components/dialogs/CopySchedule';
 
 interface CopyScheduleButtonProps {
     index: number;
+    disabled?: boolean;
     buttonSx?: SxProps;
 }
 
-export function CopyScheduleButton({ index, buttonSx }: CopyScheduleButtonProps) {
+export function CopyScheduleButton({ index, disabled, buttonSx }: CopyScheduleButtonProps) {
     const [open, setOpen] = useState(false);
 
     const handleOpen = useCallback(() => {
@@ -21,13 +22,15 @@ export function CopyScheduleButton({ index, buttonSx }: CopyScheduleButtonProps)
     }, []);
 
     return (
-        <>
+        <Box>
             <Tooltip title="Copy Schedule">
-                <IconButton sx={buttonSx} onClick={handleOpen} size="small">
-                    <ContentCopy />
-                </IconButton>
+                <span>
+                    <IconButton sx={buttonSx} onClick={handleOpen} size="small" disabled={disabled}>
+                        <ContentCopy />
+                    </IconButton>
+                </span>
             </Tooltip>
             <CopyScheduleDialog fullWidth open={open} index={index} onClose={handleClose} />
-        </>
+        </Box>
     );
 }
diff --git a/apps/antalmanac/src/stores/AppStore.ts b/apps/antalmanac/src/stores/AppStore.ts
index d0d771e29..37dc9c6c7 100644
--- a/apps/antalmanac/src/stores/AppStore.ts
+++ b/apps/antalmanac/src/stores/AppStore.ts
@@ -91,8 +91,12 @@ class AppStore extends EventEmitter {
         return this.schedule.getAllCustomEvents();
     }
 
-    getSkeletonSchedule() {
-        return this.schedule.getSkeletonSchedule();
+    getCurrentSkeletonSchedule() {
+        return this.schedule.getCurrentSkeletonSchedule();
+    }
+
+    getSkeletonScheduleNames() {
+        return this.schedule.getSkeletonScheduleNames();
     }
 
     addCourse(newCourse: ScheduleCourse, scheduleIndex: number = this.schedule.getCurrentScheduleIndex()) {
@@ -331,7 +335,7 @@ class AppStore extends EventEmitter {
         this.emit('skeletonModeChange');
 
         // Switch to added courses tab since PeterPortal can't be reached anyway
-        useTabStore.getState().setActiveTab(1);
+        useTabStore.getState().setActiveTab(2);
     }
 
     changeCurrentSchedule(newScheduleIndex: number) {
diff --git a/apps/antalmanac/src/stores/Schedules.ts b/apps/antalmanac/src/stores/Schedules.ts
index 696feb177..e4e4b6a06 100644
--- a/apps/antalmanac/src/stores/Schedules.ts
+++ b/apps/antalmanac/src/stores/Schedules.ts
@@ -579,10 +579,14 @@ export class Schedules {
         this.scheduleNoteMap[scheduleNoteId] = newScheduleNote;
     }
 
-    getSkeletonSchedule(): ShortCourseSchedule {
+    getCurrentSkeletonSchedule(): ShortCourseSchedule {
         return this.skeletonSchedules[this.currentScheduleIndex];
     }
 
+    getSkeletonScheduleNames(): string[] {
+        return this.skeletonSchedules.map((schedule) => schedule.scheduleName);
+    }
+
     setSkeletonSchedules(skeletonSchedules: ShortCourseSchedule[]) {
         this.skeletonSchedules = skeletonSchedules;
     }