lot of refactoring, reorganized course buttons. Now linking to professors directory page

This commit is contained in:
Sriram Hariharan
2023-03-07 21:49:41 -06:00
parent 04a82fb6a6
commit 353c43c987
26 changed files with 556 additions and 311 deletions

View File

@@ -9,7 +9,7 @@ import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
import Icon from './common/Icon/Icon';
import Text from './common/Text/Text';
import AutoLoad from './injected/AutoLoad/AutoLoad';
import CourseInfoPopup from './injected/CourseInfoPopup/CourseInfoPopup';
import CoursePopup from './injected/CoursePopup/CoursePopup';
import TableHead from './injected/TableHead';
import TableRow from './injected/TableRow/TableRow';
@@ -69,7 +69,7 @@ export default function CourseCatalogMain({ support }: Props) {
/>
);
})}
{selectedCourse && <CourseInfoPopup course={selectedCourse} onClose={handleClearSelectedCourse} />}
{selectedCourse && <CoursePopup course={selectedCourse} onClose={handleClearSelectedCourse} />}
<AutoLoad addRows={addRows} />
</ExtensionRoot>
);

View File

@@ -9,8 +9,6 @@
border: none;
box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.2s ease-in-out;
font-family: 'Inter';

View File

@@ -21,6 +21,7 @@ export default function Link(props: PropsWithChildren<Props>) {
if (url && !props.onClick) {
passedProps.onClick = () => bMessenger.openNewTab({ url });
}
const isDisabled = props.disabled || (!url && !props.onClick);
return (
<Text
@@ -28,7 +29,7 @@ export default function Link(props: PropsWithChildren<Props>) {
className={classNames(
styles.link,
{
[styles.disabled]: props.disabled,
[styles.disabled]: isDisabled,
},
props.className
)}

View File

@@ -1,14 +1,16 @@
import classNames from 'classnames';
import React from 'react';
import { Color } from 'src/views/styles/colors.module.scss';
import styles from './Spinner.module.scss';
type Props = {
color?: Color;
testId?: string;
className?: string;
style?: React.CSSProperties;
};
/**
* A simple spinner component that can be used to indicate loading.
*/
export default function Spinner({ color }: Props) {
return <div className={styles.spinner} />;
export default function Spinner({ className, testId, style }: Props) {
return <div data-testId={testId} style={style} className={classNames(styles.spinner, className)} />;
}

View File

@@ -1,3 +1,80 @@
@import "src/views/styles/base.module.scss";
.text {
font-family: 'Inter', sans-serif;
color: $charcoal;
}
.light_weight {
font-weight: $light_weight;
}
.regular_weight {
font-weight: $regular_weight;
}
.normal_weight {
font-weight: $normal_weight;
}
.semi_bold_weight {
font-weight: $semi_bold_weight;
}
.bold_weight {
font-weight: $bold_weight;
}
.black_weight {
font-weight: $black_weight;
}
.x_small_size {
font-size: $x_small_size;
}
.small_size {
font-size: $small_size;
}
.medium_size {
font-size: $medium_size;
}
.large_size {
font-size: $large_size;
}
.x_large_size {
font-size: $x_large_size;
}
.xx_large_size {
font-size: $xx_large_size;
}
.x_small_line_height {
line-height: $x_small_line_height;
}
.small_line_height {
line-height: $small_line_height;
}
.medium_line_height {
line-height: $medium_line_height;
}
.large_line_height {
line-height: $large_line_height;
}
.x_large_line_height {
line-height: $x_large_line_height;
}
.xx_large_line_height {
line-height: $xx_large_line_height;
}

View File

@@ -19,24 +19,35 @@ export type TextProps = {
* A reusable Text component with props that build on top of the design system for the extension
*/
export default function Text(props: PropsWithChildren<TextProps>) {
const style = props.style || {};
const style: React.CSSProperties = {
...props.style,
textAlign: props.align,
color: props.color ? colors[props.color] : undefined,
};
style.textAlign ??= props.align;
style.color ??= colors?.[props.color ?? 'charcoal'];
style.fontSize ??= fonts?.[`${props.size ?? 'medium'}_size`];
style.fontWeight ??= fonts?.[`${props.weight ?? 'regular'}_weight`];
style.lineHeight ??= fonts?.[`${props.size ?? 'medium'}_line_height`];
const weightClass = `${props.weight ?? 'regular'}_weight`;
const fontSizeClass = `${props.size ?? 'medium'}_size`;
const lineHightClass = `${props.size ?? 'medium'}_line_height`;
const className = classNames(
styles.text,
props.className,
styles[weightClass],
styles[fontSizeClass],
styles[lineHightClass]
);
if (props.span) {
return (
<span className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
<span className={className} style={style} onClick={props.onClick}>
{props.children}
</span>
);
}
return (
<div className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
<div className={className} style={style} onClick={props.onClick}>
{props.children}
</div>
);

View File

@@ -4,7 +4,11 @@ import { ScrapedRow } from 'src/shared/types/Course';
import useInfiniteScroll from 'src/views/hooks/useInfiniteScroll';
import { CourseCatalogScraper } from 'src/views/lib/CourseCatalogScraper';
import { SiteSupport } from 'src/views/lib/getSiteSupport';
import { loadNextCourseCatalogPage, AutoLoadStatus } from 'src/views/lib/loadNextCourseCatalogPage';
import {
loadNextCourseCatalogPage,
AutoLoadStatus,
removePaginationButtons,
} from 'src/views/lib/loadNextCourseCatalogPage';
import Spinner from '../../common/Spinner/Spinner';
import styles from './AutoLoad.module.scss';
@@ -27,9 +31,10 @@ export default function AutoLoad({ addRows }: Props) {
setContainer(portalContainer);
}, []);
// FOR DEBUGGING
useEffect(() => {
removePaginationButtons(document);
console.log(`AutoLoad is now ${status}`);
// FOR DEBUGGING
}, [status]);
// This hook will call the callback when the user scrolls to the bottom of the page.

View File

@@ -1,6 +0,0 @@
@import 'src/views/styles/base.module.scss';
.descriptionContainer {
margin: 12px;
padding: 12px;
}

View File

@@ -1,45 +0,0 @@
import React, { useEffect } from 'react';
import { Course } from 'src/shared/types/Course';
import Text from 'src/views/components/common/Text/Text';
import { CourseCatalogScraper } from 'src/views/lib/CourseCatalogScraper';
import { SiteSupport } from 'src/views/lib/getSiteSupport';
import Card from '../../../common/Card/Card';
import styles from './CourseInfoDescription.module.scss';
type Props = {
course: Course;
};
export default function CourseInfoDescription({ course }: Props) {
const [description, setDescription] = React.useState<string[]>([]);
useEffect(() => {
fetchDescription(course).then(description => {
setDescription(description);
});
}, [course]);
if (!description.length) {
return null;
}
return (
<Card className={styles.descriptionContainer}>
{description.map((paragraph, i) => (
<Text size='medium'>{paragraph}</Text>
))}
</Card>
);
}
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;
}

View File

@@ -1,150 +0,0 @@
import React from 'react';
import { bMessenger } from 'src/shared/messages';
import { Course } from 'src/shared/types/Course';
import { Button } from 'src/views/components/common/Button/Button';
import Card from 'src/views/components/common/Card/Card';
import Icon from 'src/views/components/common/Icon/Icon';
import Link from 'src/views/components/common/Link/Link';
import Text from 'src/views/components/common/Text/Text';
import styles from './CourseInfoHeader.module.scss';
type Props = {
course: Course;
onClose: () => void;
};
/**
* This component displays the header of the course info popup.
* It displays the course name, unique id, instructors, and schedule, all formatted nicely.
*/
export default function CourseInfoHeader({ course, onClose }: Props) {
const getBuildingUrl = (building?: string): string | undefined => {
if (!building) return undefined;
return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
};
const openRateMyProfessorURL = () => {
const name = course.getInstructorString({
format: 'first_last',
max: 1,
});
const url = new URL('https://www.ratemyprofessors.com/search.jsp');
url.searchParams.append('queryBy', 'teacherName');
url.searchParams.append('schoolName', 'university of texas at austin');
url.searchParams.append('queryoption', 'HEADER');
url.searchParams.append('query', name);
url.searchParams.append('facetSearch', 'true');
bMessenger.openNewTab({ url: url.toString() });
};
const openECISURL = () => {
// TODO: Figure out how to get the ECIS URL, the old one doesn't work anymore
// http://utdirect.utexas.edu/ctl/ecis/results/index.WBX?&s_in_action_sw=S&s_in_search_type_sw=N&s_in_search_name=${prof_name}%2C%20${first_name}
// const name = course.getInstructorString({
};
const openSyllabiURL = () => {
// https://utdirect.utexas.edu/apps/student/coursedocs/nlogon/?year=&semester=&department=${department}&course_number=${number}&course_title=&unique=&instructor_first=&instructor_last=${prof_name}&course_type=In+Residence&search=Search
const { department, number } = course;
const { firstName, lastName } = course.instructors?.[0] ?? {};
const url = new URL('https://utdirect.utexas.edu/apps/student/coursedocs/nlogon/');
url.searchParams.append('department', department);
url.searchParams.append('course_number', number);
url.searchParams.append('instructor_first', firstName ?? '');
url.searchParams.append('instructor_last', lastName ?? '');
url.searchParams.append('course_type', 'In Residence');
url.searchParams.append('search', 'Search');
bMessenger.openNewTab({ url: url.toString() });
};
return (
<Card className={styles.header}>
<Icon className={styles.close} size='large' name='close' onClick={onClose} />
<Text className={styles.title} size='large' weight='bold' color='black'>
{course.courseName} ({course.department} {course.number})
<Link
span
url={course.url}
className={styles.uniqueId}
size='medium'
weight='semi_bold'
color='burnt_orange'
>
#{course.uniqueId}
</Link>
</Text>
<Text size='medium' className={styles.instructors}>
{course.getInstructorString({
prefix: 'with ',
format: 'first_last',
})}
</Text>
{course.schedule.meetings.map(meeting => (
<Text size='medium'>
<Text span size='medium' weight='bold' color='black'>
{meeting.getDaysString({
format: 'long',
separator: 'short',
})}
</Text>
{' at '}
<Text span size='medium'>
{meeting.getTimeString({
separator: 'to',
capitalize: true,
})}
</Text>
{' in '}
<Link
span
size='medium'
weight='normal'
color='bluebonnet'
url={getBuildingUrl(meeting.location?.building)}
disabled={!meeting.location?.building}
>
{meeting.location?.building ?? 'TBA'}
</Link>
</Text>
))}
<Card className={styles.buttonContainer}>
<Button
disabled={!course.instructors.length}
type='primary'
className={styles.button}
onClick={openRateMyProfessorURL}
>
<Text size='medium' weight='regular' color='white'>
RateMyProf
</Text>
<Icon className={styles.icon} color='white' name='school' size='medium' />
</Button>
<Button type='secondary' className={styles.button} onClick={openSyllabiURL}>
<Text size='medium' weight='regular' color='white'>
Syllabi
</Text>
<Icon className={styles.icon} color='white' name='grading' size='medium' />
</Button>
<Button type='tertiary' className={styles.button}>
<Text size='medium' weight='regular' color='white'>
Textbook
</Text>
<Icon className={styles.icon} color='white' name='collections_bookmark' size='medium' />
</Button>
<Button type='success' className={styles.button}>
<Text size='medium' weight='regular' color='white'>
Save
</Text>
<Icon className={styles.icon} color='white' name='add' size='medium' />
</Button>
</Card>
</Card>
);
}

View File

@@ -1,7 +0,0 @@
.popup {
border-radius: 12px;
position: relative;
max-width: 50%;
overflow-y: auto;
max-height: 80%;
}

View File

@@ -0,0 +1,27 @@
@import 'src/views/styles/base.module.scss';
.container {
margin: 20px;
padding: 12px;
.description {
list-style-type: disc;
margin: 0px;
padding-left: 20px;
li {
padding: 0px 4px 4px;
.prerequisite {
font-weight: bold;
}
.onlyOne {
font-style: italic;
}
.restriction {
color: $speedway_brick;
}
}
}
}

View File

@@ -0,0 +1,90 @@
import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
import { Course } from 'src/shared/types/Course';
import Spinner from 'src/views/components/common/Spinner/Spinner';
import Text from 'src/views/components/common/Text/Text';
import { CourseCatalogScraper } from 'src/views/lib/CourseCatalogScraper';
import { SiteSupport } from 'src/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>
<DescriptionLine key={paragraph} line={paragraph} />
</li>
))}
</ul>
)}
</Card>
);
}
interface LineProps {
line: string;
}
function DescriptionLine({ line }: LineProps) {
const lowerCaseLine = line.toLowerCase();
const className = classNames({
[styles.prerequisite]: lowerCaseLine.includes('prerequisite'),
[styles.onlyOne]:
lowerCaseLine.includes('may be') ||
lowerCaseLine.includes('only one') ||
lowerCaseLine.includes('may not be'),
[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;
}

View File

@@ -0,0 +1,17 @@
@import 'src/views/styles/base.module.scss';
.container {
margin: 12px 4px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
.button {
flex: 1;
}
.icon {
margin: 4px;
}
}

View File

@@ -0,0 +1,89 @@
import React from 'react';
import { bMessenger } from 'src/shared/messages';
import { Course } from 'src/shared/types/Course';
import { Button } from 'src/views/components/common/Button/Button';
import Card from 'src/views/components/common/Card/Card';
import Icon from 'src/views/components/common/Icon/Icon';
import Text from 'src/views/components/common/Text/Text';
import styles from './CourseButtons.module.scss';
type Props = {
course: Course;
};
const { openNewTab } = bMessenger;
/**
* This component displays the buttons for the course info popup, that allow the user to either
* navigate to other pages that are useful for the course, or to do actions on the current course.
*/
export default function CourseButtons({ course }: Props) {
const openRateMyProfessorURL = () => {
const primaryInstructor = course.instructors?.[0];
if (!primaryInstructor) return;
const name = primaryInstructor.toString({
format: 'first_last',
case: 'capitalize',
});
const url = new URL('https://www.ratemyprofessors.com/search.jsp');
url.searchParams.append('queryBy', 'teacherName');
url.searchParams.append('schoolName', 'university of texas at austin');
url.searchParams.append('queryoption', 'HEADER');
url.searchParams.append('query', name);
url.searchParams.append('facetSearch', 'true');
openNewTab({ url: url.toString() });
};
const openSyllabiURL = () => {
const { department, number } = course;
const { firstName, lastName } = course.instructors?.[0] ?? {};
const url = new URL('https://utdirect.utexas.edu/apps/student/coursedocs/nlogon/');
url.searchParams.append('department', department);
url.searchParams.append('course_number', number);
url.searchParams.append('instructor_first', firstName ?? '');
url.searchParams.append('instructor_last', lastName ?? '');
url.searchParams.append('course_type', 'In Residence');
url.searchParams.append('search', 'Search');
openNewTab({ url: url.toString() });
};
return (
<Card className={styles.container}>
<Button
onClick={openRateMyProfessorURL}
disabled={!course.instructors.length}
type='primary'
className={styles.button}
>
<Text size='medium' weight='regular' color='white'>
RateMyProf
</Text>
<Icon className={styles.icon} color='white' name='school' size='medium' />
</Button>
<Button onClick={openSyllabiURL} type='secondary' className={styles.button}>
<Text size='medium' weight='regular' color='white'>
Syllabi
</Text>
<Icon className={styles.icon} color='white' name='grading' size='medium' />
</Button>
<Button type='tertiary' className={styles.button}>
<Text size='medium' weight='regular' color='white'>
Textbook
</Text>
<Icon className={styles.icon} color='white' name='collections_bookmark' size='medium' />
</Button>
<Button type='success' className={styles.button}>
<Text size='medium' weight='regular' color='white'>
Save
</Text>
<Icon className={styles.icon} color='white' name='add' size='medium' />
</Button>
</Card>
);
}

View File

@@ -27,19 +27,4 @@
.instructors {
margin-top: 8px;
}
.buttonContainer {
margin: 12px 4px;
display: flex;
align-items: center;
justify-content: center;
.button {
flex: 1;
}
.icon {
margin: 4px;
}
}
}

View File

@@ -0,0 +1,96 @@
import React from 'react';
import { Course } from 'src/shared/types/Course';
import Card from 'src/views/components/common/Card/Card';
import Icon from 'src/views/components/common/Icon/Icon';
import Link from 'src/views/components/common/Link/Link';
import Text from 'src/views/components/common/Text/Text';
import CourseButtons from './CourseButtons/CourseButtons';
import styles from './CourseHeader.module.scss';
type Props = {
course: Course;
onClose: () => void;
};
/**
* This component displays the header of the course info popup.
* It displays the course name, unique id, instructors, and schedule, all formatted nicely.
*/
export default function CourseHeader({ course, onClose }: Props) {
const getBuildingUrl = (building?: string): string | undefined => {
if (!building) return undefined;
return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
};
return (
<Card className={styles.header}>
<Icon className={styles.close} size='large' name='close' onClick={onClose} />
<Text className={styles.title} size='medium' weight='bold' color='black'>
{course.courseName} ({course.department} {course.number})
<Link
span
url={course.url}
className={styles.uniqueId}
size='medium'
weight='semi_bold'
color='burnt_orange'
>
#{course.uniqueId}
</Link>
</Text>
<Text size='medium' className={styles.instructors}>
{`with ${!course.instructors.length ? 'TBA' : ''}`}
{course.instructors.map((instructor, index) => {
const name = instructor.toString({
format: 'first_last',
case: 'capitalize',
});
const url = instructor.getDirectoryUrl();
const numInstructors = course.instructors.length;
const isLast = course.instructors.length > 1 && index === course.instructors.length - 1;
return (
<>
{numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
<Link key={name} span size='medium' weight='semi_bold' color='bluebonnet' url={url}>
{name}
</Link>
{numInstructors > 2 && !isLast ? ', ' : ''}
</>
);
})}
</Text>
{course.schedule.meetings.map(meeting => (
<Text size='medium'>
<Text span size='medium' weight='bold' color='black'>
{meeting.getDaysString({
format: 'long',
separator: 'short',
})}
</Text>
{' at '}
<Text span size='medium'>
{meeting.getTimeString({
separator: 'to',
capitalize: true,
})}
</Text>
{' in '}
<Link
span
size='medium'
weight='normal'
color='bluebonnet'
url={getBuildingUrl(meeting.location?.building)}
disabled={!meeting.location?.building}
>
{meeting.location?.building ?? 'TBA'}
</Link>
</Text>
))}
<CourseButtons course={course} />
</Card>
);
}

View File

@@ -0,0 +1,21 @@
.popup {
border-radius: 12px;
position: relative;
max-width: 50%;
overflow-y: auto;
max-height: 80%;
// fade in animation
animation: fadeIn 0.2s ease-out;
}
// fade in animation
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

View File

@@ -1,9 +1,9 @@
import React from 'react';
import { Course } from 'src/shared/types/Course';
import Popup from '../../common/Popup/Popup';
import CourseInfoDescription from './CourseInfoDescription/CourseInfoDescription';
import CourseInfoHeader from './CourseInfoHeader/CourseInfoHeader';
import styles from './CourseInfoPopup.module.scss';
import CourseDescription from './CourseDescription/CourseDescription';
import CourseHeader from './CourseHeader/CourseHeader';
import styles from './CoursePopup.module.scss';
interface Props {
course: Course;
@@ -13,12 +13,12 @@ interface Props {
/**
* The popup that appears when the user clicks on a course for more details.
*/
export default function CourseInfoPopup({ course, onClose }: Props) {
export default function CoursePopup({ course, onClose }: Props) {
console.log(course);
return (
<Popup className={styles.popup} overlay onClose={onClose}>
<CourseInfoHeader course={course} onClose={onClose} />
<CourseInfoDescription course={course} />
<CourseHeader course={course} onClose={onClose} />
<CourseDescription course={course} />
</Popup>
);
}

View File

@@ -1,12 +1,13 @@
@import 'src/views/styles/base.module.scss';
.rowButton {
margin: 2px;
margin: 0px;
}
.selectedRow {
* {
background: $burnt_orange !important;
color: white !important;
box-shadow: none !important;
}
}

View File

@@ -1,5 +1,7 @@
import { Course, Instructor, Status, InstructionMode, ScrapedRow } from 'src/shared/types/Course';
import { Serialized } from 'chrome-extension-toolkit';
import { Course, Status, InstructionMode, ScrapedRow } from 'src/shared/types/Course';
import { CourseSchedule } from 'src/shared/types/CourseSchedule';
import Instructor from 'src/shared/types/Instructor';
import { SiteSupport } from 'src/views/lib/getSiteSupport';
/**
@@ -92,7 +94,7 @@ export class CourseCatalogScraper {
flags: this.getFlags(row),
uniqueId: this.getUniqueId(row),
instructionMode: this.getInstructionMode(row),
instructors: this.getInstructors(row),
instructors: this.getInstructors(row) as Instructor[],
description: this.getDescription(document),
// TODO: get semester from somewhere
semester: {
@@ -163,12 +165,12 @@ export class CourseCatalogScraper {
const [lastName, rest] = fullName.split(',').map(s => s.trim());
const [firstName, middleInitial] = rest.split(' ');
return {
return new Instructor({
fullName,
firstName,
lastName,
middleInitial,
};
});
});
}

View File

@@ -58,5 +58,4 @@ $xx_large_line_height: 52px;
large_line_height: $large_line_height;
x_large_line_height: $x_large_line_height;
xx_large_line_height: $xx_large_line_height;
}