chore: lint and format the repo

src/views/components/PopupMain.tsx

@@ -29,11 +29,7 @@ export default function PopupMain() {
     }
 
     const draggableElements = activeSchedule?.courses.map((course, i) => (
-        <PopupCourseBlock
+        <PopupCourseBlock key={course.uniqueId} course={course} colors={tailwindColorways[i]} />
-            key={course.uniqueId}
-            course={course}
-            colors={tailwindColorways[i]}
-        />
     ));
 
     const handleOpenOptions = async () => {

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'>
+        <div className='flex flex-col'>
-            <CalendarHeader totalHours={activeSchedule.hours} scheduleName={activeSchedule.name} totalCourses={activeSchedule?.courses.length}/>
+            <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>
     );
 }

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,
             }}

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>
     );
 }

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>

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[];
+    // dummySchedules?: UserSchedule[];
-    dummyActiveIndex?: number;
+    // dummyActiveIndex?: number;
 };
 
 /**

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)
@@ -86,7 +86,7 @@ const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight,
     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);

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,
@@ -66,14 +64,14 @@ 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 processedCourses = courses
+        .flatMap((course: Course) => {
             const { status, courseDeptAndInstr, meetings } = extractCourseInfo(course);
 
             if (meetings.length === 0) {
@@ -83,7 +81,8 @@ export function useFlattenedCourseSchedule(): FlattenedCourseSchedule {
             return meetings.flatMap((meeting: CourseMeeting) =>
                 processInPersonMeetings(meeting, { courseDeptAndInstr, status, course })
             );
-    }).sort(sortCourses);
+        })
+        .sort(sortCourses);
 
     return {
         courseCells: processedCourses as CalendarGridCourse[],
@@ -106,8 +105,17 @@ 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 }) {
+function processAsyncCourses({
-    return [{
+    courseDeptAndInstr,
+    status,
+    course,
+}: {
+    courseDeptAndInstr: string;
+    status: StatusType;
+    course: Course;
+}) {
+    return [
+        {
             calendarGridPoint: {
                 dayIndex: 0,
                 startIndex: 0,
@@ -122,13 +130,17 @@ function processAsyncCourses({ courseDeptAndInstr, status, course }: { courseDep
                 },
             },
             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.
  */