useFlattenedHook working

src/shared/types/CourseMeeting.ts

@@ -128,7 +128,7 @@ export class CourseMeeting {
 /**
  * Options to control the format of the time string
  */
-type TimeStringOptions = {
+export type TimeStringOptions = {
     /** the separator between the start and end times */
     separator: string;
     /** capitalizes the AM/PM */

src/stories/components/calendar/CalendarGrid.stories.tsx

@@ -1,6 +1,3 @@
-<<<<<<< Updated upstream
-import { Meta, StoryObj } from '@storybook/react';
-=======
 import { Course, Status } from '@shared/types/Course';
 import { getCourseColors } from '@shared/util/colors';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -10,11 +7,8 @@ import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
 import { CourseSchedule } from 'src/shared/types/CourseSchedule';
 import Instructor from 'src/shared/types/Instructor';
 import { UserSchedule } from 'src/shared/types/UserSchedule';
->>>>>>> Stashed changes
 import CalendarGrid from 'src/views/components/calendar/CalendarGrid/CalendarGrid';
-import { getCourseColors } from '@shared/util/colors';
-import { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
-import { Status } from '@shared/types/Course';
+
 
 const meta = {
     title: 'Components/Calendar/CalendarGrid',
@@ -29,9 +23,6 @@ const meta = {
 } satisfies Meta<typeof CalendarGrid>;
 export default meta;
 
-<<<<<<< Updated upstream
-const testData: CalendarGridCourse[] = [
-=======
 const exampleCourse: Course = new Course({
     uniqueId: 50805,
     number: '314',
@@ -84,7 +75,6 @@ const exampleSchedule = new UserSchedule({
 } as Serialized<UserSchedule>);
 
 export const exampleCalendarGridCourses: CalendarGridCourse[] = [
->>>>>>> Stashed changes
     {
         calendarGridPoint: {
             dayIndex: 4,

src/views/components/PopupMain.tsx

@@ -3,14 +3,6 @@ import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo f
 import { StatusIcon } from '@shared/util/icons';
 import { Status } from 'src/shared/types/Course';
 import { test_colors } from 'src/stories/components/PopupCourseBlock.stories';
-<<<<<<< Updated upstream
-=======
-
-import logoImage from '../../assets/logo.png'; // Adjust the path as necessary
-import useSchedules from '../hooks/useSchedules';
-import { openTabFromContentScript } from '../lib/openNewTabFromContentScript';
-import Divider from './common/Divider/Divider';
->>>>>>> Stashed changes
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
 import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
 import Text from './common/Text/Text';

src/views/components/calendar/Calendar/Calendar.tsx

@@ -3,7 +3,6 @@ import { Course } from 'src/shared/types/Course';
 import { exampleCourse } from 'src/stories/components/PopupCourseBlock.stories';
 import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
 import { useFlattenedCourseSchedule } from 'src/views/hooks/useFlattenedCourseSchedule';
-
 import CourseCatalogInjectedPopup from '../../injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
 import { CalendarBottomBar } from '../CalendarBottomBar/CalendarBottomBar';
 import CalendarGrid from '../CalendarGrid/CalendarGrid';
@@ -23,6 +22,7 @@ interface Props {
 export function Calendar(): JSX.Element {
     const courseCells = useFlattenedCourseSchedule();
     const [showPopup, setShowPopup] = React.useState<boolean>(false);
+    console.log(courseCells);
     return (
         <>
             <CalendarHeader />

src/views/components/calendar/CalendarGrid/CalendarGrid.tsx

@@ -5,6 +5,7 @@ import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
 /*  import calIcon from 'src/assets/icons/cal.svg';
 import pngIcon from 'src/assets/icons/png.svg';
 */
+import { getCourseColors } from 'src/shared/util/colors';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
 import styles from './CalendarGrid.module.scss';
@@ -20,12 +21,12 @@ interface Props {
  * @param props
  */
 function CalendarGrid({ courseCells, saturdayClass, setShowPopup }: React.PropsWithChildren<Props>): JSX.Element {
-    const [grid, setGrid] = useState([]);
+    //  const [grid, setGrid] = useState([]);
     const calendarRef = useRef(null); // Create a ref for the calendar grid
 
     const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
     const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-
+    console.log(courseCells);
     /*  const saveAsPNG = () => {
         htmlToImage
             .toPng(calendarRef.current, {
@@ -59,33 +60,33 @@ function CalendarGrid({ courseCells, saturdayClass, setShowPopup }: React.PropsW
             });
     };  */
 
-    useEffect(() => {
-        const newGrid = [];
-        for (let i = 0; i < 13; i++) {
-            const row = [];
-            let hour = hoursOfDay[i];
-            let styleProp = {
-                gridColumn: '1',
-                gridRow: `${2 * i + 2}`,
-            };
-            row.push(
-                <div key={hour} className={styles.timeBlock} style={styleProp}>
-                    <div className={styles.timeLabelContainer}>
-                        <p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
-                    </div>
+
+    const grid = [];
+    for (let i = 0; i < 13; i++) {
+        const row = [];
+        let hour = hoursOfDay[i];
+        let styleProp = {
+            gridColumn: '1',
+            gridRow: `${2 * i + 2}`,
+        };
+        row.push(
+            <div key={hour} className={styles.timeBlock} style={styleProp}>
+                <div className={styles.timeLabelContainer}>
+                    <p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
                 </div>
-            );
-            for (let k = 0; k < 5; k++) {
-                styleProp = {
-                    gridColumn: `${k + 2}`,
-                    gridRow: `${2 * i + 2} / ${2 * i + 4}`,
-                };
-                row.push(<CalendarCell key={k} styleProp={styleProp} />);
-            }
-            newGrid.push(row);
+            </div>
+        );
+        for (let k = 0; k < 5; k++) {
+            styleProp = {
+                gridColumn: `${k + 2}`,
+                gridRow: `${2 * i + 2} / ${2 * i + 4}`,
+            };
+            row.push(<CalendarCell key={k} styleProp={styleProp} />);
         }
-        setGrid(newGrid);
-    }, []);
+        grid.push(row);
+    }
+    //  setGrid(newGrid);
+
 
     return (
         <div className={styles.calendarGrid}>
@@ -154,8 +155,8 @@ function AccountForCourseConflicts({ courseCells, setShowPopup }: AccountForCour
         <div
             key={`${block}`}
             style={{
-                gridColumn: `${block.calendarGridPoint.dayIndex + 1}`,
-                gridRow: `${block.calendarGridPoint.startIndex + 1} / ${block.calendarGridPoint.endIndex + 1}`,
+                gridColumn: `${block.calendarGridPoint.dayIndex + 2}`,
+                gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
                 width: `calc(100% / ${block.totalColumns})`,
                 marginLeft: `calc(100% * ${(block.gridColumnStart - 1) / block.totalColumns})`,
                 padding: '0px 10px 4px 0px',
@@ -165,7 +166,7 @@ function AccountForCourseConflicts({ courseCells, setShowPopup }: AccountForCour
                 courseDeptAndInstr={block.componentProps.courseDeptAndInstr}
                 timeAndLocation={block.componentProps.timeAndLocation}
                 status={block.componentProps.status}
-                colors={block.componentProps.colors}
+                colors={getCourseColors('emerald', 500) /*  block.componentProps.colors */}
                 onClick={() => setShowPopup(true)}
             />
         </div>

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

@@ -1,26 +1,17 @@
 import { Status } from '@shared/types/Course';
 import React from 'react';
 import calIcon from 'src/assets/logo.png';
-
 import MenuIcon from '~icons/material-symbols/menu';
-<<<<<<< Updated upstream
 import LogoIcon from '~icons/material-symbols/add-circle-outline';
 import UndoIcon from '~icons/material-symbols/undo';
-=======
->>>>>>> Stashed changes
 import RedoIcon from '~icons/material-symbols/redo';
 import SettingsIcon from '~icons/material-symbols/settings';
-import UndoIcon from '~icons/material-symbols/undo';
-
 import { Button } from '../../common/Button/Button';
 import CourseStatus from '../../common/CourseStatus/CourseStatus';
-<<<<<<< Updated upstream
-import { handleOpenOptions } from '../../PopupMain';
-=======
 import Divider from '../../common/Divider/Divider';
 import ScheduleTotalHoursAndCourses from '../../common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
 import Text from '../../common/Text/Text';
->>>>>>> Stashed changes
+import { handleOpenOptions } from '../../PopupMain';
 
 const CalendarHeader = () => (
     <div className='min-h-79px min-w-672px flex px-0 py-15'>
@@ -29,15 +20,9 @@ const CalendarHeader = () => (
                 <div className='flex gap-1'>
                     <Button variant='single' icon={MenuIcon} color='ut-gray' />
                     <div className='flex items-center'>
-<<<<<<< Updated upstream
-                        <LogoIcon style={{ marginRight: '5px' }} />
-                        <div className='flex flex-col gap-1 whitespace-nowrap'>
-                            <Text className='leading-trim text-cap font-roboto text-base text-ut-burntorange font-medium'>
-=======
                         <img src={calIcon} className='max-w-[48px] min-w-[48px]' alt='UT Registration Plus Logo' />
                         <div className='flex flex-col whitespace-nowrap'>
                             <Text className='leading-trim font-roboto text-cap text-base text-ut-burntorange font-medium'>
->>>>>>> Stashed changes
                                 UT Registration
                             </Text>
                             <Text className='leading-trim text-cap font-roboto text-base text-ut-orange font-medium'>

src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx

@@ -1,13 +1,7 @@
 import Popup from '@views/components/common/Popup/Popup';
 import React from 'react';
-<<<<<<< Updated upstream
 import { Course } from 'src/shared/types/Course';
 import { UserSchedule } from 'src/shared/types/UserSchedule';
-=======
-import type { Course } from 'src/shared/types/Course';
-import type { UserSchedule } from 'src/shared/types/UserSchedule';
-
->>>>>>> Stashed changes
 import Description from './Description';
 import GradeDistribution from './GradeDistribution';
 import HeadingAndActions from './HeadingAndActions';

src/views/hooks/useFlattenedCourseSchedule.ts

@@ -1,7 +1,9 @@
 import type { CalendarCourseCellProps } from 'src/views/components/calendar/CalendarCourseCell/CalendarCourseCell';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import { CourseMeeting, TimeStringOptions } from 'src/shared/types/CourseMeeting';
+import type { Status } from 'src/shared/types/Course';
 import useSchedules from './useSchedules';
 
+
 const dayToNumber: { [day: string]: number } = {
     Monday: 0,
     Tuesday: 1,
@@ -27,7 +29,7 @@ export interface CalendarGridCourse {
     totalColumns?: number;
 }
 
-const convertMinutesToIndex = (minutes: number): number => Math.floor(minutes - 420 / 30);
+const convertMinutesToIndex = (minutes: number): number => Math.floor((minutes - 420) / 30);
 
 /**
  * Get the active schedule, and convert it to be render-able into a calendar.
@@ -47,7 +49,12 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
                 department,
                 instructors,
                 schedule: { meetings },
-            } = course;
+            } = course as {
+                status: Status; // Change the type of 'status' to 'Status'
+                department: string;
+                instructors: { lastName: string }[];
+                schedule: { meetings: CourseMeeting[] };
+            };
             const courseDeptAndInstr = `${department} ${instructors[0].lastName}`;
 
             if (meetings.length === 0) {
@@ -73,11 +80,11 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
             }
 
             // in-person
-            return meetings.flatMap(meeting => {
+            return meetings.flatMap((meeting) => {
                 const { days, startTime, endTime, location } = meeting;
-                const time = meeting.getTimeString({ separator: '-', capitalize: true });
+                const time = getTimeString({ separator: '-', capitalize: true }, startTime, endTime);
                 const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
-
+            
                 return days.map(d => ({
                     calendarGridPoint: {
                         dayIndex: dayToNumber[d],
@@ -106,4 +113,42 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
             }
             return a.calendarGridPoint.endIndex - b.calendarGridPoint.endIndex;
         });
+}
+
+function getTimeString(options: TimeStringOptions, startTime: number, endTime: number): string {
+    const startHour = Math.floor(startTime / 60);
+    const startMinute = startTime % 60;
+    const endHour = Math.floor(endTime / 60);
+    const endMinute = endTime % 60;
+
+    let startTimeString = '';
+    let endTimeString = '';
+
+    if (startHour === 0) {
+        startTimeString = '12';
+    } else if (startHour > 12) {
+        startTimeString = `${startHour - 12}`;
+    } else {
+        startTimeString = `${startHour}`;
+    }
+
+    startTimeString += startMinute === 0 ? ':00' : `:${startMinute}`;
+    startTimeString += startHour >= 12 ? 'pm' : 'am';
+
+    if (endHour === 0) {
+        endTimeString = '12';
+    } else if (endHour > 12) {
+        endTimeString = `${endHour - 12}`;
+    } else {
+        endTimeString = `${endHour}`;
+    }
+    endTimeString += endMinute === 0 ? ':00' : `:${endMinute}`;
+    endTimeString += endHour >= 12 ? 'pm' : 'am';
+
+    if (options.capitalize) {
+        startTimeString = startTimeString.toUpperCase();
+        endTimeString = endTimeString.toUpperCase();
+    }
+
+    return `${startTimeString} ${options.separator} ${endTimeString}`;
 }