feat: show async courses in the bottom bar (#204)

* feat: show async courses in the bottom bar * fix: hide "Async/Other" header when there are no async courses, off-by-n error (where n is the number async courses) * refactor: move types closer to map instead of weird "as boolean" * refactor: move satisfies to return type
2024-03-29 00:01:23 -05:00
parent d3f64ec79e
commit 227de53e84
6 changed files with 84 additions and 62 deletions
--- a/src/stories/components/calendar/CalendarBottomBar.stories.tsx
+++ b/src/stories/components/calendar/CalendarBottomBar.stories.tsx
@@ -84,18 +84,29 @@ type Story = StoryObj<typeof meta>;

 export const Default: Story = {
    args: {
-        courses: [
+        courseCells: [
            {
-                colors: getCourseColors('pink', 200),
-                courseDeptAndInstr: `${exampleGovCourse.department} ${exampleGovCourse.number} – ${exampleGovCourse.instructors[0]!.lastName}`,
-                status: exampleGovCourse.status,
+                async: true,
+                calendarGridPoint: { dayIndex: -1, endIndex: -1, startIndex: -1 },
+                componentProps: {
+                    colors: getCourseColors('pink', 200),
+                    courseDeptAndInstr: `${exampleGovCourse.department} ${exampleGovCourse.number} – ${exampleGovCourse.instructors[0]!.lastName}`,
+                    status: exampleGovCourse.status,
+                },
+                course: exampleGovCourse,
            },
            {
-                colors: getCourseColors('slate', 500),
-                courseDeptAndInstr: `${examplePsyCourse.department} ${examplePsyCourse.number} – ${examplePsyCourse.instructors[0]!.lastName}`,
-                status: examplePsyCourse.status,
+                async: true,
+                calendarGridPoint: { dayIndex: -1, endIndex: -1, startIndex: -1 },
+                componentProps: {
+                    colors: getCourseColors('slate', 500),
+                    courseDeptAndInstr: `${examplePsyCourse.department} ${examplePsyCourse.number} – ${examplePsyCourse.instructors[0]!.lastName}`,
+                    status: examplePsyCourse.status,
+                },
+                course: examplePsyCourse,
            },
        ],
+        setCourse: () => {},
    },
    render: props => (
        <div className='outline-red outline w-292.5!'>
@@ -105,7 +116,7 @@ export const Default: Story = {
 };
 export const Empty: Story = {
    args: {
-        courses: [],
+        courseCells: [],
    },
    render: props => (
        <div className='outline-red outline w-292.5!'>
--- a/src/stories/components/calendar/CalendarGrid.stories.tsx
+++ b/src/stories/components/calendar/CalendarGrid.stories.tsx
@@ -35,6 +35,7 @@ const testData: CalendarGridCourse[] = [
            colors: getCourseColors('emerald', 500),
        },
        course: ExampleCourse,
+        async: false,
    },
    {
        calendarGridPoint: {
@@ -49,6 +50,7 @@ const testData: CalendarGridCourse[] = [
            colors: getCourseColors('emerald', 500),
        },
        course: ExampleCourse,
+        async: false,
    },
    {
        calendarGridPoint: {
@@ -63,6 +65,7 @@ const testData: CalendarGridCourse[] = [
            colors: getCourseColors('emerald', 500),
        },
        course: ExampleCourse,
+        async: false,
    },
    {
        calendarGridPoint: {
@@ -77,6 +80,7 @@ const testData: CalendarGridCourse[] = [
            colors: getCourseColors('emerald', 500),
        },
        course: ExampleCourse,
+        async: false,
    },
    {
        calendarGridPoint: {
@@ -91,6 +95,7 @@ const testData: CalendarGridCourse[] = [
            colors: getCourseColors('emerald', 500),
        },
        course: ExampleCourse,
+        async: false,
    },
    {
        calendarGridPoint: {
@@ -105,6 +110,7 @@ const testData: CalendarGridCourse[] = [
            colors: getCourseColors('emerald', 500),
        },
        course: ExampleCourse,
+        async: false,
    },
    {
        calendarGridPoint: {
@@ -119,6 +125,7 @@ const testData: CalendarGridCourse[] = [
            colors: getCourseColors('emerald', 500),
        },
        course: ExampleCourse,
+        async: false,
    },
 ];

--- a/src/views/components/calendar/Calendar.tsx
+++ b/src/views/components/calendar/Calendar.tsx
@@ -87,7 +87,7 @@ export default function Calendar(): JSX.Element {
                    <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
                        <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
                    </div>
-                    <CalendarBottomBar />
+                    <CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />
                </div>
            </div>

--- a/src/views/components/calendar/CalendarBottomBar.tsx
+++ b/src/views/components/calendar/CalendarBottomBar.tsx
@@ -1,18 +1,20 @@
+import type { Course } from '@shared/types/Course';
 import { saveAsCal, saveCalAsPng } from '@views/components/calendar/utils';
 import { Button } from '@views/components/common/Button';
 import Divider from '@views/components/common/Divider';
 import Text from '@views/components/common/Text/Text';
+import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
 import clsx from 'clsx';
 import React from 'react';

 import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
 import ImageIcon from '~icons/material-symbols/image';

-import type { CalendarCourseCellProps } from './CalendarCourseCell';
 import CalendarCourseBlock from './CalendarCourseCell';

 type CalendarBottomBarProps = {
-    courses?: CalendarCourseCellProps[];
+    courseCells?: CalendarGridCourse[];
+    setCourse: React.Dispatch<React.SetStateAction<Course | null>>;
 };

 /**
@@ -21,8 +23,9 @@ type CalendarBottomBarProps = {
 * @param {Object[]} courses - The list of courses to display in the calendar.
 * @returns {JSX.Element} The rendered bottom bar component.
 */
-export default function CalendarBottomBar({ courses }: CalendarBottomBarProps): JSX.Element {
-    const displayCourses = courses && courses.length > 0;
+export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBottomBarProps): JSX.Element {
+    const asyncCourseCells = courseCells?.filter(block => block.async);
+    const displayCourses = asyncCourseCells && asyncCourseCells.length > 0;

    return (
        <div className='w-full flex py-1.25 pl-7.5 pr-6.25'>
@@ -35,15 +38,19 @@ export default function CalendarBottomBar({ courses }: CalendarBottomBarProps):
                    <>
                        <Text variant='h4'>Async/Other:</Text>
                        <div className='inline-flex gap-2.5'>
-                            {courses.map(({ courseDeptAndInstr, status, colors, className }) => (
-                                <CalendarCourseBlock
-                                    courseDeptAndInstr={courseDeptAndInstr}
-                                    status={status}
-                                    colors={colors}
-                                    key={courseDeptAndInstr}
-                                    className={clsx(className, 'w-35! h-15!')}
-                                />
-                            ))}
+                            {asyncCourseCells.map(block => {
+                                const { courseDeptAndInstr, status, colors, className } = block.componentProps;
+                                return (
+                                    <CalendarCourseBlock
+                                        courseDeptAndInstr={courseDeptAndInstr}
+                                        status={status}
+                                        colors={colors}
+                                        key={courseDeptAndInstr}
+                                        className={clsx(className, 'w-35! h-15!')}
+                                        onClick={() => setCourse(block.course)}
+                                    />
+                                );
+                            })}
                        </div>
                    </>
                )}
--- a/src/views/components/calendar/CalendarGrid.tsx
+++ b/src/views/components/calendar/CalendarGrid.tsx
@@ -123,28 +123,30 @@ function AccountForCourseConflicts({ courseCells, setCourse }: AccountForCourseC
        });
    });

-    return courseCells.map((block, i) => {
-        const { courseDeptAndInstr, timeAndLocation, status } = courseCells[i]!.componentProps;
+    return courseCells
+        .filter(block => !block.async)
+        .map(block => {
+            const { courseDeptAndInstr, timeAndLocation, status } = block.componentProps;

-        return (
-            <div
-                key={`${JSON.stringify(block)}`}
-                style={{
-                    gridColumn: `${block.calendarGridPoint.dayIndex + 3}`,
-                    gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
-                    width: `calc(100% / ${block.totalColumns ?? 1})`,
-                    marginLeft: `calc(100% * ${((block.gridColumnStart ?? 0) - 1) / (block.totalColumns ?? 1)})`,
-                }}
-                className='pb-1 pl-0 pr-2.5 pt-0 screenshot:pb-0.5 screenshot:pr-0.5'
-            >
-                <CalendarCourseCell
-                    courseDeptAndInstr={courseDeptAndInstr}
-                    timeAndLocation={timeAndLocation}
-                    status={status}
-                    colors={block.course.colors}
-                    onClick={() => setCourse(block.course)}
-                />
-            </div>
-        );
-    });
+            return (
+                <div
+                    key={`${JSON.stringify(block)}`}
+                    style={{
+                        gridColumn: `${block.calendarGridPoint.dayIndex + 3}`,
+                        gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
+                        width: `calc(100% / ${block.totalColumns ?? 1})`,
+                        marginLeft: `calc(100% * ${((block.gridColumnStart ?? 0) - 1) / (block.totalColumns ?? 1)})`,
+                    }}
+                    className='pb-1 pl-0 pr-2.5 pt-0 screenshot:pb-0.5 screenshot:pr-0.5'
+                >
+                    <CalendarCourseCell
+                        courseDeptAndInstr={courseDeptAndInstr}
+                        timeAndLocation={timeAndLocation}
+                        status={status}
+                        colors={block.course.colors}
+                        onClick={() => setCourse(block.course)}
+                    />
+                </div>
+            );
+        });
 }
--- a/src/views/hooks/useFlattenedCourseSchedule.ts
+++ b/src/views/hooks/useFlattenedCourseSchedule.ts
@@ -1,7 +1,5 @@
-import type { HexColor } from '@shared/types/Color';
 import type { Course, StatusType } from '@shared/types/Course';
 import type { CourseMeeting } from '@shared/types/CourseMeeting';
-import { colors } from '@shared/types/ThemeColors';
 import type { UserSchedule } from '@shared/types/UserSchedule';
 import type { CalendarCourseCellProps } from '@views/components/calendar/CalendarCourseCell';

@@ -34,6 +32,7 @@ export interface CalendarGridCourse {
    calendarGridPoint: CalendarGridPoint;
    componentProps: CalendarCourseCellProps;
    course: Course;
+    async: boolean;
    gridColumnStart?: number;
    gridColumnEnd?: number;
    totalColumns?: number;
@@ -103,25 +102,23 @@ function processAsyncCourses({
    courseDeptAndInstr: string;
    status: StatusType;
    course: Course;
-}) {
+}): CalendarGridCourse[] {
    return [
        {
            calendarGridPoint: {
-                dayIndex: 0,
-                startIndex: 0,
-                endIndex: 0,
+                dayIndex: -1,
+                startIndex: -1,
+                endIndex: -1,
            },
            componentProps: {
                courseDeptAndInstr,
                status,
-                colors: {
-                    primaryColor: colors.ut.gray as HexColor,
-                    secondaryColor: colors.ut.gray as HexColor,
-                },
+                colors: course.colors,
            },
            course,
+            async: true,
        },
-    ] satisfies CalendarGridCourse[];
+    ];
 }

 /**
@@ -132,7 +129,7 @@ function processInPersonMeetings(
    courseDeptAndInstr: string,
    status: StatusType,
    course: Course
-) {
+): CalendarGridCourse[] {
    const { days, startTime, endTime, location } = meeting;
    const midnightIndex = 1440;
    const normalizingTimeFactor = 720;
@@ -151,13 +148,11 @@ function processInPersonMeetings(
            courseDeptAndInstr,
            timeAndLocation,
            status,
-            colors: {
-                primaryColor: colors.ut.orange as HexColor,
-                secondaryColor: colors.ut.orange as HexColor,
-            },
+            colors: course.colors,
        },
        course,
-    })) satisfies CalendarGridCourse[];
+        async: false,
+    }));
 }

 /**