fix: fixed bug with course cells after 12 PM extending past midnight (#122)

* Temporarily uninstalling husky cause github desktop has issues with it * Cleaned up some code. Removed unnecessary state value on injected popup * Should've fixed popup alignment issue. Still need to integrate course schedule with calendar. Still debugging. * Updated CalendarGridStories * Fix: change to ExampleCourse from exampleCourse * setCourse and calendar header need work * Update as part of merge * Fix: fixed build errors * Fix: Added Todo * Chore: Cleaned up useFlattenedCourseSchedule hook * fix: List now keeps track of state when existing items are switched, while adding new items to the end * Added back husky * Update src/views/components/calendar/Calendar/Calendar.tsx Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> * refactor: added type-safety, destructuring, etc. ready for re-review * refactor: got rid of ts-ignore in openNewTabFromContentScript * Update src/views/components/calendar/CalendarHeader/CalenderHeader.tsx Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> * refactor: using path aliasing Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> * refactor: using path aliasing Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> * refactor: using satisfies instead of as Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> * refactor: using satisfies instead of as Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> * style: reformatted spacing * style: eslint import order * refactor: added new constructor for UserSchedule to avoid passing down null values to child props * fix: fixed bug with course cell times starting and after 12 PM. commented in CourseMeeting class * Update src/views/hooks/useFlattenedCourseSchedule.ts * fix: fixed build errors by removing old apis * refactor: added type-safety and destructuring --------- Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
2024-03-03 15:30:18 -06:00
parent 5abb2a4d4f
commit f22a3cd7c0
10 changed files with 11003 additions and 344 deletions
--- a/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
@@ -22,8 +22,6 @@ interface Props {
 * Grid of CalendarGridCell components forming the user's course schedule calendar view
 * @param props
 */
-// function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props>): JSX.Element {
-//     const [grid, setGrid] = useState([]);
 function CalendarGrid({ courseCells, saturdayClass, setCourse }: React.PropsWithChildren<Props>): JSX.Element {
    //  const [grid, setGrid] = useState([]);
    const calendarRef = useRef(null); // Create a ref for the calendar grid
@@ -152,29 +150,33 @@ function AccountForCourseConflicts({ courseCells, setCourse }: AccountForCourseC
    });

    //  Part of TODO: block.course is definitely a course object
-    console.log(courseCells);
+    //  console.log(courseCells);
+    
+    return courseCells.map((block, i) => {
+        const { courseDeptAndInstr, timeAndLocation, status, colors } = courseCells[i].componentProps;

-    return courseCells.map(block => (
-        <div
-            key={`${block}`}
-            style={{
-                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',
-            }}
-        >
-            <CalendarCourseCell
-                courseDeptAndInstr={block.componentProps.courseDeptAndInstr}
-                timeAndLocation={block.componentProps.timeAndLocation}
-                status={block.componentProps.status}
-                //  TODO: Change to block.componentProps.colors when colors are integrated to the rest of the project
-                colors={getCourseColors('emerald', 500) /*  block.componentProps.colors */}
-                onClick={() => setCourse(block.course)}
-            />
-        </div>
-    ));
+        return (
+            <div
+                key={`${block}`}
+                style={{
+                    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',
+                }}
+            >
+                <CalendarCourseCell
+                    courseDeptAndInstr={courseDeptAndInstr}
+                    timeAndLocation={timeAndLocation}
+                    status={status}
+                    //  TODO: Change to block.componentProps.colors when colors are integrated to the rest of the project
+                    colors={getCourseColors('emerald', 500) /*  block.componentProps.colors */}
+                    onClick={() => setCourse(block.course)}
+                />
+            </div>
+        )
+    });
 }

 /* <div className={styles.buttonContainer}>
--- a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
@@ -18,8 +18,8 @@ const handleOpenOptions = async () => {
    await openTabFromContentScript(url);
 };

-const CalendarHeader = ({ totalHours, totalCourses, scheduleName }) => (
-    <div className='min-h-79px min-w-672px w-full flex px-0'>
+const CalendarHeader = ( { totalHours, totalCourses, scheduleName } ) => (
+    <div className='min-h-79px min-w-672px w-full flex px-0 py-15'>
        <div className='flex flex-row gap-20'>
            <div className='flex gap-10'>
                <div className='flex gap-1'>
@@ -49,7 +49,7 @@ const CalendarHeader = ({ totalHours, totalCourses, scheduleName }) => (
                <div className='flex flex-row'>
                    <Button variant='single' icon={UndoIcon} color='ut-black' />
                    <Button variant='single' icon={RedoIcon} color='ut-black' />
-                    <Button variant='single' icon={SettingsIcon} color='ut-black' onClick={handleOpenOptions} />
+                    <Button variant='single' icon={SettingsIcon} color='ut-black' onClick={handleOpenOptions}/>
                </div>
            </div>
        </div>
--- a/src/views/components/common/List/List.tsx
+++ b/src/views/components/common/List/List.tsx
@@ -93,7 +93,6 @@ const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight,
            return [...prevItems, ...newItems];
        });
    }, [draggableElements]);
-
    const onDragEnd = useCallback(
        result => {
            if (!result.destination) {
--- a/src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx
@@ -32,7 +32,7 @@ export default function CourseCatalogInjectedPopup({
        <Popup overlay className='max-w-[780px] px-6' onClose={onClose}>
            <div className='flex flex-col'>
                <HeadingAndActions course={course} onClose={onClose} activeSchedule={activeSchedule} />
-                <Description lines={course.description} />
+                <Description course={course} /* lines={course.description} Looks like this was replaced. Description now set internally*/ /> 
                <GradeDistribution course={course} />
            </div>
        </Popup>
--- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
@@ -56,9 +56,7 @@ const HeadingAndActions: React.FC<HeadingAndActionProps> = ({
    onClose,
 }: HeadingAndActionProps): JSX.Element => {
    const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule } = course;
-    const [courseAdded, setCourseAdded] = useState<boolean>(
-        activeSchedule !== undefined ? activeSchedule.courses.some(course => course.uniqueId === uniqueId) : false
-    );
+    const courseAdded = activeSchedule.courses.some(ourCourse => ourCourse.uniqueId === uniqueId);

    const getInstructorFullName = (instructor: Instructor) => {
        const { firstName, lastName } = instructor;
@@ -105,7 +103,6 @@ const HeadingAndActions: React.FC<HeadingAndActionProps> = ({
        } else {
            removeCourse({ course, scheduleName: activeSchedule.name });
        }
-        setCourseAdded(prev => !prev);
    };

    return (
--- a/src/views/hooks/useFlattenedCourseSchedule.ts
+++ b/src/views/hooks/useFlattenedCourseSchedule.ts
@@ -5,6 +5,8 @@ import type { CalendarCourseCellProps } from '@views/components/calendar/Calenda

 import useSchedules from './useSchedules';

+
+
 const dayToNumber: { [day: string]: number } = {
    Monday: 0,
    Tuesday: 1,
@@ -58,32 +60,31 @@ export function useFlattenedCourseSchedule(): FlattenedCourseSchedule {
        return {
            courseCells: [] as CalendarGridCourse[],
            activeSchedule: new UserSchedule([], 'Something may have went wrong', 0),
-        } as FlattenedCourseSchedule;
+        } satisfies FlattenedCourseSchedule;
    }

    if (activeSchedule.courses.length === 0) {
        return {
            courseCells: [] as CalendarGridCourse[],
-            activeSchedule,
+            activeSchedule
        } satisfies FlattenedCourseSchedule;
+
    }

    const { courses, name, hours } = activeSchedule;

-    const processedCourses = courses
-        .flatMap((course: Course) => {
-            const { status, courseDeptAndInstr, meetings } = extractCourseInfo(course);
-
-            if (meetings.length === 0) {
-                return processAsyncCourses({ courseDeptAndInstr, status, course });
-            }
-
-            return meetings.flatMap((meeting: CourseMeeting) =>
-                processInPersonMeetings(meeting, { courseDeptAndInstr, status, course })
-            );
-        })
-        .sort(sortCourses);
-
+    const processedCourses = courses.flatMap((course: Course) => {
+        const { status, courseDeptAndInstr, meetings } = extractCourseInfo(course);
+    
+        if (meetings.length === 0) {
+            return processAsyncCourses({ courseDeptAndInstr, status, course });
+        }
+    
+        return meetings.flatMap((meeting: CourseMeeting) => 
+            processInPersonMeetings(meeting, { courseDeptAndInstr, status, course })
+        );
+    }).sort(sortCourses);
+    
    return {
        courseCells: processedCourses as CalendarGridCourse[],
        activeSchedule: { name, courses, hours } as UserSchedule,
@@ -105,33 +106,23 @@ function extractCourseInfo(course: Course) {
 /**
 * Function to process each in-person class into its distinct meeting objects for calendar grid
 */
-function processAsyncCourses({
-    courseDeptAndInstr,
-    status,
-    course,
-}: {
-    courseDeptAndInstr: string;
-    status: StatusType;
-    course: Course;
-}) {
-    return [
-        {
-            calendarGridPoint: {
-                dayIndex: 0,
-                startIndex: 0,
-                endIndex: 0,
-            },
-            componentProps: {
-                courseDeptAndInstr,
-                status,
-                colors: {
-                    primaryColor: 'ut-gray',
-                    secondaryColor: 'ut-gray',
-                },
-            },
-            course,
+function processAsyncCourses({ courseDeptAndInstr, status, course }: { courseDeptAndInstr: string, status: StatusType, course: Course }) {
+    return [{
+        calendarGridPoint: {
+            dayIndex: 0,
+            startIndex: 0,
+            endIndex: 0,
        },
-    ] satisfies CalendarGridCourse[];
+        componentProps: {
+            courseDeptAndInstr,
+            status,
+            colors: {
+                primaryColor: 'ut-gray',
+                secondaryColor: 'ut-gray',
+            },
+        },
+        course,
+    }] satisfies CalendarGridCourse[];
 }

 /**
@@ -141,13 +132,17 @@ function processInPersonMeetings(
    { days, startTime, endTime, location }: CourseMeeting,
    { courseDeptAndInstr, status, course }
 ) {
+    const midnightIndex = 1440;
+    const normalizingTimeFactor = 720;
    const time = getTimeString({ separator: '-', capitalize: true }, startTime, endTime);
    const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
+    let normalizedStartTime = startTime >= midnightIndex ? startTime - normalizingTimeFactor : startTime;
+    let normalizedEndTime = endTime >= midnightIndex ? endTime - normalizingTimeFactor : endTime;
    return days.map(day => ({
        calendarGridPoint: {
            dayIndex: dayToNumber[day],
-            startIndex: convertMinutesToIndex(startTime),
-            endIndex: convertMinutesToIndex(endTime),
+            startIndex: convertMinutesToIndex(normalizedStartTime),
+            endIndex: convertMinutesToIndex(normalizedEndTime),
        },
        componentProps: {
            courseDeptAndInstr,
@@ -165,7 +160,7 @@ function processInPersonMeetings(
 /**
 * Utility function to sort courses for the calendar grid
 */
-function sortCourses(a, b) {
+function sortCourses(a: CalendarGridCourse, b: CalendarGridCourse): number {
    const { dayIndex: dayIndexA, startIndex: startIndexA, endIndex: endIndexA } = a.calendarGridPoint;
    const { dayIndex: dayIndexB, startIndex: startIndexB, endIndex: endIndexB } = b.calendarGridPoint;