CourseScraper completely done

'

src/views/components/CourseCatalogMain.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { Course, CourseRow, CourseScraper } from 'src/shared/types/Course';
-import { CourseCatalogDetailsScraper } from 'src/shared/types/CourseCatalogDetailsScraper';
-import { CourseCatalogRowScraper } from 'src/shared/types/CourseCatalogRowScraper';
+import { Course, CourseRow } from 'src/shared/types/Course';
 import useInfiniteScroll from '../hooks/useInfiniteScroll';
+import { CourseScraper } from '../lib/courseCatalog/CourseScraper';
 import { populateSearchInputs } from '../lib/courseCatalog/populateSearchInputs';
 import { SiteSupport } from '../lib/getSiteSupport';
 import TableHead from './injected/TableHead';
@@ -22,7 +21,7 @@ export default function CourseCatalogMain({ support }: Props) {
 
     const isScrolling = useInfiniteScroll(async () => {
         console.log('infinite scroll');
-        return false;
+        return true;
     });
 
     useEffect(() => {
@@ -30,7 +29,9 @@ export default function CourseCatalogMain({ support }: Props) {
     }, []);
 
     useEffect(() => {
-        const rows = scrapeCourseRows(support);
+        const scraper = new CourseScraper(support);
+        const rows = scraper.scrape(document.querySelectorAll<HTMLTableRowElement>('table tbody tr'));
+        console.log('useEffect -> rows:', rows);
         setRows(rows);
     }, []);
 
@@ -42,44 +43,14 @@ export default function CourseCatalogMain({ support }: Props) {
         <div>
             <TableHead>Plus</TableHead>
             {rows.map(row => (
-                <TableRow element={row.rowElement} support={support} onClick={handleRowButtonClick} />
+                <TableRow
+                    element={row.rowElement}
+                    course={row.course}
+                    support={support}
+                    onClick={handleRowButtonClick}
+                />
             ))}
             {isScrolling && <div>Scrolling...</div>}
         </div>
     );
 }
-
-function scrapeCourseRows(support: SiteSupport): CourseRow[] {
-    const rows: CourseRow[] = [];
-
-    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.');
-        }
-        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;
-        }
-        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,22 +1,22 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { Course } from 'src/shared/types/Course';
+import { Course, CourseRow } from 'src/shared/types/Course';
 import { SiteSupport } from 'src/views/lib/getSiteSupport';
 import { Button } from '../common/Button/Button';
 
 interface Props {
     support: SiteSupport;
+    course: Course;
     element: HTMLTableRowElement;
-    onClick: (course: Course) => void;
+    onClick: (...args: any[]) => any;
 }
 
 /**
  * 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({ support, element, onClick }: Props): JSX.Element | null {
+export default function TableRow({ support, course, 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');
@@ -25,17 +25,9 @@ export default function TableRow({ support, element, onClick }: Props): JSX.Elem
         setContainer(portalContainer);
     }, []);
 
-    useEffect(() => {
-        setCourse(course);
-    }, [element]);
-
-    if (!container || !course) {
+    if (!container) {
         return null;
     }
 
-    const handleOnClick = () => {
-        onClick(course);
-    };
-
-    return ReactDOM.createPortal(<Button onClick={handleOnClick}>Plus</Button>, container);
+    return ReactDOM.createPortal(<Button onClick={onClick}>Plus</Button>, container);
 }