fix: Schedule Switching Bugs (#138)

* style: course selection fix

* fix: generic bugs on course selection

* fix: schedule switch lag when popup is open for too long

* fix: storybook bug

* chore: remove unnecessary dependency

src/shared/types/UserSchedule.ts

@@ -18,11 +18,13 @@ export class UserSchedule {
             this.name = name || '';
             this.hours = hours || 0;
         } else {
-            this.courses = coursesOrSchedule.courses.map(c => new Course(c));
+            this.courses = coursesOrSchedule?.courses.map(c => new Course(c)) || [];
-            this.name = coursesOrSchedule.name;
+            this.name = coursesOrSchedule?.name || 'new schedule';
             this.hours = 0;
-            for (const course of this.courses) {
+            if (this.courses && this.courses.length > 0) {
-                this.hours += course.creditHours;
+                for (const course of this.courses) {
+                    this.hours += course.creditHours;
+                }
             }
         }
     }

src/views/components/PopupMain.tsx

@@ -30,7 +30,7 @@ export default function PopupMain(): JSX.Element {
 
     useEffect(() => {
         function handleClickOutside(event) {
-            if (!popupRef.current.contains(event.target) && !toggleRef.current.contains(event.target)) {
+            if (!popupRef.current?.contains(event.target) && !toggleRef.current?.contains(event.target)) {
                 setIsPopupVisible(false);
             }
         }
@@ -114,7 +114,7 @@ export default function PopupMain(): JSX.Element {
                         {nonActiveSchedules.map(schedule => (
                             <div
                                 key={schedule.name}
-                                className='my-2 cursor-pointer border border-gray-300 rounded-md border-solid bg-white py-4 shadow-sm hover:bg-gray-100'
+                                className='my-2 cursor-pointer border border-gray-300 rounded-md border-solid bg-white p-2 shadow-sm hover:bg-gray-100'
                                 onClick={() => selectSchedule(schedule)}
                             >
                                 <Text as='div' variant='h1-course' className='color-ut-burntorange'>

src/views/hooks/useSchedules.ts

@@ -8,7 +8,6 @@ import { useEffect, useState } from 'react';
  */
 export default function useSchedules(): [active: UserSchedule | null, schedules: UserSchedule[]] {
     const [schedules, setSchedules] = useState<UserSchedule[]>([]);
-    const [activeIndex, setActiveIndex] = useState<number>(0);
     const [activeSchedule, setActiveSchedule] = useState<UserSchedule | null>(null);
 
     useEffect(() => {
@@ -18,31 +17,36 @@ export default function useSchedules(): [active: UserSchedule | null, schedules:
                 UserScheduleStore.get('activeIndex'),
             ]);
             setSchedules(storedSchedules.map(s => new UserSchedule(s)));
-            setActiveIndex(storedActiveIndex);
             setActiveSchedule(new UserSchedule(storedSchedules[storedActiveIndex]));
-
-            const initializable = UserScheduleStore.initialize();
-
-            if (initializable) {
-                const l1 = UserScheduleStore.listen('schedules', ({ newValue }) => {
-                    setSchedules(newValue.map(s => new UserSchedule(s)));
-                    setActiveSchedule(new UserSchedule(newValue[activeIndex]));
-                });
-
-                const l2 = UserScheduleStore.listen('activeIndex', ({ newValue }) => {
-                    setActiveIndex(newValue);
-                    setActiveSchedule(new UserSchedule(schedules[newValue]));
-                });
-
-                return () => {
-                    UserScheduleStore.removeListener(l1);
-                    UserScheduleStore.removeListener(l2);
-                };
-            }
         };
 
         fetchData();
-    }, [activeIndex, schedules]);
+
+        const setupListeners = () => {
+            const l1 = UserScheduleStore.listen('schedules', ({ newValue }) => {
+                setSchedules(newValue.map(s => new UserSchedule(s)));
+                setActiveSchedule(currentActive => {
+                    const newActiveIndex = newValue.findIndex(s => s.name === currentActive?.name);
+                    return new UserSchedule(newValue[newActiveIndex]);
+                });
+            });
+
+            const l2 = UserScheduleStore.listen('activeIndex', ({ newValue }) => {
+                setSchedules(currentSchedules => {
+                    setActiveSchedule(new UserSchedule(currentSchedules[newValue]));
+                    return currentSchedules;
+                });
+            });
+
+            return () => {
+                UserScheduleStore.removeListener(l1);
+                UserScheduleStore.removeListener(l2);
+            };
+        };
+
+        const init = UserScheduleStore.initialize();
+        init.then(() => setupListeners()).catch(console.error);
+    }, []);
 
     return [activeSchedule, schedules];
 }