fix: fixed bug with course cells after 12 PM extending past midnight (#122)

* Temporarily uninstalling husky cause github desktop has issues with it

* Cleaned up some code. Removed unnecessary state value on injected popup

* Should've fixed popup alignment issue. Still need to integrate course schedule with calendar. Still debugging.

* Updated CalendarGridStories

* Fix: change to ExampleCourse from exampleCourse

* setCourse and calendar header need work

* Update as part of merge

* Fix: fixed build errors

* Fix: Added Todo

* Chore: Cleaned up useFlattenedCourseSchedule hook

* fix: List now keeps track of state when existing items are switched, while adding new items to the end

* Added back husky

* Update src/views/components/calendar/Calendar/Calendar.tsx

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: added type-safety, destructuring, etc. ready for re-review

* refactor: got rid of ts-ignore in openNewTabFromContentScript

* Update src/views/components/calendar/CalendarHeader/CalenderHeader.tsx

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using path aliasing

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using path aliasing

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using satisfies instead of as

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using satisfies instead of as

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* style: reformatted spacing

* style: eslint import order

* refactor: added new constructor for UserSchedule to avoid passing down null values to child props

* fix: fixed bug with course cell times starting and after 12 PM. commented in CourseMeeting class

* Update src/views/hooks/useFlattenedCourseSchedule.ts

* fix: fixed build errors by removing old apis

* refactor: added type-safety and destructuring

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/views/components/calendar/CalendarGrid/CalendarGrid.tsx

@@ -22,8 +22,6 @@ interface Props {
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-// function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props>): JSX.Element {
-//     const [grid, setGrid] = useState([]);
 function CalendarGrid({ courseCells, saturdayClass, setCourse }: React.PropsWithChildren<Props>): JSX.Element {
     //  const [grid, setGrid] = useState([]);
     const calendarRef = useRef(null); // Create a ref for the calendar grid
@@ -152,29 +150,33 @@ function AccountForCourseConflicts({ courseCells, setCourse }: AccountForCourseC
     });
 
     //  Part of TODO: block.course is definitely a course object
-    console.log(courseCells);
+    //  console.log(courseCells);
+    
+    return courseCells.map((block, i) => {
+        const { courseDeptAndInstr, timeAndLocation, status, colors } = courseCells[i].componentProps;
 
-    return courseCells.map(block => (
-        <div
-            key={`${block}`}
-            style={{
-                gridColumn: `${block.calendarGridPoint.dayIndex + 2}`,
-                gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
-                width: `calc(100% / ${block.totalColumns})`,
-                marginLeft: `calc(100% * ${(block.gridColumnStart - 1) / block.totalColumns})`,
-                padding: '0px 10px 4px 0px',
-            }}
-        >
-            <CalendarCourseCell
-                courseDeptAndInstr={block.componentProps.courseDeptAndInstr}
-                timeAndLocation={block.componentProps.timeAndLocation}
-                status={block.componentProps.status}
-                //  TODO: Change to block.componentProps.colors when colors are integrated to the rest of the project
-                colors={getCourseColors('emerald', 500) /*  block.componentProps.colors */}
-                onClick={() => setCourse(block.course)}
-            />
-        </div>
-    ));
+        return (
+            <div
+                key={`${block}`}
+                style={{
+                    gridColumn: `${block.calendarGridPoint.dayIndex + 2}`,
+                    gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
+                    width: `calc(100% / ${block.totalColumns})`,
+                    marginLeft: `calc(100% * ${(block.gridColumnStart - 1) / block.totalColumns})`,
+                    padding: '0px 10px 4px 0px',
+                }}
+            >
+                <CalendarCourseCell
+                    courseDeptAndInstr={courseDeptAndInstr}
+                    timeAndLocation={timeAndLocation}
+                    status={status}
+                    //  TODO: Change to block.componentProps.colors when colors are integrated to the rest of the project
+                    colors={getCourseColors('emerald', 500) /*  block.componentProps.colors */}
+                    onClick={() => setCourse(block.course)}
+                />
+            </div>
+        )
+    });
 }
 
 /* <div className={styles.buttonContainer}>

src/views/components/calendar/CalendarHeader/CalenderHeader.tsx

@@ -18,8 +18,8 @@ const handleOpenOptions = async () => {
     await openTabFromContentScript(url);
 };
 
-const CalendarHeader = ({ totalHours, totalCourses, scheduleName }) => (
-    <div className='min-h-79px min-w-672px w-full flex px-0'>
+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'>
                 <div className='flex gap-1'>
@@ -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/common/List/List.tsx

@@ -93,7 +93,6 @@ const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight,
             return [...prevItems, ...newItems];
         });
     }, [draggableElements]);
-
     const onDragEnd = useCallback(
         result => {
             if (!result.destination) {

src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx

@@ -32,7 +32,7 @@ export default function CourseCatalogInjectedPopup({
         <Popup overlay className='max-w-[780px] px-6' onClose={onClose}>
             <div className='flex flex-col'>
                 <HeadingAndActions course={course} onClose={onClose} activeSchedule={activeSchedule} />
-                <Description lines={course.description} />
+                <Description course={course} /* lines={course.description} Looks like this was replaced. Description now set internally*/ /> 
                 <GradeDistribution course={course} />
             </div>
         </Popup>

src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx

@@ -56,9 +56,7 @@ const HeadingAndActions: React.FC<HeadingAndActionProps> = ({
     onClose,
 }: HeadingAndActionProps): JSX.Element => {
     const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule } = course;
-    const [courseAdded, setCourseAdded] = useState<boolean>(
-        activeSchedule !== undefined ? activeSchedule.courses.some(course => course.uniqueId === uniqueId) : false
-    );
+    const courseAdded = activeSchedule.courses.some(ourCourse => ourCourse.uniqueId === uniqueId);
 
     const getInstructorFullName = (instructor: Instructor) => {
         const { firstName, lastName } = instructor;
@@ -105,7 +103,6 @@ const HeadingAndActions: React.FC<HeadingAndActionProps> = ({
         } else {
             removeCourse({ course, scheduleName: activeSchedule.name });
         }
-        setCourseAdded(prev => !prev);
     };
 
     return (