DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: remove unused components

Browse Source 
(and duplicated calendar components)
This commit is contained in:
Razboy20
2024-03-07 18:03:39 -06:00
parent 2992e784b0
commit 346b9ced97
9 changed files with 2 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/stories/components/CalendarCourseCell.stories.tsx
View File

@@ -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) => (
<div className='w-45'>
<CalendarCourseCell {...args} />
</div>
),
} satisfies Meta<typeof CalendarCourseCell>;
export default meta;
type Story = StoryObj<typeof meta>;
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',
},
};

18
src/stories/components/CalendarGrid.stories.tsx
View File

@@ -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<typeof Calendar>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};

6
src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
View File

@@ -75,11 +75,9 @@ export default function CalendarCourseCell({
>
{courseDeptAndInstr}
</Text>
{meeting && (
{timeAndLocation && (
<Text variant='h3-course' className='-mb-0.5'>
{`${meeting.getTimeString({ separator: '–', capitalize: true })}${
meeting.location ? ` – ${meeting.location.building}` : ''
}`}
{timeAndLocation}
</Text>
)}
</div>

53
src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
View File

@@ -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<CalendarCourseBlockProps> = ({ 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 = <WaitlistIcon className='h-5 w-5' />;
} else if (course.status === Status.CLOSED) {
rightIcon = <ClosedIcon className='h-5 w-5' />;
} else if (course.status === Status.CANCELLED) {
rightIcon = <CancelledIcon className='h-5 w-5' />;
}
return (
<div className='w-full flex justify-center rounded bg-slate-300 p-2 text-ut-black'>
<div className='flex flex-1 flex-col gap-1'>
<Text variant='h1-course' className='leading-[75%]!'>
{course.department} {course.number} - {course.instructors[0].lastName}
</Text>
<Text variant='h3-course' className='leading-[75%]!'>
{`${meeting.getTimeString({ separator: '–', capitalize: true })}${
meeting.location ? ` – ${meeting.location.building}` : ''
}`}
</Text>
</div>
{rightIcon && (
<div className='h-fit flex items-center justify-center justify-self-start rounded bg-slate-700 p-0.5 text-white'>
{rightIcon}
</div>
)}
</div>
);
};
export default CalendarCourseBlock;

94
src/views/components/common/CalendarGrid/CalendarGrid.module.scss
View File

@@ -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;
}
}

47
src/views/components/common/CalendarGrid/CalendarGrid.tsx
View File

@@ -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) => <CalendarCell key={columnIndex} />)
);
/**
* Grid of CalendarGridCell components forming the user's course schedule calendar view
* @param props
*/
const Calendar: React.FC = props => (
<div className={styles.calendar}>
<div className={styles.dayLabelContainer}>
{/* Empty cell in the top-left corner */}
<div className={styles.day} />
{/* Displaying day labels */}
{daysOfWeek.map(day => (
<div key={day} className={styles.day}>
{day}
</div>
))}
</div>
{/* Displaying the rest of the calendar */}
<div className={styles.timeAndGrid}>
<div className={styles.timeColumn}>
{hoursOfDay.map(hour => (
<div key={hour} className={styles.timeBlock}>
<div className={styles.timeLabelContainer}>
<p>
{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}
</p>
</div>
</div>
))}
</div>
<div className={styles.calendarGrid}>{grid.map((row, rowIndex) => row)}</div>
</div>
</div>
);
export default Calendar;

18
src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss
View File

@@ -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);
}

15
src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
View File

@@ -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 => (
<div className={styles.calendarCell}>
<div className={styles.hourLine} />
</div>
);
export default CalendarCell;

91
src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx
View File

@@ -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<string[]>([]);
const [status, setStatus] = useState<LoadStatus>(LoadStatus.LOADING);
useEffect(() => {
fetchDescription(course)
.then(description => {
setStatus(LoadStatus.DONE);
setDescription(description);
})
.catch(() => {
setStatus(LoadStatus.ERROR);
});
}, [course]);
return (
<Card className={styles.container}>
{status === LoadStatus.ERROR && (
<Text color='speedway_brick' size='medium' weight='bold' align='center'>
Please refresh the page and log back in using your UT EID and password
</Text>
)}
{status === LoadStatus.LOADING && <Spinner className={styles.spinner} />}
{status === LoadStatus.DONE && (
<ul className={styles.description}>
{description.map(paragraph => (
<li key={paragraph}>
<DescriptionLine line={paragraph} />
</li>
))}
</ul>
)}
</Card>
);
}
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 (
<Text className={className} size='medium'>
{line}
</Text>
);
}
async function fetchDescription(course: Course): Promise<string[]> {
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;
}