chore: lint and format the repo

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 () => {

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

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[];
-    dummyActiveIndex?: number;
+    // dummySchedules?: UserSchedule[];
+    // 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)
@@ -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) {