refactoring courseschedule storage

src/views/components/CourseCatalogMain.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Course, ScrapedRow } from 'src/shared/types/Course';
 import { useKeyPress } from '../hooks/useKeyPress';
-import useUserSchedules from '../hooks/useUserSchedules';
+import useSchedules from '../hooks/useSchedules';
 import { CourseCatalogScraper } from '../lib/CourseCatalogScraper';
 import getCourseTableRows from '../lib/getCourseTableRows';
 import { SiteSupport } from '../lib/getSiteSupport';
@@ -44,9 +44,6 @@ export default function CourseCatalogMain({ support }: Props) {
         setRows([...rows, ...newRows]);
     };
 
-    const schedules = useUserSchedules();
-    const [activeSchedule] = schedules;
-
     const handleRowButtonClick = (course: Course) => () => {
         setSelectedCourse(course);
     };
@@ -57,6 +54,12 @@ export default function CourseCatalogMain({ support }: Props) {
 
     useKeyPress('Escape', handleClearSelectedCourse);
 
+    const [activeSchedule] = useSchedules();
+
+    if (!activeSchedule) {
+        return null;
+    }
+
     return (
         <ExtensionRoot>
             <RecruitmentBanner />

src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.module.scss

@@ -3,6 +3,7 @@
 .container {
     margin: 12px 4px;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     box-shadow: none;

src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx

@@ -65,12 +65,12 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
 
     const handleSaveCourse = async () => {
         if (!activeSchedule) return;
-        addCourse({ course, scheduleId: activeSchedule.id });
+        addCourse({ course, scheduleName: activeSchedule.name });
     };
 
     const handleRemoveCourse = async () => {
         if (!activeSchedule) return;
-        removeCourse({ course, scheduleId: activeSchedule.id });
+        removeCourse({ course, scheduleName: activeSchedule.name });
     };
 
     const isCourseSaved = (() => {

src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Course } from 'src/shared/types/Course';
 import { UserSchedule } from 'src/shared/types/UserSchedule';
 import Card from 'src/views/components/common/Card/Card';
-import Divider from 'src/views/components/common/Divider/Divider';
 import Icon from 'src/views/components/common/Icon/Icon';
 import Link from 'src/views/components/common/Link/Link';
 import Text from 'src/views/components/common/Text/Text';

src/views/components/injected/CoursePopup/CoursePopup.module.scss

@@ -1,7 +1,7 @@
 .popup {
     border-radius: 12px;
     position: relative;
-    width: 55%;
+    max-width: 55%;
     overflow-y: auto;
     max-height: 90%;
 

src/views/hooks/useSchedules.ts

@@ -0,0 +1,37 @@
+import { Serialized } from 'chrome-extension-toolkit';
+import { useEffect, useState } from 'react';
+import { UserScheduleStore } from 'src/shared/storage/UserScheduleStore';
+import { UserSchedule } from 'src/shared/types/UserSchedule';
+
+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(() => {
+        Promise.all([UserScheduleStore.get('schedules'), UserScheduleStore.get('activeIndex')]).then(
+            ([schedules, activeIndex]) => {
+                setSchedules(schedules.map(s => new UserSchedule(s)));
+                setActiveIndex(activeIndex);
+                setActiveSchedule(new UserSchedule(schedules[activeIndex]));
+            }
+        );
+
+        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);
+        };
+    }, []);
+
+    return [activeSchedule, schedules];
+}

src/views/hooks/useUserSchedules.ts

@@ -1,26 +0,0 @@
-import { Serialized } from 'chrome-extension-toolkit';
-import { useEffect, useState } from 'react';
-import { userScheduleStore } from 'src/shared/storage/UserScheduleStore';
-import { UserSchedule } from 'src/shared/types/UserSchedule';
-
-export default function useUserSchedules(): UserSchedule[] {
-    const [schedules, setSchedules] = useState<UserSchedule[]>([]);
-
-    useEffect(() => {
-        function updateSchedules(schedules: Serialized<UserSchedule>[]) {
-            setSchedules(schedules.map(s => new UserSchedule(s)));
-        }
-
-        userScheduleStore.get('schedules').then(updateSchedules);
-
-        const listener = userScheduleStore.listen('schedules', ({ newValue }) => {
-            updateSchedules(newValue);
-        });
-
-        return () => {
-            userScheduleStore.removeListener(listener);
-        };
-    }, []);
-
-    return schedules;
-}

src/views/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from 'react-dom';
+import render from './lib/react';
+
 import { ContextInvalidated, createShadowDOM, isExtensionPopup, onContextInvalidated } from 'chrome-extension-toolkit';
 import CourseCatalogMain from './components/CourseCatalogMain';
 import colors from './styles/colors.module.scss';
@@ -14,7 +15,7 @@ if (!support) {
 }
 
 if (support === SiteSupport.EXTENSION_POPUP) {
-    render(<PopupMain />, document.getElementById('root'));
+    render(<PopupMain />, document.body);
 }
 
 if (support === SiteSupport.MY_CALENDAR) {
@@ -39,6 +40,7 @@ onContextInvalidated(() => {
     const div = document.createElement('div');
     div.id = 'context-invalidated-container';
     document.body.appendChild(div);
+
     render(
         <ContextInvalidated fontFamily='monospace' color={colors.white} backgroundColor={colors.burnt_orange} />,
         div

src/views/lib/react/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+export default function render(element: React.ReactElement, container: HTMLElement | ShadowRoot | null) {
+    if (!container) {
+        throw new Error('Container is null');
+    }
+    const root = ReactDOM.createRoot(container);
+    root.render(element);
+}