From 4f5753917b9ba4b3381c238bea133da0c16e4a12 Mon Sep 17 00:00:00 2001
From: Abhinav Chadaga <abhinav.chadaga@utexas.edu>
Date: Sat, 17 Feb 2024 16:57:51 -0600
Subject: [PATCH] sort the flattened course schedule (#93)

first by dayIndex, then startIndex, then endIndex.
---
 src/views/hooks/useFlattenedCourseSchedule.ts | 101 ++++++++++--------
 1 file changed, 58 insertions(+), 43 deletions(-)

diff --git a/src/views/hooks/useFlattenedCourseSchedule.ts b/src/views/hooks/useFlattenedCourseSchedule.ts
index 6d551ae6..da1a3bb3 100644
--- a/src/views/hooks/useFlattenedCourseSchedule.ts
+++ b/src/views/hooks/useFlattenedCourseSchedule.ts
@@ -19,7 +19,7 @@ interface CalendarGridPoint {
  * Return type of useFlattenedCourseSchedule
  */
 export interface CalendarGridCourse {
-    calendarGridPoint?: CalendarGridPoint;
+    calendarGridPoint: CalendarGridPoint;
     componentProps: CalendarCourseCellProps;
 }
 
@@ -33,55 +33,70 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
     const [activeSchedule] = useSchedules();
     const { courses } = activeSchedule;
 
-    return courses.flatMap(course => {
-        const {
-            status,
-            department,
-            instructors,
-            schedule: { meetings },
-        } = course;
-        const courseDeptAndInstr = `${department} ${instructors[0].lastName}`;
+    return courses
+        .flatMap(course => {
+            const {
+                status,
+                department,
+                instructors,
+                schedule: { meetings },
+            } = course;
+            const courseDeptAndInstr = `${department} ${instructors[0].lastName}`;
 
-        if (meetings.length === 0) {
-            // asynch, online course
-            return [
-                {
+            if (meetings.length === 0) {
+                // asynch, online course
+                return [
+                    {
+                        calendarGridPoint: {
+                            dayIndex: 0,
+                            startIndex: 0,
+                            endIndex: 0,
+                        },
+                        componentProps: {
+                            courseDeptAndInstr,
+                            status,
+                            colors: {
+                                // TODO: figure out colors - these are defaults
+                                primaryColor: 'ut-gray',
+                                secondaryColor: 'ut-gray',
+                            },
+                        },
+                    },
+                ];
+            }
+
+            // in-person
+            return meetings.flatMap(meeting => {
+                const { days, startTime, endTime, location } = meeting;
+                const time = meeting.getTimeString({ separator: '-', capitalize: true });
+                const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
+
+                return days.map(d => ({
+                    calendarGridPoint: {
+                        dayIndex: dayToNumber[d],
+                        startIndex: convertMinutesToIndex(startTime),
+                        endIndex: convertMinutesToIndex(endTime),
+                    },
                     componentProps: {
                         courseDeptAndInstr,
+                        timeAndLocation,
                         status,
                         colors: {
                             // TODO: figure out colors - these are defaults
-                            primaryColor: 'ut-gray',
-                            secondaryColor: 'ut-gray',
+                            primaryColor: 'ut-orange',
+                            secondaryColor: 'ut-orange',
                         },
                     },
-                },
-            ];
-        }
-
-        // in-person
-        return meetings.flatMap(meeting => {
-            const { days, startTime, endTime, location } = meeting;
-            const time = meeting.getTimeString({ separator: '-', capitalize: true });
-            const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
-
-            return days.map(d => ({
-                calendarGridPoint: {
-                    dayIndex: dayToNumber[d],
-                    startIndex: convertMinutesToIndex(startTime),
-                    endIndex: convertMinutesToIndex(endTime),
-                },
-                componentProps: {
-                    courseDeptAndInstr,
-                    timeAndLocation,
-                    status,
-                    colors: {
-                        // TODO: figure out colors - these are defaults
-                        primaryColor: 'ut-orange',
-                        secondaryColor: 'ut-orange',
-                    },
-                },
-            }));
+                }));
+            });
+        })
+        .sort((a: CalendarGridCourse, b: CalendarGridCourse) => {
+            if (a.calendarGridPoint.dayIndex !== b.calendarGridPoint.dayIndex) {
+                return a.calendarGridPoint.dayIndex - b.calendarGridPoint.dayIndex;
+            }
+            if (a.calendarGridPoint.startIndex !== b.calendarGridPoint.startIndex) {
+                return a.calendarGridPoint.startIndex - b.calendarGridPoint.startIndex;
+            }
+            return a.calendarGridPoint.endIndex - b.calendarGridPoint.endIndex;
         });
-    });
 }