fix(ui): duplicate schedule warning

src/views/components/PopupMain.tsx

@@ -19,6 +19,7 @@ import SettingsIcon from '~icons/material-symbols/settings';
 
 import { Button } from './common/Button';
 import CourseStatus from './common/CourseStatus';
+import { usePrompt } from './common/DialogProvider/DialogProvider';
 import { SmallLogo } from './common/LogoIcon';
 import PopupCourseBlock from './common/PopupCourseBlock';
 import ScheduleDropdown from './common/ScheduleDropdown';
@@ -61,6 +62,7 @@ export default function PopupMain(): JSX.Element {
     const [activeSchedule, schedules] = useSchedules();
     const [isRefreshing, setIsRefreshing] = useState(false);
     const [funny, setFunny] = useState<string>('');
+    const showDialog = usePrompt();
 
     useEffect(() => {
         const randomIndex = Math.floor(Math.random() * splashText.length);
@@ -79,6 +81,32 @@ export default function PopupMain(): JSX.Element {
         window.close();
     };
 
+    const handleAddSchedule = () => {
+        if (schedules.length >= 10) {
+            showDialog({
+                title: `You have 10 active schedules!`,
+
+                description: (
+                    <>
+                        To encourage organization,{' '}
+                        <span className='text-ut-burntorange'>please consider removing some unused schedules</span> you
+                        may have.
+                    </>
+                ),
+                // eslint-disable-next-line react/no-unstable-nested-components
+                buttons: close => (
+                    <Button variant='filled' color='ut-burntorange' onClick={close}>
+                        I Understand
+                    </Button>
+                ),
+            });
+
+            return;
+        }
+
+        createSchedule('New Schedule');
+    };
+
     return (
         <div className='h-screen max-h-full flex flex-col bg-white'>
             <div className='p-5 py-3.5'>
@@ -128,7 +156,7 @@ export default function PopupMain(): JSX.Element {
                             variant='filled'
                             color='ut-burntorange'
                             className='h-fit p-0 btn'
-                            onClick={() => createSchedule('New Schedule')}
+                            onClick={() => handleAddSchedule()}
                         >
                             <AddSchedule className='h-6 w-6' />
                         </Button>

src/views/components/common/ScheduleListItem.tsx

@@ -29,7 +29,7 @@ export type Props = {
  * This is a reusable dropdown component that can be used to toggle the visiblity of information
  */
 export default function ScheduleListItem({ schedule, dragHandleProps, onClick }: Props): JSX.Element {
-    const [activeSchedule] = useSchedules();
+    const [activeSchedule, schedules] = useSchedules();
     const [isEditing, setIsEditing] = useState(false);
     const [editorValue, setEditorValue] = useState(schedule.name);
 
@@ -55,6 +55,32 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
         setIsEditing(false);
     };
 
+    const handleDuplicateSchedule = (scheduleId: string) => {
+        if (schedules.length >= 10) {
+            showDialog({
+                title: `You have 10 active schedules!`,
+
+                description: (
+                    <>
+                        To encourage organization,{' '}
+                        <span className='text-ut-burntorange'>please consider removing some unused schedules</span> you
+                        may have.
+                    </>
+                ),
+                // eslint-disable-next-line react/no-unstable-nested-components
+                buttons: close => (
+                    <Button variant='filled' color='ut-burntorange' onClick={close}>
+                        I Understand
+                    </Button>
+                ),
+            });
+
+            return;
+        }
+
+        duplicateSchedule(scheduleId);
+    };
+
     const handleDelete = () => {
         if (schedule.id === activeSchedule.id) {
             showDialog({
@@ -180,7 +206,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
                                     <Text
                                         as='button'
                                         variant='small'
-                                        onClick={() => duplicateSchedule(schedule.id)}
+                                        onClick={() => handleDuplicateSchedule(schedule.id)}
                                         className='w-full rounded bg-transparent p-2 text-left data-[focus]:bg-gray-200/40'
                                     >
                                         Duplicate