feat: calendar header formatting and data displaying (#160)

src/pages/background/lib/addCourse.ts

@@ -16,6 +16,7 @@ export default async function addCourse(scheduleName: string, course: Course): P
     }
 
     activeSchedule.courses.push(course);
+    activeSchedule.updatedAt = Date.now();
 
     await UserScheduleStore.set('schedules', schedules);
 }

src/pages/background/lib/clearCourses.ts

@@ -12,5 +12,7 @@ export default async function clearCourses(scheduleName: string): Promise<void>
         throw new Error(`Schedule ${scheduleName} does not exist`);
     }
     schedule.courses = [];
+    schedule.updatedAt = Date.now();
+
     await UserScheduleStore.set('schedules', schedules);
 }

src/pages/background/lib/createSchedule.ts

@@ -15,6 +15,7 @@ export default async function createSchedule(scheduleName: string): Promise<stri
         name: scheduleName,
         courses: [],
         hours: 0,
+        updatedAt: Date.now(),
     });
 
     await UserScheduleStore.set('schedules', schedules);

src/pages/background/lib/removeCourse.ts

@@ -12,6 +12,7 @@ export default async function removeCourse(scheduleName: string, course: Course)
     }
 
     activeSchedule.courses = activeSchedule.courses.filter(c => c.uniqueId !== course.uniqueId);
+    activeSchedule.updatedAt = Date.now();
 
     await UserScheduleStore.set('schedules', schedules);
 }

src/pages/background/lib/renameSchedule.ts

@@ -17,6 +17,7 @@ export default async function renameSchedule(scheduleName: string, newName: stri
     }
 
     schedules[scheduleIndex].name = newName;
+    schedules[scheduleIndex].updatedAt = Date.now();
 
     await UserScheduleStore.set('schedules', schedules);
     return undefined;

src/pages/background/lib/switchSchedule.ts

@@ -13,6 +13,7 @@ export default async function switchSchedule(scheduleName: string): Promise<void
     if (scheduleIndex === -1) {
         throw new Error(`Schedule ${scheduleName} does not exist`);
     }
+    schedules[scheduleIndex].updatedAt = Date.now();
 
     await UserScheduleStore.set('activeIndex', scheduleIndex);
 }

src/shared/storage/UserScheduleStore.ts

@@ -15,6 +15,7 @@ export const UserScheduleStore = createLocalStore<IUserScheduleStore>({
             courses: [],
             name: 'Schedule 1',
             hours: 0,
+            updatedAt: Date.now(),
         }),
     ],
     activeIndex: 0,

src/shared/types/UserSchedule.ts

@@ -9,6 +9,8 @@ export class UserSchedule {
     courses: Course[];
     name: string;
     hours: number;
+    /** Unix timestamp of when the schedule was last updated */
+    updatedAt: number;
 
     constructor(schedule: Serialized<UserSchedule>) {
         this.courses = schedule.courses.map(c => new Course(c));
@@ -17,6 +19,7 @@ export class UserSchedule {
         for (const course of this.courses) {
             this.hours += course.creditHours;
         }
+        this.updatedAt = schedule.updatedAt;
     }
 
     containsCourse(course: Course): boolean {

src/stories/components/calendar/CalendarSchedules.stories.tsx

@@ -65,7 +65,8 @@ const schedules = [
             }),
         ],
         name: 'Main Schedule',
-        hours: 0, // Add the missing 'hours' property
+        hours: 0,
+        updatedAt: Date.now(),
     }),
     new UserSchedule({
         courses: [
@@ -135,7 +136,8 @@ const schedules = [
             }),
         ],
         name: 'Backup #3',
-        hours: 0, // Add the missing 'hours' property
+        hours: 0,
+        updatedAt: Date.now(),
     }),
 ];
 

src/stories/injected/CourseCatalogInjectedPopup.stories.ts

@@ -47,7 +47,7 @@ export const ClosedCourse: Story = {
             ...MikeScottCS314Course,
             status: Status.CLOSED,
         } as Course,
-        activeSchedule: new UserSchedule({ courses: [], name: '', hours: 0 }),
+        activeSchedule: new UserSchedule({ courses: [], name: '', hours: 0, updatedAt: Date.now() }),
     },
 };
 

src/stories/injected/mocked.ts

@@ -57,6 +57,7 @@ export const exampleSchedule: UserSchedule = new UserSchedule({
     courses: [exampleCourse],
     name: 'Example Schedule',
     hours: 3,
+    updatedAt: Date.now(),
 });
 
 export const bevoCourse: Course = new Course({
@@ -108,6 +109,7 @@ export const bevoScheule: UserSchedule = new UserSchedule({
     courses: [bevoCourse],
     name: 'Bevo Schedule',
     hours: 3,
+    updatedAt: Date.now(),
 });
 
 export const MikeScottCS314Course: Course = new Course({
@@ -160,4 +162,5 @@ export const MikeScottCS314Schedule: UserSchedule = new UserSchedule({
     courses: [MikeScottCS314Course],
     name: 'Mike Scott CS314 Schedule',
     hours: 3,
+    updatedAt: Date.now(),
 });

src/views/components/PopupMain.tsx

@@ -6,6 +6,7 @@ import List from '@views/components/common/List/List';
 import Text from '@views/components/common/Text/Text';
 import { handleOpenCalendar } from '@views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions';
 import useSchedules, { getActiveSchedule, replaceSchedule, switchSchedule } from '@views/hooks/useSchedules';
+import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
 import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import clsx from 'clsx';
 import React, { useState } from 'react';
@@ -120,7 +121,7 @@ export default function PopupMain(): JSX.Element {
                     </div>
                     <div className='inline-flex items-center self-center gap-1'>
                         <Text variant='mini' className='text-ut-gray'>
-                            DATA UPDATED ON: 12:00 AM 02/01/2024
+                            LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                         </Text>
                         <button
                             className='h-4 w-4 bg-transparent p-0 btn'

src/views/components/calendar/CalendarHeader/CalenderHeader.tsx

@@ -5,6 +5,8 @@ import Divider from '@views/components/common/Divider/Divider';
 import { LogoIcon } from '@views/components/common/LogoIcon';
 import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
 import Text from '@views/components/common/Text/Text';
+import useSchedules from '@views/hooks/useSchedules';
+import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
 import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import React from 'react';
 
@@ -27,9 +29,11 @@ const handleOpenOptions = async (): Promise<void> => {
  * @returns The JSX element representing the calendar header.
  */
 export default function CalendarHeader(): JSX.Element {
+    const [activeSchedule] = useSchedules();
+
     return (
         <div className='min-h-79px min-w-672px w-full flex px-0 py-5'>
-            <div className='flex flex-row gap-20'>
+            <div className='flex flex-row gap-20 w-full'>
                 <div className='flex gap-10'>
                     <div className='flex gap-1'>
                         <Button className='self-center' variant='single' icon={MenuIcon} color='ut-gray' />
@@ -43,13 +47,17 @@ export default function CalendarHeader(): JSX.Element {
                     </div>
                     <Divider className='self-center' size='2.5rem' orientation='vertical' />
                     <div className='flex flex-col self-center'>
-                        <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
+                        <ScheduleTotalHoursAndCourses
+                            scheduleName={activeSchedule.name}
+                            totalHours={activeSchedule.hours}
+                            totalCourses={activeSchedule.courses.length}
+                        />
                         <Text variant='h4' className='text-xs text-gray font-medium leading-normal'>
-                            DATA UPDATED ON: 12:00 AM 02/01/2024
+                            LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                         </Text>
                     </div>
                 </div>
-                <div className='flex flex-row items-center justify-end space-x-8'>
+                <div className='flex flex-row items-center justify-end space-x-8 ml-auto'>
                     <div className='flex flex-row space-x-4'>
                         <CourseStatus size='small' status={Status.WAITLISTED} />
                         <CourseStatus size='small' status={Status.CLOSED} />

src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx

@@ -26,9 +26,9 @@ export default function ScheduleTotalHoursAndCourses({
                 {`${scheduleName}: `}
             </Text>
             <Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-theme-black'>
-                {totalHours} HOURS
+                {totalHours} {totalHours === 1 ? 'HOUR' : 'HOURS'}
                 <Text variant='h4' as='span' className='text-ut-black'>
-                    {totalCourses} courses
+                    {totalCourses} {totalCourses === 1 ? 'COURSE' : 'COURSES'}
                 </Text>
             </Text>
         </div>

src/views/hooks/useFlattenedCourseSchedule.ts

@@ -61,6 +61,7 @@ export function useFlattenedCourseSchedule(): FlattenedCourseSchedule {
                 courses: [],
                 name: 'Something may have went wrong',
                 hours: 0,
+                updatedAt: Date.now(),
             }),
         } satisfies FlattenedCourseSchedule;
     }

src/views/lib/getUpdatedAtDateTimeString.ts

@@ -0,0 +1,21 @@
+/**
+ *
+ * @param updatedAt {number} - The time in milliseconds since the epoch when the schedule was last updated.
+ * @returns {string} - DateTime formatted as HH:MM AM/PM MM/DD/YYYY
+ */
+export function getUpdatedAtDateTimeString(updatedAt: number): string {
+    const updatedAtDate = new Date(updatedAt);
+
+    const timeFormat = new Intl.DateTimeFormat('en-US', {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    }).format(updatedAtDate);
+    const dateFormat = new Intl.DateTimeFormat('en-US', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    }).format(updatedAtDate);
+
+    return `${timeFormat} ${dateFormat}`;
+}