chore: remove unused components
(and duplicated calendar components)
This commit is contained in:
Razboy20
@@ -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',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -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 = {};
|
|
||||||
@@ -75,11 +75,9 @@ export default function CalendarCourseCell({
|
|||||||
>
|
>
|
||||||
{courseDeptAndInstr}
|
{courseDeptAndInstr}
|
||||||
</Text>
|
</Text>
|
||||||
{meeting && (
|
{timeAndLocation && (
|
||||||
<Text variant='h3-course' className='-mb-0.5'>
|
<Text variant='h3-course' className='-mb-0.5'>
|
||||||
{`${meeting.getTimeString({ separator: '–', capitalize: true })}${
|
{timeAndLocation}
|
||||||
meeting.location ? ` – ${meeting.location.building}` : ''
|
|
||||||
}`}
|
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -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;
|
|
||||||
@@ -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);
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user