From 1599e48d75d4877b3515c943120d83b59d084a55 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Mon, 19 Feb 2024 11:28:33 -0600 Subject: [PATCH] fix: ConflictsWithWarning --- .../ConflictsWithWarning.stories.tsx | 102 +++++++++++++++++- .../ConflictsWithWarning.tsx | 38 +++---- 2 files changed, 113 insertions(+), 27 deletions(-) diff --git a/src/stories/components/ConflictsWithWarning.stories.tsx b/src/stories/components/ConflictsWithWarning.stories.tsx index f1f9855af..d81706a72 100644 --- a/src/stories/components/ConflictsWithWarning.stories.tsx +++ b/src/stories/components/ConflictsWithWarning.stories.tsx @@ -1,5 +1,96 @@ import { Meta, StoryObj } from '@storybook/react'; import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning'; +import { Course, Status } from 'src/shared/types/Course'; +import { CourseMeeting } from 'src/shared/types/CourseMeeting'; +import Instructor from 'src/shared/types/Instructor'; + +export const ExampleCourse: Course = new Course({ + courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB', + creditHours: 3, + department: 'C S', + description: [ + 'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.', + 'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.', + 'May be counted toward the Quantitative Reasoning flag requirement.', + 'Designed to accommodate 100 or more students.', + 'Taught as a Web-based course.', + ], + flags: ['Quantitative Reasoning'], + fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB', + instructionMode: 'Online', + instructors: [ + new Instructor({ + firstName: 'Bevo', + lastName: 'Bevo', + fullName: 'Bevo Bevo', + }), + ], + isReserved: false, + number: '303E', + schedule: { + meetings: [ + new CourseMeeting({ + days: ['Tuesday', 'Thursday'], + endTime: 660, + startTime: 570, + }), + ], + }, + semester: { + code: '12345', + season: 'Spring', + year: 2024, + }, + status: Status.WAITLISTED, + uniqueId: 12345, + url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/', +}); +export const ExampleCourse2: Course = new Course({ + courseName: 'PRINCIPLES OF COMPUTER SYSTEMS', + creditHours: 3, + department: 'C S', + description: [ + 'Restricted to computer science majors.', + 'An introduction to computer systems software abstractions with an emphasis on the connection of these abstractions to underlying computer hardware. Key abstractions include threads, virtual memory, protection, and I/O. Requires writing of synchronized multithreaded programs and pieces of an operating system.', + 'Computer Science 439 and 439H may not both be counted.', + 'Prerequisite: Computer Science 429, or 429H with a grade of at least C-.', + 'May be counted toward the Independent Inquiry flag requirement.', + ], + flags: ['Independent Inquiry'], + fullName: 'C S 439 PRINCIPLES OF COMPUTER SYSTEMS', + instructionMode: 'In Person', + instructors: [ + new Instructor({ + firstName: 'Allison', + lastName: 'Norman', + fullName: 'Allison Norman', + }), + ], + isReserved: false, + number: '439', + schedule: { + meetings: [ + new CourseMeeting({ + days: ['Tuesday', 'Thursday'], + startTime: 930, + endTime: 1050, + }), + new CourseMeeting({ + days: ['Friday'], + startTime: 600, + endTime: 720, + }), + ], + }, + semester: { + code: '12345', + season: 'Spring', + year: 2024, + }, + status: Status.WAITLISTED, + uniqueId: 67890, + url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/', +}); const meta = { title: 'Components/Common/ConflictsWithWarning', @@ -9,8 +100,10 @@ const meta = { }, tags: ['autodocs'], argTypes: { - ConflictingCourse: { control: 'string' }, - SectionNumber: { control: 'string' }, + conflicts: { control: 'object' }, + }, + args: { + conflicts: [ExampleCourse, ExampleCourse2], }, } satisfies Meta; export default meta; @@ -19,7 +112,6 @@ type Story = StoryObj; export const Default: Story = { args: { - ConflictingCourse: 'BVO 311C', - SectionNumber: '47280', + conflicts: [ExampleCourse, ExampleCourse2], }, -}; \ No newline at end of file +}; diff --git a/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx index ca1cc9bf0..30d08e77d 100644 --- a/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx +++ b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx @@ -1,43 +1,37 @@ import React from 'react'; +import { Course } from 'src/shared/types/Course'; +import clsx from 'clsx'; import Text from '../Text/Text'; /** * Props for ConflictWithWarningProps */ export interface ConflictsWithWarningProps { - ConflictingCourse: string; - SectionNumber: string; + className?: string; + conflicts: Course[]; } /** - * The ConflictsWithWarning component is used to display a warning message when a course conflicts + * The ConflictsWithWarning component is used to display a warning message when a course conflicts * with another course as part of the labels and details section * * @param props ConflictsWithWarningProps */ -export default function ConflictsWithWarning( { ConflictingCourse, SectionNumber }: ConflictsWithWarningProps): JSX.Element { - const UniqueCourseConflictText = `${ConflictingCourse} (${SectionNumber})`; - - return ( -
- - Conflicts With: - - - {UniqueCourseConflictText} - -
- ); -} - -function ConflictsWithoutWarningText( {children}: {children: string} ) { +export default function ConflictsWithWarning({ className, conflicts }: ConflictsWithWarningProps): JSX.Element { return ( - {children} +
Conflicts With:
+ {conflicts.map(course => ( +
+ {`${course.department} ${course.number} (${course.uniqueId})`} +
+ ))} ); }