feat: abhinavchadaga/course-catalog-popup

src/stories/injected/CourseCatalogInjectedPopup.stories.ts

@@ -1,111 +1,59 @@
-/* eslint-disable storybook/story-exports */
-// import { UserSchedule } from '@shared/types/UserSchedule';
-// import type { Meta, StoryObj } from '@storybook/react';
-// import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
+import type { Course } from '@shared/types/Course';
+import { Status } from '@shared/types/Course';
+import { UserSchedule } from '@shared/types/UserSchedule';
+import type { Meta, StoryObj } from '@storybook/react';
+import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
 
-// import { exampleCourse } from './mocked';
+import { bevoCourse, bevoScheule, MikeScottCS314Course, MikeScottCS314Schedule } from './mocked';
 
-// const exampleSchedule: UserSchedule = new UserSchedule({
-//     courses: [exampleCourse],
-//     name: 'Example Schedule',
-//     hours: 0,
-// });
-// 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 meta = {
+    title: 'Components/Injected/CourseCatalogInjectedPopup',
+    component: CourseCatalogInjectedPopup,
+    args: {
+        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: MikeScottCS314Course,
+        activeSchedule: MikeScottCS314Schedule,
+    },
+};
 
-// export const OpenCourse: Story = {
-//     args: {
-//         course: exampleCourse,
-//         activeSchedule: exampleSchedule,
-//         onClose: () => {},
-//     },
-// };
+export const ClosedCourse: Story = {
+    args: {
+        course: {
+            ...MikeScottCS314Course,
+            status: Status.CLOSED,
+        } as Course,
+        activeSchedule: new UserSchedule({ courses: [], name: '', hours: 0 }),
+    },
+};
 
-// export const ClosedCourse: Story = {
-//     args: {
-//         course: {
-//             ...exampleCourse,
-//             status: Status.CLOSED,
-//         } satisfies Course,
-//     },
-// };
-
-// export const CourseWithNoData: Story = {
-//     args: {
-//         course: bevoCourse,
-//     },
-// };
-export default {};
+export const CourseWithNoData: Story = {
+    args: {
+        course: bevoCourse,
+        activeSchedule: bevoScheule,
+    },
+};

src/stories/injected/mocked.ts

@@ -1,5 +1,5 @@
 import { Course, Status } from '@shared/types/Course';
-import { CourseMeeting } from '@shared/types/CourseMeeting';
+import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
 import Instructor from '@shared/types/Instructor';
 import { UserSchedule } from '@shared/types/UserSchedule';
 
@@ -47,13 +47,114 @@ export const exampleCourse: Course = new Course({
         season: 'Spring',
         year: 2024,
     },
-    status: Status.CANCELLED,
+    status: Status.OPEN,
     uniqueId: 12345,
     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
 });
 
 export const exampleSchedule: UserSchedule = new UserSchedule({
     courses: [exampleCourse],
     name: 'Example Schedule',
-    hours: 0,
+    hours: 3,
+});
+
+export 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: {
+        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',
+    },
+});
+
+export const bevoScheule: UserSchedule = new UserSchedule({
+    courses: [bevoCourse],
+    name: 'Bevo Schedule',
+    hours: 3,
+});
+
+export const MikeScottCS314Course: Course = new Course({
+    uniqueId: 50805,
+    number: '314',
+    fullName: 'C S 314 DATA STRUCTURES',
+    courseName: 'DATA STRUCTURES',
+    department: 'C S',
+    creditHours: 3,
+    status: Status.OPEN,
+    instructors: [
+        new Instructor({ fullName: 'SCOTT, MICHAEL', firstName: 'MICHAEL', lastName: 'SCOTT', middleInitial: 'D' }),
+    ],
+    isReserved: true,
+    description: [
+        'Second part of a two-part sequence in programming. Introduction to specifications, simple unit testing, and debugging; building and using canonical data structures; algorithm analysis and reasoning techniques such as assertions and invariants.',
+        'Computer Science 314 and 314H may not both be counted.',
+        'BVO 311C and 312H may not both be counted.',
+        'Prerequisite: Computer Science 312 or 312H with a grade of at least C-.',
+        'May be counted toward the Quantitative Reasoning flag requirement.',
+    ],
+    schedule: {
+        meetings: [
+            new CourseMeeting({
+                days: [DAY_MAP.T, DAY_MAP.TH],
+                startTime: 480,
+                endTime: 570,
+                location: { building: 'UTC', room: '123' },
+            }),
+            new CourseMeeting({
+                days: [DAY_MAP.TH],
+                startTime: 570,
+                endTime: 630,
+                location: { building: 'JES', room: '123' },
+            }),
+        ],
+    },
+    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/50825/',
+    flags: ['Writing', 'Independent Inquiry'],
+    instructionMode: 'In Person',
+    semester: {
+        code: '12345',
+        year: 2024,
+        season: 'Spring',
+    },
+});
+
+export const MikeScottCS314Schedule: UserSchedule = new UserSchedule({
+    courses: [MikeScottCS314Course],
+    name: 'Mike Scott CS314 Schedule',
+    hours: 3,
 });

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

@@ -9,7 +9,7 @@ import HeadingAndActions from './HeadingAndActions';
 
 interface CourseCatalogInjectedPopupProps {
     course: Course;
-    activeSchedule?: UserSchedule;
+    activeSchedule: UserSchedule;
     onClose: () => void;
 }
 
@@ -27,16 +27,12 @@ export default function CourseCatalogInjectedPopup({
     course,
     activeSchedule,
     onClose,
-}: CourseCatalogInjectedPopupProps) {
+}: CourseCatalogInjectedPopupProps): JSX.Element {
     return (
         <Popup overlay className='max-w-[780px] px-6' onClose={onClose}>
             <div className='flex flex-col'>
                 <HeadingAndActions course={course} onClose={onClose} activeSchedule={activeSchedule} />
-                <Description
-                    course={
-                        course
-                    } /* lines={course.description} Looks like this was replaced. Description now set internally */
-                />
+                <Description course={course} />
                 <GradeDistribution course={course} />
             </div>
         </Popup>

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

@@ -7,8 +7,7 @@ import { Button } from '@views/components/common/Button/Button';
 import { Chip, flagMap } from '@views/components/common/Chip/Chip';
 import Divider from '@views/components/common/Divider/Divider';
 import Text from '@views/components/common/Text/Text';
-import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
-import React, { useState } from 'react';
+import React from 'react';
 
 import Add from '~icons/material-symbols/add';
 import CalendarMonth from '~icons/material-symbols/calendar-month';
@@ -25,7 +24,7 @@ interface HeadingAndActionProps {
     /* The course to display */
     course: Course;
     /* The active schedule */
-    activeSchedule?: UserSchedule;
+    activeSchedule: UserSchedule;
     /* The function to call when the popup should be closed */
     onClose: () => void;
 }