injecting into table, created table header, and buttons for each row

src/shared/types/Course.ts

@@ -0,0 +1,17 @@
+import { Serialized } from 'chrome-extension-toolkit';
+
+type CourseSchedule = {};
+
+export class Course {
+    id: number;
+    name: string;
+    professor: string;
+    schedule: CourseSchedule;
+    currentStatus: string;
+    url: string;
+    registerURL?: string;
+
+    constructor(course: Course | Serialized<Course>) {
+        Object.assign(this, course);
+    }
+}

src/views/components/CourseCatalogMain.tsx

@@ -1,16 +1,88 @@
 import React, { useEffect, useMemo } from 'react';
+import ReactDOM from 'react-dom';
 import { bMessenger } from 'src/shared/messages';
+import { Course } from 'src/shared/types/Course';
+import { populateSearchInputs } from '../lib/courseCatalog/populateSearchInputs';
 import { SiteSupport } from '../lib/getSiteSupport';
 import { Button } from './common/Button/Button';
 
 interface Props {
-    support: SiteSupport[];
+    support: SiteSupport.COURSE_CATALOG_DETAILS | SiteSupport.COURSE_CATALOG_LIST;
 }
 
-export default function CourseCatalogMain(props: Props) {
-    const openGoogle = () => {
-        bMessenger.openNewTab({ url: 'https://google.com' });
-    };
+/**
+ * This is the top level react component orchestrating the course catalog page.
+ */
+export default function CourseCatalogMain({ support }: Props) {
+    const [rows, setRows] = React.useState<HTMLTableRowElement[]>([]);
+    const [selectedCourse, setSelectedCourse] = React.useState<Course | null>(null);
 
-    return <Button onClick={openGoogle}>{props.support.join(',')}</Button>;
+    useEffect(() => {
+        populateSearchInputs();
+    }, []);
+
+    useEffect(() => {
+        const rows = scrapeRowsFromCourseTable();
+        setRows(rows);
+    }, []);
+
+    return (
+        <div>
+            <TableHead />
+            {rows.map(row => (
+                <TableRow key={row.id} row={row} />
+            ))}
+        </div>
+    );
+}
+
+const TableRow: (props: { row: HTMLTableRowElement }) => JSX.Element | null = ({ row }) => {
+    const [portalContainer, setPortalContainer] = React.useState<HTMLTableCellElement | null>(null);
+
+    useEffect(() => {
+        const portalContainer = document.createElement('td');
+        portalContainer.setAttribute('id', 'ut-registration-plus-table-row-portal');
+        const lastTableCell = row.querySelector('td:last-child');
+        lastTableCell!.after(portalContainer);
+        setPortalContainer(portalContainer);
+    }, []);
+
+    if (!portalContainer) {
+        return null;
+    }
+
+    return ReactDOM.createPortal(<Button>Plus</Button>, portalContainer);
+};
+
+const TableHead = () => {
+    const [portalContainer, setPortalContainer] = React.useState<HTMLTableHeaderCellElement | null>(null);
+
+    useEffect(() => {
+        const portalContainer = document.createElement('th');
+        portalContainer.setAttribute('scope', 'col');
+        portalContainer.setAttribute('id', 'ut-registration-plus-table-head-portal');
+        const lastTableHeadCell = document.querySelector('table thead th:last-child');
+        lastTableHeadCell!.after(portalContainer);
+        setPortalContainer(portalContainer);
+    }, []);
+
+    if (!portalContainer) {
+        return null;
+    }
+
+    return ReactDOM.createPortal(<span>Plus</span>, portalContainer);
+};
+
+function scrapeRowsFromCourseTable(): HTMLTableRowElement[] {
+    const rows = Array.from(document.querySelectorAll('table tbody tr')) as HTMLTableRowElement[];
+
+    return Array.from(rows).filter(row => {
+        if (row.querySelector('th')) {
+            return false;
+        }
+        if (row.querySelector('td.course_header')) {
+            return false;
+        }
+        return true;
+    });
 }

src/views/index.tsx

@@ -7,22 +7,25 @@ import getSiteSupport, { SiteSupport } from './lib/getSiteSupport';
 import PopupMain from './components/PopupMain';
 
 const support = getSiteSupport(window.location.href);
+if (!support) {
+    throw new Error('UT Registration Plus does not support this page, even though it should...');
+}
 
 if (isExtensionPopup()) {
     render(<PopupMain />, document.getElementById('root'));
 }
 
-if (support.includes(SiteSupport.COURSE_CATALOG)) {
+if (support === SiteSupport.COURSE_CATALOG_DETAILS || support === SiteSupport.COURSE_CATALOG_LIST) {
     const shadowDom = createShadowDOM('ut-registration-plus-dom-container');
     render(<CourseCatalogMain support={support} />, shadowDom.shadowRoot);
     shadowDom.addStyle('static/css/content.css');
 }
 
-if (support.includes(SiteSupport.WAITLIST)) {
+if (support === SiteSupport.WAITLIST) {
     // TODO: Implement waitlist support
 }
 
-if (support.includes(SiteSupport.UT_PLANNER)) {
+if (support === SiteSupport.UT_PLANNER) {
     // TODO: Implement ut planner support
 }
 

src/views/lib/getSiteSupport.ts

@@ -3,7 +3,6 @@
  * a given url/page can correspond to many of these enum values
  */
 export enum SiteSupport {
-    COURSE_CATALOG = 'COURSE_CATALOG',
     COURSE_CATALOG_LIST = 'COURSE_CATALOG_LIST',
     COURSE_CATALOG_DETAILS = 'COURSE_CATALOG_DETAILS',
     UT_PLANNER = 'UT_PLANNER',
@@ -15,22 +14,20 @@ export enum SiteSupport {
  * @param url the url of the current page
  * @returns a list of page types that the current page is
  */
-export default function getSiteSupport(url: string): SiteSupport[] {
+export default function getSiteSupport(url: string): SiteSupport | null {
     if (url.includes('utexas.collegescheduler.com')) {
-        return [SiteSupport.UT_PLANNER];
+        return SiteSupport.UT_PLANNER;
     }
     if (url.includes('utdirect.utexas.edu/apps/registrar/course_schedule')) {
-        const types = [SiteSupport.COURSE_CATALOG];
         if (url.includes('results')) {
-            types.push(SiteSupport.COURSE_CATALOG_LIST);
+            return SiteSupport.COURSE_CATALOG_LIST;
         }
         if (document.querySelector('#details')) {
-            types.push(SiteSupport.COURSE_CATALOG_DETAILS);
+            return SiteSupport.COURSE_CATALOG_DETAILS;
         }
-        return types;
     }
     if (url.includes('utdirect.utexas.edu') && (url.includes('waitlist') || url.includes('classlist'))) {
-        return [SiteSupport.WAITLIST];
+        return SiteSupport.WAITLIST;
     }
-    return [];
+    return null;
 }

src/views/styles/colors.module.scss.d.ts

@@ -1,3 +1,7 @@
+/**
+ * This is a file that we need to create to tell typescript what the shape of the css modules is
+ * when we import them into ts/tsx files
+ */
 export interface ISassColors {
     BURNT_ORANGE: string;
     CHARCOAL: string;