beginning course scraping from row, and created assets folder with departments.json

src/assets/json/departments.json

@@ -0,0 +1,221 @@
+[
+    "ACC",
+    "ADV",
+    "ASE",
+    "AFR",
+    "AFS",
+    "ASL",
+    "AMS",
+    "AHC",
+    "ANT",
+    "ALD",
+    "ARA",
+    "ARE",
+    "ARI",
+    "ARC",
+    "AED",
+    "ARH",
+    "ART",
+    "AET",
+    "AAS",
+    "ANS",
+    "AST",
+    "BSN",
+    "BEN",
+    "BCH",
+    "BIO",
+    "BME",
+    "BDP",
+    "B A",
+    "BAX",
+    "BGS",
+    "CHE",
+    "CH",
+    "CHI",
+    "C E",
+    "CLA",
+    "C C",
+    "CGS",
+    "COM",
+    "CLD",
+    "CMS",
+    "CRP",
+    "C L",
+    "COE",
+    "CSE",
+    "C S",
+    "CON",
+    "CTI",
+    "CRW",
+    "CDI",
+    "EDC",
+    "CZ",
+    "DAN",
+    "DSC",
+    "D S",
+    "DES",
+    "DEV",
+    "D B",
+    "DRS",
+    "DCH",
+    "ECO",
+    "ELP",
+    "EDP",
+    "E E",
+    "ECE",
+    "EER",
+    "EMA",
+    "ENM",
+    "E M",
+    "E S",
+    "E",
+    "ESL",
+    "ENS",
+    "EVE",
+    "EVS",
+    "EUP",
+    "EUS",
+    "FIN",
+    "F A",
+    "FLU",
+    "FR",
+    "F H",
+    "G E",
+    "GRG",
+    "GEO",
+    "GER",
+    "GSD",
+    "GOV",
+    "GRS",
+    "GK",
+    "GUI",
+    "HAR",
+    "H S",
+    "HCT",
+    "HED",
+    "HEB",
+    "HIN",
+    "HIS",
+    "HDF",
+    "HDO",
+    "H E",
+    "HMN",
+    "ILA",
+    "I",
+    "ISP",
+    "INF",
+    "ITD",
+    "I B",
+    "IRG",
+    "ISL",
+    "ITL",
+    "ITC",
+    "JPN",
+    "J S",
+    "J",
+    "KIN",
+    "KOR",
+    "LAR",
+    "LTC",
+    "LAT",
+    "LAL",
+    "LAS",
+    "LAW",
+    "LEB",
+    "L A",
+    "LAH",
+    "LIN",
+    "MAL",
+    "MAN",
+    "MIS",
+    "MFG",
+    "MNS",
+    "MKT",
+    "MSE",
+    "M",
+    "M E",
+    "MDV",
+    "MAS",
+    "MEL",
+    "MES",
+    "M S",
+    "MOL",
+    "MUS",
+    "NSC",
+    "N S",
+    "NEU",
+    "NOR",
+    "N",
+    "NTR",
+    "OBO",
+    "OPR",
+    "O M",
+    "ORI",
+    "ORG",
+    "PER",
+    "PRS",
+    "PGE",
+    "PGS",
+    "PHM",
+    "PHL",
+    "PED",
+    "P S",
+    "PHY",
+    "PIA",
+    "POL",
+    "POR",
+    "PRC",
+    "PSY",
+    "P A",
+    "PBH",
+    "P R",
+    "RIM",
+    "RTF",
+    "R E",
+    "R S",
+    "RHE",
+    "R M",
+    "RUS",
+    "REE",
+    "SAN",
+    "SAX",
+    "STC",
+    "STM",
+    "S C",
+    "SEL",
+    "S S",
+    "S W",
+    "SOC",
+    "SPN",
+    "SPC",
+    "SED",
+    "SLH",
+    "STA",
+    "SDS",
+    "SUS",
+    "SWE",
+    "TAM",
+    "TXA",
+    "T D",
+    "TRO",
+    "TRU",
+    "TBA",
+    "TUR",
+    "T C",
+    "UKR",
+    "UGS",
+    "UDN",
+    "URB",
+    "URD",
+    "UTS",
+    "UTL",
+    "VIA",
+    "VIO",
+    "V C",
+    "VAS",
+    "VOI",
+    "WGS",
+    "WRT",
+    "YID",
+    "YOR"
+]

src/views/components/CourseCatalogMain.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Course } from 'src/shared/types/Course';
 import useInfiniteScroll from '../hooks/useInfiniteScroll';
@@ -16,7 +16,7 @@ interface Props {
  */
 export default function CourseCatalogMain({ support }: Props) {
     const [rows, setRows] = React.useState<HTMLTableRowElement[]>([]);
-    const [selectedCourse, setSelectedCourse] = React.useState<Course | null>(null);
+    const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);
 
     const isScrolling = useInfiniteScroll(async () => {
         console.log('infinite scroll');
@@ -32,11 +32,15 @@ export default function CourseCatalogMain({ support }: Props) {
         setRows(rows);
     }, []);
 
+    const handleRowButtonClick = (course: Course) => {
+        setSelectedCourse(course);
+    };
+
     return (
         <div>
             <TableHead>Plus</TableHead>
             {rows.map(row => (
-                <TableRow row={row} />
+                <TableRow row={row} onClick={handleRowButtonClick} />
             ))}
             {isScrolling && <div>Scrolling...</div>}
         </div>

src/views/components/injected/TableHead.tsx

@@ -3,23 +3,23 @@ import ReactDOM from 'react-dom';
 
 /**
  * This adds a new column to the course catalog table header.
- * @returns
+ * @returns a react portal to the new column or null if the column has not been created yet.
  */
 export default function TableHead({ children }: PropsWithChildren) {
-    const [portalContainer, setPortalContainer] = useState<HTMLTableCellElement | null>(null);
+    const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
 
     useEffect(() => {
-        const portalContainer = document.createElement('th');
+        const container = document.createElement('th');
-        portalContainer.setAttribute('scope', 'col');
+        container.setAttribute('scope', 'col');
-        portalContainer.setAttribute('id', 'ut-registration-plus-table-head');
+        container.setAttribute('id', 'ut-registration-plus-table-head');
         const lastTableHeadCell = document.querySelector('table thead th:last-child');
-        lastTableHeadCell!.after(portalContainer);
+        lastTableHeadCell!.after(container);
-        setPortalContainer(portalContainer);
+        setContainer(container);
     }, []);
 
-    if (!portalContainer) {
+    if (!container) {
         return null;
     }
 
-    return ReactDOM.createPortal(<span>{children}</span>, portalContainer);
+    return ReactDOM.createPortal(<span>{children}</span>, container);
 }

src/views/components/injected/TableRow.tsx

@@ -1,24 +1,44 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { Course } from 'src/shared/types/Course';
 import { Button } from '../common/Button/Button';
 
 interface Props {
     row: HTMLTableRowElement;
+    onClick: (course: Course) => void;
 }
 
-export default function TableRow({ row }: Props) {
+/**
-    const [portalContainer, setPortalContainer] = useState<HTMLTableCellElement | null>(null);
+ * This component is injected into each row of the course catalog table.
+ * @returns a react portal to the new td in the column or null if the column has not been created yet.
+ */
+export default function TableRow({ row, onClick }: Props): JSX.Element | null {
+    const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
+    const [course, setCourse] = useState<Course | null>(null);
 
     useEffect(() => {
         const portalContainer = document.createElement('td');
         const lastTableCell = row.querySelector('td:last-child');
         lastTableCell!.after(portalContainer);
-        setPortalContainer(portalContainer);
+        setContainer(portalContainer);
     }, []);
 
-    if (!portalContainer) {
+    useEffect(() => {
+        const course = scrapeCourseFromRow(row);
+        setCourse(course);
+    }, [row]);
+
+    if (!container || !course) {
         return null;
     }
 
-    return ReactDOM.createPortal(<Button>Plus</Button>, portalContainer);
+    const handleOnClick = () => {
+        onClick(course);
+    };
+
+    return ReactDOM.createPortal(<Button onClick={handleOnClick}>Plus</Button>, container);
+}
+
+function scrapeCourseFromRow(row): Course {
+    return null as any;
 }