feat: update badge count when schedule changes (#150)

* feat: update badge count when schedule changes

* fix: fixed linting issues

src/pages/background/background.ts

@@ -1,4 +1,6 @@
 import type { BACKGROUND_MESSAGES } from '@shared/messages';
+import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+import updateBadgeText from '@shared/util/updateBadgeText';
 import { MessageListener } from 'chrome-extension-toolkit';
 
 import onInstall from './events/onInstall';
@@ -37,3 +39,19 @@ const messageListener = new MessageListener<BACKGROUND_MESSAGES>({
 });
 
 messageListener.listen();
+
+UserScheduleStore.listen('schedules', async schedules => {
+    const index = await UserScheduleStore.get('activeIndex');
+    const numCourses = schedules[index]?.courses?.length;
+    if (!numCourses) return;
+
+    updateBadgeText(numCourses);
+});
+
+UserScheduleStore.listen('activeIndex', async ({ newValue }) => {
+    const schedules = await UserScheduleStore.get('schedules');
+    const numCourses = schedules[newValue]?.courses?.length;
+    if (!numCourses) return;
+
+    updateBadgeText(numCourses);
+});

src/shared/util/updateBadgeText.ts

@@ -0,0 +1,34 @@
+import { colors } from './themeColors';
+import { MILLISECOND } from './time';
+
+/** How long should we flash the badge when it changes value */
+export const POPUP_FLASH_TIME = 200 * MILLISECOND;
+
+/** The maximum number to show in the badge, after which we show a '+' */
+export const BADGE_LIMIT = 10;
+
+/**
+ * Updates the badge text based on the given value.
+ * If the value is greater than the badge limit, it sets the badge text to the badge limit followed by a '+'.
+ * @param value - The value to be displayed in the badge.
+ */
+export default function updateBadgeText(value: number): void {
+    let badgeText = '';
+    if (value > 0) {
+        if (value > BADGE_LIMIT) {
+            badgeText = `${BADGE_LIMIT}+`;
+        } else {
+            badgeText = `${value}`;
+        }
+    }
+    chrome.action.setBadgeText({ text: badgeText });
+    flashBadgeColor();
+}
+
+/**
+ * Flashes the badge color by setting the badge background color to a color and then resetting it after a short delay.
+ */
+function flashBadgeColor() {
+    chrome.action.setBadgeBackgroundColor({ color: colors.ut.burntorange });
+    setTimeout(() => chrome.action.setBadgeBackgroundColor({ color: colors.ut.orange }), POPUP_FLASH_TIME);
+}

src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx

@@ -1,5 +1,4 @@
-import createSchedule from '@pages/background/lib/createSchedule';
-import switchSchedule from '@pages/background/lib/switchSchedule';
+import { background } from '@shared/messages';
 import type { UserSchedule } from '@shared/types/UserSchedule';
 import List from '@views/components/common/List/List';
 import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
@@ -38,8 +37,9 @@ export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: P
 
     const handleKeyDown = event => {
         if (event.code === 'Enter') {
-            createSchedule(newSchedule);
-            setNewSchedule('');
+            background.createSchedule({ scheduleName: newSchedule }).then(() => {
+                setNewSchedule('');
+            });
         }
     };
 
@@ -48,8 +48,9 @@ export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: P
     };
 
     const selectItem = (index: number) => {
-        setActiveScheduleIndex(index);
-        switchSchedule(schedules[index].name);
+        background.switchSchedule({ scheduleName: schedules[index].name }).then(() => {
+            setActiveScheduleIndex(index);
+        });
     };
 
     const scheduleComponents = schedules.map((schedule, index) => (

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

@@ -87,14 +87,14 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
     return ReactDOM.createPortal(
         <div className='relative'>
             <button
-                className='bg-ut-burntorange w-6 h-6 items-center justify-center color-white! flex m1 rounded'
+                className='m1 h-6 w-6 flex items-center justify-center rounded bg-ut-burntorange color-white!'
                 onClick={onClick}
             >
                 <RowIcon color='ut-white' />
             </button>
             {conflicts.length > 0 && (
                 <ConflictsWithWarning
-                    className='group-hover:visible invisible text-white absolute left-13 top--3'
+                    className='invisible absolute left-13 top--3 text-white group-hover:visible'
                     conflicts={conflicts}
                 />
             )}