diff --git a/src/views/components/CourseCatalogMain.tsx b/src/views/components/CourseCatalogMain.tsx index 065d39bb3..2e6b3ad3d 100644 --- a/src/views/components/CourseCatalogMain.tsx +++ b/src/views/components/CourseCatalogMain.tsx @@ -8,12 +8,11 @@ import { SiteSupport } from '../lib/getSiteSupport'; import { populateSearchInputs } from '../lib/populateSearchInputs'; import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot'; import AutoLoad from './injected/AutoLoad/AutoLoad'; -import CoursePopup from './injected/CoursePopupOld/CoursePopup'; +import CourseCatalogInjectedPopup from './injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup'; import RecruitmentBanner from './injected/RecruitmentBanner/RecruitmentBanner'; import TableHead from './injected/TableHead'; import TableRow from './injected/TableRow/TableRow'; import TableSubheading from './injected/TableSubheading/TableSubheading'; -import CourseCatalogInjectedPopup from './injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup'; interface Props { support: SiteSupport.COURSE_CATALOG_DETAILS | SiteSupport.COURSE_CATALOG_LIST; diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx index 464d87d26..ea6548a6e 100644 --- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx +++ b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx @@ -1,32 +1,34 @@ -import React, { useState } from 'react'; import { Button } from '@views/components/common/Button/Button'; import { Chip, flagMap } from '@views/components/common/Chip/Chip'; import Divider from '@views/components/common/Divider/Divider'; import Text from '@views/components/common/Text/Text'; +import React, { useState } from 'react'; import addCourse from 'src/pages/background/lib/addCourse'; import removeCourse from 'src/pages/background/lib/removeCourse'; -import { openTabFromContentScript } from 'src/views/lib/openNewTabFromContentScript'; import { Course } from 'src/shared/types/Course'; +import Instructor from 'src/shared/types/Instructor'; import { UserSchedule } from 'src/shared/types/UserSchedule'; +import { openTabFromContentScript } from 'src/views/lib/openNewTabFromContentScript'; import Add from '~icons/material-symbols/add'; -import Remove from '~icons/material-symbols/remove'; import CalendarMonth from '~icons/material-symbols/calendar-month'; import CloseIcon from '~icons/material-symbols/close'; import Copy from '~icons/material-symbols/content-copy'; import Description from '~icons/material-symbols/description'; import Mood from '~icons/material-symbols/mood'; +import Remove from '~icons/material-symbols/remove'; import Reviews from '~icons/material-symbols/reviews'; interface HeadingAndActionProps { /* The course to display */ course: Course; /* The active schedule */ - activeSchedule: UserSchedule; + activeSchedule?: UserSchedule; /* The function to call when the popup should be closed */ onClose: () => void; } -export const handleOpenCalendar = async () => { // Not sure if it's bad practice to export this +export const handleOpenCalendar = async () => { + // Not sure if it's bad practice to export this const url = chrome.runtime.getURL('calendar.html'); await openTabFromContentScript(url); }; @@ -40,23 +42,26 @@ export const handleOpenCalendar = async () => { // Not sure if it's bad practic const HeadingAndActions: React.FC = ({ course, onClose, activeSchedule }) => { const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule } = course; const [courseAdded, setCourseAdded] = useState( - activeSchedule.courses.some(course => course.uniqueId === uniqueId) - ); + activeSchedule?.courses.some(course => course.uniqueId === uniqueId) + ); - const instructorString = instructors - .map(instructor => { - const { firstName, lastName } = instructor; - if (firstName === '') return lastName; - return `${firstName} ${lastName}`; - }) - .join(', '); + const capitalizeString = (str: string) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); + + const getInstructorFullName = (instructor: Instructor) => { + const { firstName, lastName } = instructor; + if (firstName === '') return lastName; + return `${capitalizeString(firstName)} ${capitalizeString(lastName)}`; + }; + + const instructorString = instructors.map(getInstructorFullName).join(', '); const handleCopy = () => { navigator.clipboard.writeText(uniqueId.toString()); }; const handleOpenRateMyProf = async () => { const openTabs = instructors.map(instructor => { - const { fullName } = instructor; - const url = `https://www.ratemyprofessors.com/search/professors/1255?q=${fullName}`; + const instructorSearchTerm = getInstructorFullName(instructor); + instructorSearchTerm.replace(' ', '+'); + const url = `https://www.ratemyprofessors.com/search/professors/1255?q=${instructorSearchTerm}`; return openTabFromContentScript(url); }); await Promise.all(openTabs); @@ -74,15 +79,14 @@ const HeadingAndActions: React.FC = ({ course, onClose, a const handleAddOrRemoveCourse = async () => { if (!courseAdded) { await addCourse(activeSchedule.name, course); - } - else { + } else { await removeCourse(activeSchedule.name, course); } setCourseAdded(!courseAdded); }; return (
-
+
{courseName} @@ -99,9 +103,11 @@ const HeadingAndActions: React.FC = ({ course, onClose, a
- - with {instructorString} - + {instructorString.length > 0 && ( + + with {instructorString} + + )}
{flags.map(flag => ( @@ -137,7 +143,12 @@ const HeadingAndActions: React.FC = ({ course, onClose, a -