infrastructure for multiple schedules

src/background/storage/DevStore.ts

@@ -1,4 +1,4 @@
-import { createStore } from 'chrome-extension-toolkit';
+import { createLocalStore, debugStore } from 'chrome-extension-toolkit';
 
 /**
  * A store that is used to store data that is only relevant during development
@@ -16,10 +16,12 @@ interface IDevStore {
     reloadTabId?: number;
 }
 
-export const DevStore = createStore<IDevStore>('DEV_STORE', {
+export const DevStore = createLocalStore<IDevStore>({
     debugTabId: undefined,
     isTabReloading: true,
     wasDebugTabVisible: false,
     isExtensionReloading: true,
     reloadTabId: undefined,
 });
+
+debugStore({ DevStore });

src/background/storage/ExtensionStore.ts

@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
-import { createStore } from 'chrome-extension-toolkit';
+import { createLocalStore, debugStore } from 'chrome-extension-toolkit';
 
 /**
  * A store that is used for storing user options
@@ -13,19 +13,27 @@ interface IExtensionStore {
     deviceId: string;
 }
 
-const base = createStore<IExtensionStore>('EXTENSION_STORE', {
-    version: chrome.runtime.getManifest().version,
-    lastUpdate: Date.now(),
-    deviceId: '',
-});
+interface Actions {
+    getDeviceId(): Promise<string>;
+}
 
-export const ExtensionStore = base.modify({
-    async getDeviceId() {
-        const deviceId = await base.getDeviceId();
-        if (deviceId) {
-            return deviceId;
-        }
-        const newDeviceId = uuidv4();
-        return newDeviceId;
+const ExtensionStore = createLocalStore<IExtensionStore, Actions>(
+    {
+        version: chrome.runtime.getManifest().version,
+        lastUpdate: Date.now(),
+        deviceId: '',
     },
-});
+    store => ({
+        getDeviceId: async () => {
+            const deviceId = await store.getDeviceId();
+            if (deviceId) {
+                return deviceId;
+            }
+            const newDeviceId = uuidv4();
+            await store.setDeviceId(newDeviceId);
+            return newDeviceId;
+        },
+    })
+);
+
+debugStore({ ExtensionStore });

src/background/storage/OptionsStore.ts

@@ -1,4 +1,4 @@
-import { createStore } from 'chrome-extension-toolkit';
+import { createSyncStore, debugStore } from 'chrome-extension-toolkit';
 
 /**
  * A store that is used for storing user options
@@ -10,7 +10,9 @@ interface IOptionsStore {
     shouldScrollToLoad: boolean;
 }
 
-export const OptionsStore = createStore<IOptionsStore>('OPTIONS_STORE', {
+export const OptionsStore = createSyncStore<IOptionsStore>({
     shouldHighlightConflicts: true,
     shouldScrollToLoad: true,
 });
+
+debugStore({ OptionsStore });

src/background/storage/SessionStore.ts

@@ -1,15 +1,11 @@
-import { createStore, Store } from 'chrome-extension-toolkit';
+import { createSessionStore, debugStore } from 'chrome-extension-toolkit';
 
 interface ISessionStore {
     chromeSessionId?: string;
 }
 
-export const SessionStore = createStore<ISessionStore>(
-    'SESSION_STORE',
-    {
-        chromeSessionId: undefined,
-    },
-    {
-        area: 'session',
-    }
-);
+export const SessionStore = createSessionStore<ISessionStore>({
+    chromeSessionId: undefined,
+});
+
+debugStore({ SessionStore });

src/background/storage/UserScheduleStore.ts

@@ -0,0 +1,62 @@
+import { createLocalStore, debugStore, Serialized } from 'chrome-extension-toolkit';
+import { Course } from 'src/shared/types/Course';
+/**
+ * A store that is used for storing user options
+ */
+interface IUserScheduleStore {
+    current: string;
+    schedules: {
+        [id: string]: Course[];
+    };
+}
+
+interface Actions {
+    createSchedule(name: string): Promise<void>;
+    addCourseToSchedule(name: string, course: Course): Promise<void>;
+    removeCourseFromSchedule(name: string, course: Course): Promise<void>;
+    removeSchedule(name: string): Promise<void>;
+    getSchedule(name: string): Promise<Course[] | undefined>;
+}
+
+const UserScheduleStore = createLocalStore<IUserScheduleStore, Actions>(
+    {
+        current: 'Schedule 1',
+        schedules: {},
+    },
+    store => ({
+        async createSchedule(name: string) {
+            const schedules = await store.getSchedules();
+            if (!schedules[name]) {
+                schedules[name] = [];
+                await store.setSchedules(schedules as any);
+            }
+        },
+        async removeSchedule(name: string) {
+            const schedules = await store.getSchedules();
+            delete schedules[name];
+            await store.setSchedules(schedules);
+        },
+        async getSchedule(name) {
+            const schedules = await store.getSchedules();
+            return schedules[name]?.map(course => new Course(course));
+        },
+        async addCourseToSchedule(name, course) {
+            const schedules = await store.getSchedules();
+            const scheduleToEdit = schedules[name];
+            if (scheduleToEdit) {
+                scheduleToEdit.push(course as Serialized<Course>);
+                await store.setSchedules(schedules);
+            }
+        },
+        async removeCourseFromSchedule(name, course) {
+            const schedules = await store.getSchedules();
+            const scheduleToEdit = schedules[name];
+            if (scheduleToEdit) {
+                schedules[name] = scheduleToEdit.filter(c => c.uniqueId !== course.uniqueId);
+                await store.setSchedules(schedules);
+            }
+        },
+    })
+);
+
+debugStore({ UserScheduleStore });

src/shared/types/Course.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Serialized } from 'chrome-extension-toolkit';
 import { capitalize } from '../util/string';
 import { CourseSchedule } from './CourseSchedule';

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

@@ -16,7 +16,8 @@
         select {
             z-index: $MAX_Z_INDEX;
             padding: 4px;
-            border-radius: 12px;
+            font-family: 'Inter';
+            border-radius: 8px;
             border-color: $charcoal;
         }
     }

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

@@ -14,6 +14,7 @@ import {
     queryAggregateDistribution,
     querySemesterDistribution,
 } from 'src/views/lib/database/queryDistribution';
+import { bMessenger } from 'src/shared/messages';
 import styles from './GradeDistribution.module.scss';
 
 enum DataStatus {