Add Custom Events and Schedule Notes to Skeleton Mode

apps/antalmanac/src/actions/AppStoreActions.ts

@@ -110,7 +110,6 @@ export const loadSchedule = async (userId: string, rememberMe: boolean) => {
             window.confirm(`Are you sure you want to load a different schedule? You have unsaved changes!`))
     ) {
         userId = userId.replace(/\s+/g, '');
-
         if (userId.length > 0) {
             if (rememberMe) {
                 window.localStorage.setItem('userID', userId);
@@ -122,15 +121,15 @@ export const loadSchedule = async (userId: string, rememberMe: boolean) => {
                 const res = await trpc.users.getUserData.query({ userId });
                 const scheduleSaveState = res?.userData;
 
-                if (scheduleSaveState === undefined) {
+                if (scheduleSaveState == null) {
                     openSnackbar('error', `Couldn't find schedules for username "${userId}".`);
                 } else if (await AppStore.loadSchedule(scheduleSaveState)) {
                     openSnackbar('success', `Schedule for username "${userId}" loaded.`);
                 } else {
                     AppStore.loadSkeletonSchedule(scheduleSaveState);
                     openSnackbar(
                         'error',
-                        `Network error loading course information for "${userId}". 
+                        `Network error loading course information for "${userId}". 	              
                         If this continues to happen, please submit a feedback form.`
                     );
                 }

apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx

@@ -128,6 +128,7 @@ function AddScheduleButton() {
  */
 function SelectSchedulePopover(props: { scheduleNames: string[] }) {
     const [currentScheduleIndex, setCurrentScheduleIndex] = useState(AppStore.getCurrentScheduleIndex());
+    const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
 
     const [anchorEl, setAnchorEl] = useState<HTMLElement>();
 
@@ -156,17 +157,23 @@ function SelectSchedulePopover(props: { scheduleNames: string[] }) {
         setCurrentScheduleIndex(AppStore.getCurrentScheduleIndex());
     }, []);
 
+    const handleSkeletonModeChange = () => {
+        setSkeletonMode(AppStore.getSkeletonMode());
+    };
+
     useEffect(() => {
         AppStore.on('addedCoursesChange', handleScheduleIndexChange);
         AppStore.on('customEventsChange', handleScheduleIndexChange);
         AppStore.on('colorChange', handleScheduleIndexChange);
         AppStore.on('currentScheduleIndexChange', handleScheduleIndexChange);
+        AppStore.on('skeletonModeChange', handleSkeletonModeChange);
 
         return () => {
             AppStore.off('addedCoursesChange', handleScheduleIndexChange);
             AppStore.off('customEventsChange', handleScheduleIndexChange);
             AppStore.off('colorChange', handleScheduleIndexChange);
             AppStore.off('currentScheduleIndexChange', handleScheduleIndexChange);
+            AppStore.off('skeletonModeChange', handleSkeletonModeChange);
         };
     }, [handleScheduleIndexChange]);
 
@@ -178,6 +185,7 @@ 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}
@@ -246,8 +254,8 @@ export interface CalendarPaneToolbarProps {
  */
 function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
     const { showFinalsSchedule, toggleDisplayFinalsSchedule } = props;
-
     const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames());
+    const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
 
     const handleToggleFinals = useCallback(() => {
         logAnalytics({
@@ -261,6 +269,18 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
         setScheduleNames(AppStore.getScheduleNames());
     }, []);
 
+    useEffect(() => {
+        const handleSkeletonModeChange = () => {
+            setSkeletonMode(AppStore.getSkeletonMode());
+        };
+
+        AppStore.on('skeletonModeChange', handleSkeletonModeChange);
+
+        return () => {
+            AppStore.off('skeletonModeChange', handleSkeletonModeChange);
+        };
+    }, []);
+
     useEffect(() => {
         AppStore.on('scheduleNamesChange', handleScheduleNamesChange);
 
@@ -290,6 +310,7 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
                         variant={showFinalsSchedule ? 'contained' : 'outlined'}
                         onClick={handleToggleFinals}
                         size="small"
+                        disabled={skeletonMode}
                     >
                         Finals
                     </Button>
@@ -301,20 +322,20 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
             <Box display="flex" flexWrap="wrap" gap={0.5}>
                 <Box display="flex" alignItems="center" gap={0.5}>
                     <Tooltip title="Undo last action">
-                        <IconButton onClick={handleUndo} size="medium">
+                        <IconButton onClick={handleUndo} size="medium" disabled={skeletonMode}>
                             <UndoIcon fontSize="small" />
                         </IconButton>
                     </Tooltip>
 
                     <Tooltip title="Clear schedule">
-                        <IconButton onClick={handleClearSchedule} size="medium">
+                        <IconButton onClick={handleClearSchedule} size="medium" disabled={skeletonMode}>
                             <DeleteIcon fontSize="small" />
                         </IconButton>
                     </Tooltip>
                 </Box>
 
                 <Box display="flex" flexWrap="wrap" alignItems="center" gap={0.5}>
-                    <CustomEventDialog scheduleNames={scheduleNames} key="custom" />
+                    <CustomEventDialog key="custom" scheduleNames={AppStore.getScheduleNames()} />
                 </Box>
             </Box>
         </Paper>

apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx

@@ -294,16 +294,18 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
         return (
             <Paper className={classes.customEventContainer} ref={paperRef}>
                 <div className={classes.title}>{title}</div>
-                <div className={classes.table}>
-                    Location: &nbsp;&nbsp;
-                    <Link
-                        className={classes.clickableLocation}
-                        to={`/map?location=${building ?? 0}`}
-                        onClick={focusMap}
-                    >
-                        {building ? buildingCatalogue[+building].name : ''}
-                    </Link>
-                </div>
+                {building && (
+                    <div className={classes.table}>
+                        Location:&nbsp;
+                        <Link
+                            className={classes.clickableLocation}
+                            to={`/map?location=${building ?? 0}`}
+                            onClick={focusMap}
+                        >
+                            {buildingCatalogue[+building].name}
+                        </Link>
+                    </div>
+                )}
                 <div className={classes.buttonBar}>
                     <div className={`${classes.colorPicker}`}>
                         <ColorPicker