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%;