lot of refactoring, reorganized course buttons. Now linking to professors directory page
This commit is contained in:
Sriram Hariharan
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user