wip scraping infra

src/views/components/CourseCatalogMain.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { Course } from 'src/shared/types/Course';
+import { Course, CourseRow, CourseScraper } from 'src/shared/types/Course';
+import { CourseCatalogDetailsScraper } from 'src/shared/types/CourseCatalogDetailsScraper';
+import { CourseCatalogRowScraper } from 'src/shared/types/CourseCatalogRowScraper';
 import useInfiniteScroll from '../hooks/useInfiniteScroll';
 import { populateSearchInputs } from '../lib/courseCatalog/populateSearchInputs';
 import { SiteSupport } from '../lib/getSiteSupport';
@@ -15,7 +17,7 @@ interface Props {
  * 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 [rows, setRows] = React.useState<CourseRow[]>([]);
     const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);
 
     const isScrolling = useInfiniteScroll(async () => {
@@ -28,7 +30,7 @@ export default function CourseCatalogMain({ support }: Props) {
     }, []);
 
     useEffect(() => {
-        const rows = scrapeRowsFromCourseTable();
+        const rows = scrapeCourseRows(support);
         setRows(rows);
     }, []);
 
@@ -40,23 +42,44 @@ export default function CourseCatalogMain({ support }: Props) {
         <div>
             <TableHead>Plus</TableHead>
             {rows.map(row => (
-                <TableRow row={row} onClick={handleRowButtonClick} />
+                <TableRow element={row.rowElement} support={support} onClick={handleRowButtonClick} />
             ))}
             {isScrolling && <div>Scrolling...</div>}
         </div>
     );
 }
 
-function scrapeRowsFromCourseTable(): HTMLTableRowElement[] {
-    const rows = Array.from(document.querySelectorAll('table tbody tr')) as HTMLTableRowElement[];
+function scrapeCourseRows(support: SiteSupport): CourseRow[] {
+    const rows: CourseRow[] = [];
 
-    return Array.from(rows).filter(row => {
-        if (row.querySelector('th')) {
-            return false;
+    let name: string | null = null;
+    if (support === SiteSupport.COURSE_CATALOG_DETAILS) {
+        const header = document.querySelector('#details h2');
+        if (!header?.textContent) {
+            throw new Error('Could not find course name on course details page.');
         }
-        if (row.querySelector('td.course_header')) {
-            return false;
+        name = header.textContent.trim();
+    }
+
+    document.querySelectorAll<HTMLTableRowElement>('table tbody tr').forEach(row => {
+        // rows that have a course header are the start of a new section, so save the section name and skip
+        const header = row.querySelector('td.course_header');
+        if (header?.textContent) {
+            name = header.textContent.trim();
+            return;
         }
-        return true;
+        if (!name) {
+            throw new Error('Could not find any course sections.');
+        }
+
+        const course = scrapeCourseFromRow(name, support, row);
     });
+    return rows;
+}
+
+function scrapeCourseFromRow(name: string, support: SiteSupport, row: HTMLTableRowElement): Course {
+    let url = support === SiteSupport.COURSE_CATALOG_DETAILS ? window.location.href : null;
+
+
+    
 }

src/views/components/injected/TableRow.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Course } from 'src/shared/types/Course';
+import { SiteSupport } from 'src/views/lib/getSiteSupport';
 import { Button } from '../common/Button/Button';
 
 interface Props {
-    row: HTMLTableRowElement;
+    support: SiteSupport;
+    element: HTMLTableRowElement;
     onClick: (course: Course) => void;
 }
 
@@ -12,21 +14,20 @@ interface Props {
  * 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 {
+export default function TableRow({ support, element, 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');
+        const lastTableCell = element.querySelector('td:last-child');
         lastTableCell!.after(portalContainer);
         setContainer(portalContainer);
     }, []);
 
     useEffect(() => {
-        const course = scrapeCourseFromRow(row);
         setCourse(course);
-    }, [row]);
+    }, [element]);
 
     if (!container || !course) {
         return null;
@@ -38,7 +39,3 @@ export default function TableRow({ row, onClick }: Props): JSX.Element | null {
 
     return ReactDOM.createPortal(<Button onClick={handleOnClick}>Plus</Button>, container);
 }
-
-function scrapeCourseFromRow(row): Course {
-    return null as any;
-}