lot of refactoring, reorganized course buttons. Now linking to professors directory page
This commit is contained in:
Sriram Hariharan
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@import 'src/views/styles/base.module.scss';
|
||||
.header {
|
||||
height: auto;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
margin: 20px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.uniqueId {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.instructors {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
24
src/views/components/injected/CoursePopup/CoursePopup.tsx
Normal file
24
src/views/components/injected/CoursePopup/CoursePopup.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { Course } from 'src/shared/types/Course';
|
||||
import Popup from '../../common/Popup/Popup';
|
||||
import CourseDescription from './CourseDescription/CourseDescription';
|
||||
import CourseHeader from './CourseHeader/CourseHeader';
|
||||
import styles from './CoursePopup.module.scss';
|
||||
|
||||
interface Props {
|
||||
course: Course;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* The popup that appears when the user clicks on a course for more details.
|
||||
*/
|
||||
export default function CoursePopup({ course, onClose }: Props) {
|
||||
console.log(course);
|
||||
return (
|
||||
<Popup className={styles.popup} overlay onClose={onClose}>
|
||||
<CourseHeader course={course} onClose={onClose} />
|
||||
<CourseDescription course={course} />
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user