diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx index ac8544b68..cb68081d0 100644 --- a/src/stories/components/CalendarCourseCell.stories.tsx +++ b/src/stories/components/CalendarCourseCell.stories.tsx @@ -56,7 +56,7 @@ export const Default: Story = { schedule: new CourseSchedule({ meetings: [ new CourseMeeting({ - days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI], + days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F], startTime: 480, endTime: 570, location: { diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx index 5aa8f505b..1afb1b608 100644 --- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx +++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx @@ -6,7 +6,7 @@ import WaitlistIcon from '~icons/material-symbols/timelapse'; import CancelledIcon from '~icons/material-symbols/warning'; import Text from '../Text/Text'; -export interface CalendarCourseBlockProps { +export interface CalendarCourseCellProps { /** The Course that the meeting is for. */ course: Course; /* index into course meeting array to display */ @@ -15,7 +15,7 @@ export interface CalendarCourseBlockProps { color: string; } -const CalendarCourseBlock: React.FC = ({ course, meetingIdx }: CalendarCourseBlockProps) => { +const CalendarCourseCell: React.FC = ({ course, meetingIdx }: CalendarCourseCellProps) => { let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null; let rightIcon: React.ReactNode | null = null; if (status === Status.WAITLISTED) { @@ -60,4 +60,4 @@ const CalendarCourseBlock: React.FC = ({ course, meeti ); }; -export default CalendarCourseBlock; +export default CalendarCourseCell; diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 3d83ef9a1..4dbd06c9b 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { DAY_MAP } from 'src/shared/types/CourseMeeting'; import styles from './CalendarGrid.module.scss'; import CalendarCell from '../CalendarGridCell/CalendarGridCell'; -import { CourseMeeting } from 'src/shared/types/CourseMeeting'; +import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell'; +import { Chip } from '../Chip/Chip'; + const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key)); const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8); @@ -22,14 +24,14 @@ for (let i = 0; i < 13; i++) { } interface Props { - CourseMeetingBlocks: CourseMeeting[]; + courseCells: typeof CalendarCourseCell[]; } /** * Grid of CalendarGridCell components forming the user's course schedule calendar view * @param props */ -export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren): JSX.Element { +export function Calendar({ courseCells }: React.PropsWithChildren): JSX.Element { return (
@@ -54,12 +56,16 @@ export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren {day}
))} - {grid.map((row, rowIndex) => row)} + {grid.map((row) => row)} - {courseMeetingBlocks.map((block: CourseMeeting, index: number) => ( -
- {block} + {courseCells.map((Block: typeof CalendarCourseCell) => ( +
+
))}