schedules working

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { bMessenger } from 'src/shared/messages';
-import { userScheduleStore } from 'src/shared/storage/userScheduleStore';
 import { Course } from 'src/shared/types/Course';
 import { UserSchedule } from 'src/shared/types/UserSchedule';
 import { Button } from 'src/views/components/common/Button/Button';
@@ -14,7 +13,7 @@ type Props = {
     course: Course;
 };
 
-const { openNewTab } = bMessenger;
+const { openNewTab, addCourse, removeCourse } = bMessenger;
 
 /**
  * This component displays the buttons for the course info popup, that allow the user to either
@@ -64,17 +63,21 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
         openNewTab({ url: url.toString() });
     };
 
-    const saveCourse = async () => {
-        const schedules = await userScheduleStore.get('schedules');
-        const active = schedules.find(schedule => schedule.id === activeSchedule?.id);
-
-        if (!active) return;
-
-        active.addCourse(course);
-
-        await userScheduleStore.set('schedules', schedules);
+    const handleSaveCourse = async () => {
+        if (!activeSchedule) return;
+        addCourse({ course, scheduleId: activeSchedule.id });
     };
 
+    const handleRemoveCourse = async () => {
+        if (!activeSchedule) return;
+        removeCourse({ course, scheduleId: activeSchedule.id });
+    };
+
+    const isCourseSaved = (() => {
+        if (!activeSchedule) return false;
+        return Boolean(activeSchedule.containsCourse(course));
+    })();
+
     return (
         <Card className={styles.container}>
             <Button
@@ -100,11 +103,16 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
                 </Text>
                 <Icon className={styles.icon} color='white' name='collections_bookmark' size='medium' />
             </Button>
-            <Button disabled={!activeSchedule} onClick={saveCourse} type='success' className={styles.button}>
+            <Button
+                disabled={!activeSchedule}
+                onClick={isCourseSaved ? handleRemoveCourse : handleSaveCourse}
+                type={isCourseSaved ? 'danger' : 'success'}
+                className={styles.button}
+            >
                 <Text size='medium' weight='regular' color='white'>
-                    Save
+                    {isCourseSaved ? 'Remove' : 'Add'}
                 </Text>
-                <Icon className={styles.icon} color='white' name='add' size='medium' />
+                <Icon className={styles.icon} color='white' name={isCourseSaved ? 'remove' : 'add'} size='medium' />
             </Button>
         </Card>
     );

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

@@ -91,7 +91,7 @@ export default function CourseHeader({ course, activeSchedule, onClose }: Props)
                 </Text>
             ))}
 
-            <CourseButtons course={course} />
+            <CourseButtons course={course} activeSchedule={activeSchedule} />
         </Card>
     );
 }

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

@@ -18,3 +18,10 @@
         font-weight: bold !important;
     }
 }
+
+.isConflict {
+    * {
+        color: $speedway_brick !important;
+        text-decoration: line-through !important;
+    }
+}

src/views/components/injected/TableRow/TableRow.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Course, ScrapedRow } from 'src/shared/types/Course';
+import { UserSchedule } from 'src/shared/types/UserSchedule';
 import { Button } from '../../common/Button/Button';
 import Icon from '../../common/Icon/Icon';
 import styles from './TableRow.module.scss';
@@ -9,17 +10,14 @@ interface Props {
     isSelected: boolean;
     row: ScrapedRow;
     onClick: (...args: any[]) => any;
-    /**
-     * Whether the course is in the user' active schedule.
-     */
-    isInActiveSchedule: boolean;
+    activeSchedule?: UserSchedule;
 }
 
 /**
  * This component is injected into each row of the course catalog table.
  * @returns a react portal to the new td in the column or null if the column has not been created yet.
  */
-export default function TableRow({ row, isSelected, isInActiveSchedule, onClick }: Props): JSX.Element | null {
+export default function TableRow({ row, isSelected, activeSchedule, onClick }: Props): JSX.Element | null {
     const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
 
     const { element, course } = row;
@@ -40,8 +38,21 @@ export default function TableRow({ row, isSelected, isInActiveSchedule, onClick
     }, [isSelected, element.classList]);
 
     useEffect(() => {
-        element.classList[isInActiveSchedule ? 'add' : 'remove'](styles.inActiveSchedule);
-    }, [isInActiveSchedule, element.classList]);
+        if (!activeSchedule || !course) return;
+
+        const isInSchedule = activeSchedule.containsCourse(course);
+
+        element.classList[isInSchedule ? 'add' : 'remove'](styles.inActiveSchedule);
+
+        return () => {
+            element.classList.remove(styles.inActiveSchedule);
+        };
+    }, [activeSchedule, element.classList]);
+
+    useEffect(() => {
+        // if (!activeSchedule || !course) return;
+        // TODO: handle conflicts here
+    }, []);
 
     if (!container) {
         return null;