refactor: improve error message and handle active schedule deletion (#243)

src/pages/background/lib/deleteSchedule.ts

@@ -17,10 +17,14 @@ export default async function deleteSchedule(scheduleId: string): Promise<string
         throw new Error(`Schedule ${scheduleId} does not exist`);
     }
     if (scheduleIndex === activeIndex) {
-        throw new Error('Cannot delete active schedule');
+        throw new Error('You cannot delete your active schedule! Please switch to another schedule before deleting.');
     }
 
     schedules.splice(scheduleIndex, 1);
     await UserScheduleStore.set('schedules', schedules);
+
+    if (activeIndex >= schedules.length) {
+        await UserScheduleStore.set('activeIndex', schedules.length - 1);
+    }
     return undefined;
 }

src/views/components/common/Prompt.tsx

@@ -1,4 +1,4 @@
-import { Dialog, Transition, TransitionChild } from '@headlessui/react';
+import { Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -50,11 +50,11 @@ function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialo
                     leaveTo='opacity-0 scale-95'
                 >
                     <div className='fixed inset-0 w-screen flex items-center justify-center'>
-                        <Dialog.Panel className='h-[200] w-[431px] flex flex-col rounded bg-white p-6'>
+                        <DialogPanel className='h-[200] w-[431px] flex flex-col rounded bg-white p-6'>
-                            <Dialog.Title className='mb-[10px]'>{title}</Dialog.Title>
+                            <DialogTitle className='mb-[10px]'>{title}</DialogTitle>
-                            <Dialog.Description className='mb-[13px]'>{content}</Dialog.Description>
+                            <Description className='mb-[13px]'>{content}</Description>
                             <div className='flex items-center justify-end gap-2'>{children}</div>
-                        </Dialog.Panel>
+                        </DialogPanel>
                     </div>
                 </TransitionChild>
             </Dialog>

src/views/components/common/ScheduleListItem.tsx

@@ -9,6 +9,9 @@ import React, { useEffect, useMemo, useState } from 'react';
 import XIcon from '~icons/material-symbols/close';
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 
+import { Button } from './Button';
+import PromptDialog from './Prompt';
+
 /**
  * Props for the ScheduleListItem component.
  */
@@ -26,6 +29,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
     const [activeSchedule] = useSchedules();
     const [isEditing, setIsEditing] = useState(false);
     const [editorValue, setEditorValue] = useState(schedule.name);
+    const [error, setError] = useState<string | undefined>(undefined);
 
     const editorRef = React.useRef<HTMLInputElement>(null);
     useEffect(() => {
@@ -50,8 +54,28 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
         setIsEditing(false);
     };
 
+    const onDelete = () => {
+        deleteSchedule(schedule.id).catch(e => setError(e.message));
+    };
+
     return (
         <div className='rounded bg-white'>
+            <PromptDialog
+                isOpen={!!error}
+                onClose={() => setError(undefined)}
+                title={
+                    <Text className='text-red' variant='h4'>
+                        Something Went Wrong
+                    </Text>
+                }
+                content={<Text variant='p'>{error}</Text>}
+                // eslint-disable-next-line react/no-children-prop
+                children={[
+                    <Button key='yes' variant='filled' color='ut-black' onClick={() => setError(undefined)}>
+                        I understand
+                    </Button>,
+                ]}
+            />
             <li className='w-full flex cursor-pointer items-center text-ut-burntorange'>
                 <div className='h-full cursor-move focusable' {...dragHandleProps}>
                     <DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
@@ -93,10 +117,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
                         )}
                     </div>
                     <div>
-                        <XIcon
+                        <XIcon className='invisible h-5 w-5 text-ut-red group-hover:visible' onClick={onDelete} />
-                            className='invisible h-5 w-5 text-ut-red group-hover:visible'
-                            onClick={() => deleteSchedule(schedule.id)}
-                        />
                     </div>
                 </div>
             </li>

src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx

@@ -8,7 +8,7 @@ import styles from './RecruitmentBanner.module.scss';
 const DISCORD_URL = 'https://discord.gg/7pQDBGdmb7';
 const GITHUB_URL = 'https://github.com/Longhorn-Developers/UT-Registration-Plus';
 
-const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD'];
+const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD', 'DES'];
 
 /**
  * This adds a new column to the course catalog table header.