sort the flattened course schedule (#93)

first by dayIndex, then startIndex, then endIndex.

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,7 +33,8 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
     const [activeSchedule] = useSchedules();
     const { courses } = activeSchedule;
 
-    return courses.flatMap(course => {
+    return courses
+        .flatMap(course => {
             const {
                 status,
                 department,
@@ -46,6 +47,11 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
                 // asynch, online course
                 return [
                     {
+                        calendarGridPoint: {
+                            dayIndex: 0,
+                            startIndex: 0,
+                            endIndex: 0,
+                        },
                         componentProps: {
                             courseDeptAndInstr,
                             status,
@@ -83,5 +89,14 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
                     },
                 }));
             });
+        })
+        .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;
         });
 }