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 <[email protected]> * 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 <[email protected]> * refactor: using path aliasing Co-authored-by: doprz <[email protected]> * refactor: using path aliasing Co-authored-by: doprz <[email protected]> * refactor: using satisfies instead of as Co-authored-by: doprz <[email protected]> * refactor: using satisfies instead of as Co-authored-by: doprz <[email protected]> * 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 <[email protected]>
Longhorn-Developers · Mar 6, 2024 · f22a3cd · f22a3cd
1 parent 5abb2a4
commit f22a3cd
Show file tree

Hide file tree

Showing 10 changed files with 11,013 additions and 354 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/shared/types/CourseMeeting.ts b/src/shared/types/CourseMeeting.ts
@@ -31,9 +31,13 @@ export type Location = {
 export class CourseMeeting {
     /** The day of the week that the course is taught */
     days: Day[];
-    /** The start time of the course, in minutes since midnight */
+    /** NOTE: Times starting and after 12 PM have an additional 720 minutes (12 hrs) added to them
+     * The start time of the course, in minutes since midnight
+     * */
     startTime: number;
-    /** The end time of the course, in minutes since midnight */
+    /** NOTE: Times starting and after 12 PM have an additional 720 minutes (12 hrs) added to them
+     * The end time of the course, in minutes since midnight 
+     * */
     endTime: number;
     /** The location that the course is taught */
     location?: Location;

diff --git a/src/stories/components/calendar/CalendarSchedules.stories.tsx b/src/stories/components/calendar/CalendarSchedules.stories.tsx
@@ -15,8 +15,8 @@ const meta = {
         tags: ['autodocs'],
     },
     argTypes: {
-        dummySchedules: { control: 'object' },
-        dummyActiveIndex: { control: 'number' },
+        //  dummySchedules: { control: 'object' },
+        //  dummyActiveIndex: { control: 'number' },
     },
     render: (args: any) => (
         <div>
@@ -138,7 +138,7 @@ const schedules = [
 
 export const Default: Story = {
     args: {
-        dummySchedules: schedules,
-        dummyActiveIndex: 0,
+        //  dummySchedules: schedules,
+        //  dummyActiveIndex: 0,
     },
 };
diff --git a/src/stories/injected/CourseCatalogInjectedPopup.stories.ts b/src/stories/injected/CourseCatalogInjectedPopup.stories.ts
@@ -11,99 +11,99 @@ const exampleSchedule: UserSchedule = new UserSchedule({
 });
 // TODO (achadaga): import this after
 // https://github.com/Longhorn-Developers/UT-Registration-Plus/pull/106 is merged
-const bevoCourse: Course = new Course({
-    uniqueId: 47280,
-    number: '311C',
-    fullName: "BVO 311C BEVO'S SEMINAR LONGHORN CARE",
-    courseName: "BEVO'S SEMINAR LONGHORN CARE",
-    department: 'BVO',
-    creditHours: 3,
-    status: Status.OPEN,
-    instructors: [new Instructor({ fullName: 'BEVO', firstName: '', lastName: 'BEVO', middleInitial: '' })],
-    isReserved: false,
-    description: [
-        'Restricted to Students in the School of Longhorn Enthusiasts',
-        'Immerse yourself in the daily routine of a longhorn—sunrise pasture walks and the best shady spots for a midday siesta. Understand the behavioral science behind our mascot’s stoic demeanor during games.',
-        'BVO 311C and 312H may not both be counted.',
-        'Prerequisite: Grazing 311 or 311H.',
-        'May be counted toward the Independent Inquiry flag requirement. May be counted toward the Writing flag requirement',
-        'Offered on the letter-grade basis only.',
-    ],
-    schedule: new CourseSchedule({
-        meetings: [
-            new CourseMeeting({
-                days: ['Tuesday', 'Thursday'],
-                startTime: 480,
-                endTime: 570,
-                location: { building: 'UTC', room: '123' },
-            }),
-            new CourseMeeting({
-                days: ['Thursday'],
-                startTime: 570,
-                endTime: 630,
-                location: { building: 'JES', room: '123' },
-            }),
-        ],
-    }),
-    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
-    flags: ['Independent Inquiry', 'Writing'],
-    instructionMode: 'In Person',
-    semester: {
-        code: '12345',
-        year: 2024,
-        season: 'Spring',
-    },
-});
+// const bevoCourse: Course = new Course({
+//     uniqueId: 47280,
+//     number: '311C',
+//     fullName: "BVO 311C BEVO'S SEMINAR LONGHORN CARE",
+//     courseName: "BEVO'S SEMINAR LONGHORN CARE",
+//     department: 'BVO',
+//     creditHours: 3,
+//     status: Status.OPEN,
+//     instructors: [new Instructor({ fullName: 'BEVO', firstName: '', lastName: 'BEVO', middleInitial: '' })],
+//     isReserved: false,
+//     description: [
+//         'Restricted to Students in the School of Longhorn Enthusiasts',
+//         'Immerse yourself in the daily routine of a longhorn—sunrise pasture walks and the best shady spots for a midday siesta. Understand the behavioral science behind our mascot’s stoic demeanor during games.',
+//         'BVO 311C and 312H may not both be counted.',
+//         'Prerequisite: Grazing 311 or 311H.',
+//         'May be counted toward the Independent Inquiry flag requirement. May be counted toward the Writing flag requirement',
+//         'Offered on the letter-grade basis only.',
+//     ],
+//     schedule: new CourseSchedule({
+//         meetings: [
+//             new CourseMeeting({
+//                 days: ['Tuesday', 'Thursday'],
+//                 startTime: 480,
+//                 endTime: 570,
+//                 location: { building: 'UTC', room: '123' },
+//             }),
+//             new CourseMeeting({
+//                 days: ['Thursday'],
+//                 startTime: 570,
+//                 endTime: 630,
+//                 location: { building: 'JES', room: '123' },
+//             }),
+//         ],
+//     }),
+//     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+//     flags: ['Independent Inquiry', 'Writing'],
+//     instructionMode: 'In Person',
+//     semester: {
+//         code: '12345',
+//         year: 2024,
+//         season: 'Spring',
+//     },
+// });
 
-const meta = {
-    title: 'Components/Injected/CourseCatalogInjectedPopup',
-    component: CourseCatalogInjectedPopup,
-    args: {
-        course: exampleCourse,
-        activeSchedule: exampleSchedule,
-        onClose: () => {},
-    },
-    argTypes: {
-        course: {
-            control: {
-                type: 'object',
-            },
-        },
-        activeSchedule: {
-            control: {
-                type: 'object',
-            },
-        },
-        onClose: {
-            control: {
-                type: 'function',
-            },
-        },
-    },
-} satisfies Meta<typeof CourseCatalogInjectedPopup>;
+// const meta = {
+//     title: 'Components/Injected/CourseCatalogInjectedPopup',
+//     component: CourseCatalogInjectedPopup,
+//     args: {
+//         course: exampleCourse,
+//         activeSchedule: exampleSchedule,
+//         onClose: () => {},
+//     },
+//     argTypes: {
+//         course: {
+//             control: {
+//                 type: 'object',
+//             },
+//         },
+//         activeSchedule: {
+//             control: {
+//                 type: 'object',
+//             },
+//         },
+//         onClose: {
+//             control: {
+//                 type: 'function',
+//             },
+//         },
+//     },
+// } satisfies Meta<typeof CourseCatalogInjectedPopup>;
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+// export default meta;
+// type Story = StoryObj<typeof meta>;
 
-export const OpenCourse: Story = {
-    args: {
-        course: exampleCourse,
-        activeSchedule: exampleSchedule,
-        onClose: () => {},
-    },
-};
+// export const OpenCourse: Story = {
+//     args: {
+//         course: exampleCourse,
+//         activeSchedule: exampleSchedule,
+//         onClose: () => {},
+//     },
+// };
 
-export const ClosedCourse: Story = {
-    args: {
-        course: {
-            ...exampleCourse,
-            status: Status.CLOSED,
-        } satisfies Course,
-    },
-};
+// export const ClosedCourse: Story = {
+//     args: {
+//         course: {
+//             ...exampleCourse,
+//             status: Status.CLOSED,
+//         } satisfies Course,
+//     },
+// };
 
-export const CourseWithNoData: Story = {
-    args: {
-        course: bevoCourse,
-    },
-};
+// export const CourseWithNoData: Story = {
+//     args: {
+//         course: bevoCourse,
+//     },
+// };
diff --git a/src/views/components/calendar/CalendarGrid/CalendarGrid.tsx b/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}>

diff --git a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx b/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>

diff --git a/src/views/components/common/List/List.tsx b/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) {

diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx b/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>

diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx b/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 (