bunch of refactor and styling changes, coming along nicely

src/background/handler/tabManagementHandler.ts

@@ -1,13 +1,15 @@
 import { MessageHandler } from 'chrome-extension-toolkit';
 import TabManagementMessages from 'src/shared/messages/TabManagementMessages';
+import openNewTab from '../util/openNewTab';
 
 const tabManagementHandler: MessageHandler<TabManagementMessages> = {
     getTabId({ sendResponse, sender }) {
         sendResponse(sender.tab?.id ?? -1);
     },
-    openNewTab({ data, sendResponse }) {
+    openNewTab({ data, sender, sendResponse }) {
         const { url } = data;
-        chrome.tabs.create({ url }).then(sendResponse);
+        const nextIndex = sender.tab?.index ? sender.tab.index + 1 : undefined;
+        openNewTab(url, nextIndex).then(sendResponse);
     },
     removeTab({ data, sendResponse }) {
         const { tabId } = data;

src/background/util/openNewTab.ts

@@ -0,0 +1,10 @@
+/**
+ * This is a helper function that opens a new tab in the current window, and focuses the window
+ * @param tabIndex - the index of the tab to open the new tab at (optional)
+ * @returns the tab that was opened
+ */
+export default async function openNewTab(url: string, tabIndex?: number): Promise<chrome.tabs.Tab> {
+    const tab = await chrome.tabs.create({ url, index: tabIndex, active: true });
+    await chrome.windows.update(tab.windowId, { focused: true });
+    return tab;
+}

src/shared/types/Course.ts

@@ -1,4 +1,5 @@
 import { Serialized } from 'chrome-extension-toolkit';
+import { capitalize } from '../util/string';
 import { CourseSchedule } from './CourseSchedule';
 
 /**
@@ -7,8 +8,8 @@ import { CourseSchedule } from './CourseSchedule';
  */
 export type Instructor = {
     fullName: string;
-    firstName?: string;
+    firstName: string;
-    lastName?: string;
+    lastName: string;
     middleInitial?: string;
 };
 
@@ -77,6 +78,8 @@ export class Course {
         this.schedule = new CourseSchedule(course.schedule);
     }
 
+
+
     /**
      * Get a string representation of the instructors for this course
      * @param options - the options for how to format the instructor string
@@ -85,35 +88,25 @@ export class Course {
     getInstructorString(options: InstructorFormatOptions): string {
         const { max = 3, format, prefix = '' } = options;
         if (!this.instructors.length) {
-            return `${prefix} Undecided`;
+            return `${prefix} TBA`;
         }
 
         const instructors = this.instructors.slice(0, max);
-        switch (format) {
+
-            case 'abbr':
+        if (format === 'abbr') {
-                return (
+            return prefix + instructors.map(i => `${capitalize(i.firstName[0])}. ${capitalize(i.lastName)}`).join(', ');
-                    prefix +
-                    instructors
-                        .map(instructor => {
-                            let firstInitial = instructor.firstName?.[0];
-                            if (firstInitial) {
-                                firstInitial += '. ';
-                            }
-                            return `${firstInitial}${instructor.lastName}`;
-                        })
-                        .join(', ')
-                );
-            case 'full_name':
-                return prefix + instructors.map(instructor => instructor.fullName).join(', ');
-            case 'first_last':
-                return (
-                    prefix + instructors.map(instructor => `${instructor.firstName} ${instructor.lastName}`).join(', ')
-                );
-            case 'last':
-                return prefix + instructors.map(instructor => instructor.lastName).join(', ');
-            default:
-                throw new Error(`Invalid Instructor String format: ${format}`);
         }
+        if (format === 'full_name') {
+            return prefix + instructors.map(i => capitalize(i.fullName)).join(', ');
+        }
+        if (format === 'first_last') {
+            return prefix + instructors.map(i => `${capitalize(i.firstName)} ${capitalize(i.lastName)}`).join(', ');
+        }
+        if (format === 'last') {
+            return prefix + instructors.map(i => i.lastName).join(', ');
+        }
+
+        throw new Error(`Invalid Instructor String format: ${format}`);
     }
 }
 

src/shared/util/string.ts

@@ -3,11 +3,22 @@
  * @input The string to capitalize.
  */
 export function capitalize(input: string): string {
-    try {
+    let capitalized = '';
-        return input.charAt(0).toUpperCase() + input.substring(1).toLowerCase();
+
-    } catch (err) {
+    const words = input.split(' ');
-        return input;
+    for (const word of words) {
+        if (word.includes('-')) {
+            const hyphenatedWords = word.split('-');
+            for (const hyphenatedWord of hyphenatedWords) {
+                capitalized += `${capitalizeFirstLetter(hyphenatedWord)}-`;
+            }
+            capitalized = capitalized.substring(0, capitalized.length - 1);
+        } else {
+            capitalized += capitalizeFirstLetter(word);
+        }
+        capitalized += ' ';
     }
+    return capitalized;
 }
 
 /**
@@ -16,7 +27,7 @@ export function capitalize(input: string): string {
  * @returns the string with the first letter capitalized
  */
 export function capitalizeFirstLetter(input: string): string {
-    return input.charAt(0).toUpperCase() + input.slice(1);
+    return input.charAt(0).toUpperCase() + input.slice(1).toLowerCase();
 }
 
 /**

src/views/components/CourseCatalogMain.tsx

@@ -54,10 +54,7 @@ export default function CourseCatalogMain({ support }: Props) {
 
     return (
         <ExtensionRoot>
-            <TableHead>
+            <TableHead>Plus</TableHead>
-                Plus
-                <Icon name='add' />
-            </TableHead>
             {rows.map(row => {
                 if (!row.course) {
                     // TODO: handle the course section headers

src/views/components/common/Button/Button.module.scss

@@ -4,12 +4,14 @@
     background-color: #000;
     color: #fff;
     padding: 10px;
-    border-radius: 5px;
+    margin: 10px;
+    border-radius: 8px;
     border: none;
+    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px;
     cursor: pointer;
     font-size: 16px;
     font-weight: 600;
-    transition: all 0.3s ease;
+    transition: all 0.2s ease-in-out;
     font-family: 'Inter';
 
     display: flex;
@@ -21,6 +23,10 @@
         color: #000;
     }
 
+    &:active {
+        animation: click_animation 0.2s ease-in-out;
+    }
+
     &.disabled {
         cursor: not-allowed !important;
         opacity: 0.5 !important;
@@ -30,10 +36,6 @@
         }
     }
 
-    &:active {
-        animation: click_animation 0.5s ease-in-out;
-    }
-
     @each $color,
         $value
             in (

src/views/components/common/Card/Card.module.scss

@@ -2,7 +2,9 @@
 
 .card {
     background: $white;
-    border: 1px solid #c3cee0;
+    border: 0.5px dotted #c3cee0;
     box-sizing: border-box;
+
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
 }

src/views/components/injected/AutoLoad/AutoLoad.tsx

@@ -42,7 +42,7 @@ export default function AutoLoad({ addRows }: Props) {
         }
         // scrape the courses from the page
         const ccs = new CourseCatalogScraper(SiteSupport.COURSE_CATALOG_LIST);
-        const scrapedRows = ccs.scrape(nextRows, true);
+        const scrapedRows = await ccs.scrape(nextRows, true);
 
         // add the scraped courses to the current page
         addRows(scrapedRows);

src/views/components/injected/CourseInfoPopup/CourseInfoDescription/CourseInfoDescription.module.scss

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

src/views/components/injected/CourseInfoPopup/CourseInfoDescription/CourseInfoDescription.tsx

@@ -0,0 +1,45 @@
+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;
+}

src/views/components/injected/CourseInfoPopup/CourseInfoHeader/CourseInfoHeader.module.scss

@@ -3,14 +3,21 @@
     height: auto;
     color: white;
     padding: 12px;
-    margin: 50px 20px;
+    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;
-        justify-content: center;
 
         .uniqueId {
             margin-left: 8px;
@@ -20,4 +27,19 @@
     .instructors {
         margin-top: 8px;
     }
+
+    .buttonContainer {
+        margin: 12px 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .button {
+            flex: 1;
+        }
+
+        .icon {
+            margin: 4px;
+        }
+    }
 }

src/views/components/injected/CourseInfoPopup/CourseInfoHeader/CourseInfoHeader.tsx

@@ -1,27 +1,70 @@
 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 }: Props) {
+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
@@ -70,6 +113,38 @@ export default function CourseInfoHeader({ course }: Props) {
                     </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>
     );
 }

src/views/components/injected/CourseInfoPopup/CourseInfoPopup.module.scss

@@ -1,11 +1,7 @@
 .popup {
     border-radius: 12px;
     position: relative;
-
+    max-width: 50%;
-    .close {
+    overflow-y: auto;
-        position: absolute;
+    max-height: 80%;
-        top: 12px;
-        right: 12px;
-        cursor: pointer;
-    }
 }

src/views/components/injected/CourseInfoPopup/CourseInfoPopup.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { Course } from 'src/shared/types/Course';
-import Card from '../../common/Card/Card';
-import Icon from '../../common/Icon/Icon';
-import Link from '../../common/Link/Link';
 import Popup from '../../common/Popup/Popup';
-import Text from '../../common/Text/Text';
+import CourseInfoDescription from './CourseInfoDescription/CourseInfoDescription';
 import CourseInfoHeader from './CourseInfoHeader/CourseInfoHeader';
 import styles from './CourseInfoPopup.module.scss';
 
@@ -20,8 +17,8 @@ export default function CourseInfoPopup({ course, onClose }: Props) {
     console.log(course);
     return (
         <Popup className={styles.popup} overlay onClose={onClose}>
-            <Icon className={styles.close} size='large' name='close' onClick={onClose} />
+            <CourseInfoHeader course={course} onClose={onClose} />
-            <CourseInfoHeader course={course} />
+            <CourseInfoDescription course={course} />
         </Popup>
     );
 }

src/views/components/injected/TableRow/TableRow.module.scss

@@ -1,5 +1,9 @@
 @import 'src/views/styles/base.module.scss';
 
+.rowButton {
+    margin: 2px;
+}
+
 .selectedRow {
     * {
         background: $burnt_orange !important;

src/views/components/injected/TableRow/TableRow.tsx

@@ -40,7 +40,7 @@ export default function TableRow({ row, isSelected, onClick }: Props): JSX.Eleme
     }
 
     return ReactDOM.createPortal(
-        <Button onClick={onClick} type='secondary'>
+        <Button className={styles.rowButton} onClick={onClick} type='secondary'>
             <Icon name='bar_chart' color='white' size='medium' />
         </Button>,
         container