From d62b8d1af11f2e6b4bcff19b73ad40d7bff7100a Mon Sep 17 00:00:00 2001
From: doprz <52579214+doprz@users.noreply.github.com>
Date: Thu, 29 Feb 2024 21:24:09 -0600
Subject: [PATCH] chore: lint and format the repo

---
 src/views/components/PopupMain.tsx            | 20 ++---
 .../components/calendar/Calendar/Calendar.tsx | 20 +++--
 .../CalendarCourseCell/CalendarCourseCell.tsx |  6 +-
 .../calendar/CalendarGrid/CalendarGrid.tsx    |  4 +-
 .../CalendarHeader/CalenderHeader.tsx         |  4 +-
 .../CalendarSchedules/CalendarSchedules.tsx   | 13 ++-
 src/views/components/common/List/List.tsx     |  8 +-
 src/views/hooks/useFlattenedCourseSchedule.ts | 82 +++++++++++--------
 8 files changed, 86 insertions(+), 71 deletions(-)

diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index 8b742198..05d0f739 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -22,18 +22,14 @@ import SettingsIcon from '~icons/material-symbols/settings';
  * This component displays the main schedule, courses, and options buttons.
  */
 export default function PopupMain() {
-   const [activeSchedule, schedules] = useSchedules();
-   const coursesLength = activeSchedule ? activeSchedule.courses.length : 0;
-   if (!activeSchedule) {
-       return;
-   }
-   
-   const draggableElements = activeSchedule?.courses.map((course, i) => (
-        <PopupCourseBlock
-            key={course.uniqueId}
-            course={course}
-            colors={tailwindColorways[i]}
-        />
+    const [activeSchedule, schedules] = useSchedules();
+    const coursesLength = activeSchedule ? activeSchedule.courses.length : 0;
+    if (!activeSchedule) {
+        return;
+    }
+
+    const draggableElements = activeSchedule?.courses.map((course, i) => (
+        <PopupCourseBlock key={course.uniqueId} course={course} colors={tailwindColorways[i]} />
     ));
 
     const handleOpenOptions = async () => {
diff --git a/src/views/components/calendar/Calendar/Calendar.tsx b/src/views/components/calendar/Calendar/Calendar.tsx
index 63162dae..f32f4132 100644
--- a/src/views/components/calendar/Calendar/Calendar.tsx
+++ b/src/views/components/calendar/Calendar/Calendar.tsx
@@ -9,8 +9,6 @@ import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSched
 import React from 'react';
 import { ExampleCourse } from 'src/stories/components/PopupCourseBlock.stories';
 
-
-
 export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];
 
 interface Props {
@@ -26,8 +24,12 @@ export function Calendar(): JSX.Element {
     const [course, setCourse] = React.useState<Course | null>(null);
 
     return (
-        <div className = 'flex flex-col'>
-            <CalendarHeader totalHours={activeSchedule.hours} scheduleName={activeSchedule.name} totalCourses={activeSchedule?.courses.length}/>
+        <div className='flex flex-col'>
+            <CalendarHeader
+                totalHours={activeSchedule.hours}
+                scheduleName={activeSchedule.name}
+                totalCourses={activeSchedule?.courses.length}
+            />
             <div className='h-screen w-full flex flex-col md:flex-row'>
                 <div className='min-h-[30%] flex flex-col items-start gap-2.5 p-5 pl-7'>
                     <div className='min-h-[30%]'>
@@ -37,7 +39,7 @@ export function Calendar(): JSX.Element {
                 </div>
                 <div className='flex flex-grow flex-col gap-4 overflow-hidden pr-12'>
                     <div className='flex-grow overflow-auto'>
-                        <CalendarGrid courseCells = {courseCells} setCourse={setCourse}/>
+                        <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
                     </div>
                     <div>
                         <CalendarBottomBar />
@@ -46,7 +48,13 @@ export function Calendar(): JSX.Element {
             </div>
             {/* TODO: Doesn't work when exampleCourse is replaced with an actual course through setCourse. 
                 Check CalendarGrid.tsx and AccountForCourseConflicts for an example */}
-            {course ? <CourseCatalogInjectedPopup course = {ExampleCourse} activeSchedule = {activeSchedule} onClose={() => setCourse(null)}/> : null}
+            {course ? (
+                <CourseCatalogInjectedPopup
+                    course={ExampleCourse}
+                    activeSchedule={activeSchedule}
+                    onClose={() => setCourse(null)}
+                />
+            ) : null}
         </div>
     );
 }
diff --git a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
index f7e5fa5c..c9ba5673 100644
--- a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
@@ -56,7 +56,11 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
 
     return (
         <div
-            className={clsx('h-full w-full flex justify-center rounded p-2 overflow-x-hidden cursor-default hover:cursor-pointer', fontColor, className)}
+            className={clsx(
+                'h-full w-full flex justify-center rounded p-2 overflow-x-hidden cursor-default hover:cursor-pointer',
+                fontColor,
+                className
+            )}
             style={{
                 backgroundColor: colors.primaryColor,
             }}
diff --git a/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx b/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
index df4ccbf3..36e29995 100644
--- a/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
@@ -12,7 +12,6 @@ import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
 import styles from './CalendarGrid.module.scss';
 
-
 interface Props {
     courseCells?: CalendarGridCourse[];
     saturdayClass?: boolean;
@@ -89,7 +88,6 @@ function CalendarGrid({ courseCells, saturdayClass, setCourse }: React.PropsWith
         grid.push(row);
     }
 
-
     return (
         <div className={styles.calendarGrid}>
             {/* Displaying day labels */}
@@ -100,7 +98,7 @@ function CalendarGrid({ courseCells, saturdayClass, setCourse }: React.PropsWith
                 </div>
             ))}
             {grid.map((row, rowIndex) => row)}
-            {courseCells ? <AccountForCourseConflicts courseCells={courseCells} setCourse={setCourse}/> : null}
+            {courseCells ? <AccountForCourseConflicts courseCells={courseCells} setCourse={setCourse} /> : null}
         </div>
     );
 }
diff --git a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx b/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
index 235c1312..31ae0c4e 100644
--- a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
@@ -18,7 +18,7 @@ const handleOpenOptions = async () => {
     await openTabFromContentScript(url);
 };
 
-const CalendarHeader = ( { totalHours, totalCourses, scheduleName } ) => (
+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'>
@@ -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>
diff --git a/src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx b/src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
index c8c22714..4f7006be 100644
--- a/src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
+++ b/src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
@@ -1,19 +1,18 @@
 import createSchedule from '@pages/background/lib/createSchedule';
 import switchSchedule from '@pages/background/lib/switchSchedule';
-import type { UserSchedule } from '@shared/types/UserSchedule';
+// import type { UserSchedule } from '@shared/types/UserSchedule';
+import List from '@views/components/common/List/List';
+import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
+import Text from '@views/components/common/Text/Text';
 import useSchedules from '@views/hooks/useSchedules';
 import React, { useEffect, useState } from 'react';
 
 import AddSchedule from '~icons/material-symbols/add';
 
-import List from '../../common/List/List';
-import ScheduleListItem from '../../common/ScheduleListItem/ScheduleListItem';
-import Text from '../../common/Text/Text';
-
 export type Props = {
     style?: React.CSSProperties;
-    dummySchedules?: UserSchedule[];
-    dummyActiveIndex?: number;
+    // dummySchedules?: UserSchedule[];
+    // dummyActiveIndex?: number;
 };
 
 /**
diff --git a/src/views/components/common/List/List.tsx b/src/views/components/common/List/List.tsx
index 2ae85796..4b6bc5fc 100644
--- a/src/views/components/common/List/List.tsx
+++ b/src/views/components/common/List/List.tsx
@@ -1,6 +1,6 @@
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { ReactElement } from 'react';
-import React, { useCallback, useEffect,useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 /*
  * Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
@@ -84,16 +84,16 @@ const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style
  */
 const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight, listWidth, gap = 12 }: ListProps) => {
     const [items, setItems] = useState(() => initial(0, draggableElements));
-    
+
     useEffect(() => {
-        setItems((prevItems) => {
+        setItems(prevItems => {
             const prevItemIds = prevItems.map(item => item.id);
             const newElements = draggableElements.filter((_, index) => !prevItemIds.includes(`id:${index}`));
             const newItems = initial(prevItems.length, newElements);
             return [...prevItems, ...newItems];
         });
     }, [draggableElements]);
-    
+
     const onDragEnd = useCallback(
         result => {
             if (!result.destination) {
diff --git a/src/views/hooks/useFlattenedCourseSchedule.ts b/src/views/hooks/useFlattenedCourseSchedule.ts
index e7f784f8..1ab7060c 100644
--- a/src/views/hooks/useFlattenedCourseSchedule.ts
+++ b/src/views/hooks/useFlattenedCourseSchedule.ts
@@ -5,8 +5,6 @@ import type { CalendarCourseCellProps } from '@views/components/calendar/Calenda
 
 import useSchedules from './useSchedules';
 
-
-
 const dayToNumber: { [day: string]: number } = {
     Monday: 0,
     Tuesday: 1,
@@ -22,7 +20,7 @@ interface CalendarGridPoint {
 }
 
 interface componentProps {
-    calendarCourseCellProps: CalendarCourseCellProps; 
+    calendarCourseCellProps: CalendarCourseCellProps;
 }
 
 /**
@@ -66,25 +64,26 @@ export function useFlattenedCourseSchedule(): 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,
@@ -106,29 +105,42 @@ 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',
+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,
         },
-        course,
-    }] satisfies CalendarGridCourse[];
+    ] satisfies CalendarGridCourse[];
 }
 
 /**
  * Function to process each in-person class into its distinct meeting objects for calendar grid
  */
-function processInPersonMeetings( { days, startTime, endTime, location }: CourseMeeting, { courseDeptAndInstr, status, course }) {
+function processInPersonMeetings(
+    { days, startTime, endTime, location }: CourseMeeting,
+    { courseDeptAndInstr, status, course }
+) {
     const time = getTimeString({ separator: '-', capitalize: true }, startTime, endTime);
     const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
     return days.map(day => ({
@@ -150,7 +162,6 @@ function processInPersonMeetings( { days, startTime, endTime, location }: Course
     })) satisfies CalendarGridCourse[];
 }
 
-
 /**
  * Utility function to sort courses for the calendar grid
  */
@@ -167,7 +178,6 @@ function sortCourses(a, b) {
     return endIndexA - endIndexB;
 }
 
-
 /**
  * Utility function also present in CourseMeeting object. Wasn't being found at runtime, so I copied it over.
  */
@@ -217,4 +227,4 @@ type TimeStringOptions = {
     separator: string;
     /** capitalizes the AM/PM */
     capitalize?: boolean;
-};
\ No newline at end of file
+};