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

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}`;
+}