From 346b9ced972af5e8e00f8c65779de1705e0b4219 Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Thu, 7 Mar 2024 18:03:39 -0600 Subject: [PATCH] chore: remove unused components (and duplicated calendar components) --- .../components/CalendarCourseCell.stories.tsx | 67 ------------- .../components/CalendarGrid.stories.tsx | 18 ---- .../CalendarCourseCell/CalendarCourseCell.tsx | 6 +- .../CalendarCourseCell/CalendarCourseCell.tsx | 53 ----------- .../CalendarGrid/CalendarGrid.module.scss | 94 ------------------- .../common/CalendarGrid/CalendarGrid.tsx | 47 ---------- .../CalendarGridCell.module.scss | 18 ---- .../CalendarGridCell/CalendarGridCell.tsx | 15 --- .../CourseDescription/CourseDescription.tsx | 91 ------------------ 9 files changed, 2 insertions(+), 407 deletions(-) delete mode 100644 src/stories/components/CalendarCourseCell.stories.tsx delete mode 100644 src/stories/components/CalendarGrid.stories.tsx delete mode 100644 src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx delete mode 100644 src/views/components/common/CalendarGrid/CalendarGrid.module.scss delete mode 100644 src/views/components/common/CalendarGrid/CalendarGrid.tsx delete mode 100644 src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss delete mode 100644 src/views/components/common/CalendarGridCell/CalendarGridCell.tsx delete mode 100644 src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx deleted file mode 100644 index d02fd60d..00000000 --- a/src/stories/components/CalendarCourseCell.stories.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { Course, Status } from '@shared/types/Course'; -import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting'; -import { CourseSchedule } from '@shared/types/CourseSchedule'; -import Instructor from '@shared/types/Instructor'; -import type { Meta, StoryObj } from '@storybook/react'; -import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell'; -import React from 'react'; - -const meta = { - title: 'Components/Common/CalendarCourseCell', - component: CalendarCourseCell, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - argTypes: { - course: { control: 'object' }, - meetingIdx: { control: 'number' }, - color: { control: 'color' }, - }, - render: (args: any) => ( -
- -
- ), -} satisfies Meta; -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - course: new Course({ - uniqueId: 123, - number: '311C', - fullName: "311C - Bevo's Default Course", - courseName: "Bevo's Default Course", - department: 'BVO', - creditHours: 3, - status: Status.WAITLISTED, - instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })], - isReserved: false, - url: '', - flags: [], - schedule: new CourseSchedule({ - meetings: [ - new CourseMeeting({ - days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F], - startTime: 480, - endTime: 570, - location: { - building: 'UTC', - room: '123', - }, - }), - ], - }), - instructionMode: 'In Person', - semester: { - year: 2024, - season: 'Spring', - }, - }), - meetingIdx: 0, - color: 'red', - }, -}; diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx deleted file mode 100644 index 24408ca0..00000000 --- a/src/stories/components/CalendarGrid.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -// Calendar.stories.tsx -import type { Meta, StoryObj } from '@storybook/react'; -import Calendar from '@views/components/common/CalendarGrid/CalendarGrid'; - -const meta = { - title: 'Components/Common/Calendar', - component: Calendar, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout - layout: 'centered', - tags: ['autodocs'], - } -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx index 5c42c3d3..341f3f18 100644 --- a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx +++ b/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx @@ -75,11 +75,9 @@ export default function CalendarCourseCell({ > {courseDeptAndInstr} - {meeting && ( + {timeAndLocation && ( - {`${meeting.getTimeString({ separator: '–', capitalize: true })}${ - meeting.location ? ` – ${meeting.location.building}` : '' - }`} + {timeAndLocation} )} diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx deleted file mode 100644 index 2b425435..00000000 --- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import type { Course } from '@shared/types/Course'; -import { Status } from '@shared/types/Course'; -import type { CourseMeeting } from '@shared/types/CourseMeeting'; -import React from 'react'; - -import ClosedIcon from '~icons/material-symbols/lock'; -import WaitlistIcon from '~icons/material-symbols/timelapse'; -import CancelledIcon from '~icons/material-symbols/warning'; - -import Text from '../Text/Text'; - -export interface CalendarCourseBlockProps { - /** The Course that the meeting is for. */ - course: Course; - /* index into course meeting array to display */ - meetingIdx?: number; - /** The background color for the course. */ - color: string; -} - -const CalendarCourseBlock: React.FC = ({ course, meetingIdx }: CalendarCourseBlockProps) => { - let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null; - let rightIcon: React.ReactNode | null = null; - if (course.status === Status.WAITLISTED) { - rightIcon = ; - } else if (course.status === Status.CLOSED) { - rightIcon = ; - } else if (course.status === Status.CANCELLED) { - rightIcon = ; - } - - return ( -
-
- - {course.department} {course.number} - {course.instructors[0].lastName} - - - {`${meeting.getTimeString({ separator: '–', capitalize: true })}${ - meeting.location ? ` – ${meeting.location.building}` : '' - }`} - -
- {rightIcon && ( -
- {rightIcon} -
- )} -
- ); -}; - -export default CalendarCourseBlock; diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss deleted file mode 100644 index a2e208a4..00000000 --- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss +++ /dev/null @@ -1,94 +0,0 @@ -@use 'sass:color'; -@use 'src/views/styles/colors.module.scss'; - -.dayLabelContainer { - display: flex; - flex-direction: row; - height: 13px; - min-width: 40px; - min-height: 13px; - padding-bottom: 15px; - justify-content: center; - align-items: center; - gap: 10px; - flex: 1 0 0; -} - -.calendarGrid { - display: grid; - grid-template-columns: repeat(5, 1fr); - grid-template-rows: repeat(13, 1fr); -} - -.calendarRow { - display: flex; -} - -.calendar { - // display: grid; - // grid-template-columns: auto repeat(5, 1fr); - gap: 10px; -} - -.day { - gap: 5px; - color: colors.$burnt_orange; - text-align: center; - font-size: 14.22px; - font-style: normal; - font-weight: 500; - line-height: normal; -} - -.timeAndGrid { - display: flex; -} - -.timeColumn { - display: flex; - min-height: 573px; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - flex: 1 0 0; - border-radius: var(--border-radius-none, 0px); -} - -.timeBlock { - display: flex; - width: 50px; - height: 40.279px; - min-width: 50px; - max-width: 50px; - min-height: 40px; - flex-direction: column; - align-items: flex-end; - - .timeLabelContainer { - display: flex; - max-height: 20px; - flex-direction: column; - align-items: flex-end; - gap: 17px; - flex: 1 0 0; - align-self: stretch; - border-radius: var(--border-radius-none, 0px); - } - - p { - color: #1A2024; - text-align: left; - height: 6.6px; - align-self: stretch; - margin-top: 0; - margin-bottom: 0; - - /* Type scale/small */ - font-family: "Roboto Flex"; - font-size: 14.22px; - font-style: normal; - font-weight: 500; - line-height: normal; - } -} - diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx deleted file mode 100644 index 0bc7e546..00000000 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { DAY_MAP } from '@shared/types/CourseMeeting'; -import React from 'react'; - -import CalendarCell from '../CalendarGridCell/CalendarGridCell'; -import styles from './CalendarGrid.module.scss'; - -const daysOfWeek = Object.values(DAY_MAP).filter(d => d !== 'Saturday' && d !== 'Sunday'); -const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8); -const grid = Array.from({ length: 5 }, () => - Array.from({ length: 13 }, (_, columnIndex) => ) -); - -/** - * Grid of CalendarGridCell components forming the user's course schedule calendar view - * @param props - */ -const Calendar: React.FC = props => ( -
-
- {/* Empty cell in the top-left corner */} -
- {/* Displaying day labels */} - {daysOfWeek.map(day => ( -
- {day} -
- ))} -
- {/* Displaying the rest of the calendar */} -
-
- {hoursOfDay.map(hour => ( -
-
-

- {hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'} -

-
-
- ))} -
-
{grid.map((row, rowIndex) => row)}
-
-
-); - -export default Calendar; diff --git a/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss b/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss deleted file mode 100644 index 47479d4d..00000000 --- a/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -.calendarCell { - display: flex; - width: 165px; - height: 52.231px; - min-width: 45px; - min-height: 40px; - flex-direction: column; - justify-content: center; - align-items: flex-start; - border: 1px solid #dadce0; -} - -.hourLine { - width: 165px; - height: 1px; - border-radius: var(--border-radius-none, 0px); - background: rgba(218, 220, 224, 0.25); -} diff --git a/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx b/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx deleted file mode 100644 index 347cd734..00000000 --- a/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; - -import styles from './CalendarGridCell.module.scss'; - -/** - * Component representing each 1 hour time block of a calendar - * @param props - */ -const CalendarCell: React.FC = props => ( -
-
-
-); - -export default CalendarCell; diff --git a/src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx b/src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx deleted file mode 100644 index c1eedc25..00000000 --- a/src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { Course } from '@shared/types/Course'; -import clsx from 'clsx'; -import React, { useEffect, useState } from 'react'; -import Spinner from '@views/components/common/Spinner/Spinner'; -import Text from '@views/components/common/Text/Text'; -import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper'; -import { SiteSupport } from '@views/lib/getSiteSupport'; -import Card from '../../../common/Card/Card'; -import styles from './CourseDescription.module.scss'; - -type Props = { - course: Course; -}; - -enum LoadStatus { - LOADING = 'LOADING', - DONE = 'DONE', - ERROR = 'ERROR', -} - -/** - * - */ -export default function CourseDescription({ course }: Props) { - const [description, setDescription] = useState([]); - const [status, setStatus] = useState(LoadStatus.LOADING); - - useEffect(() => { - fetchDescription(course) - .then(description => { - setStatus(LoadStatus.DONE); - setDescription(description); - }) - .catch(() => { - setStatus(LoadStatus.ERROR); - }); - }, [course]); - - return ( - - {status === LoadStatus.ERROR && ( - - Please refresh the page and log back in using your UT EID and password - - )} - {status === LoadStatus.LOADING && } - {status === LoadStatus.DONE && ( -
    - {description.map(paragraph => ( -
  • - -
    • - ))} -
- )} - - ); -} - -interface LineProps { - line: string; -} - -function DescriptionLine({ line }: LineProps) { - const lowerCaseLine = line.toLowerCase(); - - const className = clsx({ - [styles.prerequisite]: lowerCaseLine.includes('prerequisite'), - [styles.onlyOne]: - lowerCaseLine.includes('may be') || lowerCaseLine.includes('only one') || lowerCaseLine.includes('may not'), - [styles.restriction]: lowerCaseLine.includes('restrict'), - }); - - return ( - - {line} - - ); -} - -async function fetchDescription(course: Course): Promise { - if (!course.description?.length) { - const response = await fetch(course.url); - const text = await response.text(); - const doc = new DOMParser().parseFromString(text, 'text/html'); - - const scraper = new CourseCatalogScraper(SiteSupport.COURSE_CATALOG_DETAILS); - course.description = scraper.getDescription(doc); - } - return course.description; -}