auto-loading completely done

src/views/components/CourseCatalogMain.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Course, CourseRow } from 'src/shared/types/Course';
-import useInfiniteScroll from '../hooks/useInfiniteScroll';
+import { Course, ScrapedRow } from 'src/shared/types/Course';
 import { useKeyPress } from '../hooks/useKeyPress';
 import { CourseCatalogScraper } from '../lib/CourseCatalogScraper';
+import getCourseTableRows from '../lib/getCourseTableRows';
 import { SiteSupport } from '../lib/getSiteSupport';
 import { populateSearchInputs } from '../lib/populateSearchInputs';
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
+import AutoLoad from './injected/AutoLoad/AutoLoad';
 import CoursePanel from './injected/CoursePanel/CoursePanel';
 import TableHead from './injected/TableHead';
 import TableRow from './injected/TableRow/TableRow';
@@ -18,24 +19,26 @@ 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<CourseRow[]>([]);
+    const [rows, setRows] = React.useState<ScrapedRow[]>([]);
     const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);
 
-    const isScrolling = useInfiniteScroll(async () => {
-        console.log('infinite scroll');
-        return true;
-    });
-
     useEffect(() => {
         populateSearchInputs();
     }, []);
 
     useEffect(() => {
-        const scraper = new CourseCatalogScraper(support);
-        const rows = scraper.scrape(document.querySelectorAll<HTMLTableRowElement>('table tbody tr'));
-        console.log('useEffect -> rows:', rows);
-        setRows(rows);
-    }, []);
+        const tableRows = getCourseTableRows(document);
+        const ccs = new CourseCatalogScraper(support);
+        const scrapedRows = ccs.scrape(tableRows);
+        setRows(scrapedRows);
+    }, [support]);
+
+    const addRows = (newRows: ScrapedRow[]) => {
+        newRows.forEach(row => {
+            document.querySelector('table tbody')!.appendChild(row.element);
+        });
+        setRows([...rows, ...newRows]);
+    };
 
     const handleRowButtonClick = (course: Course) => () => {
         setSelectedCourse(course);
@@ -52,7 +55,7 @@ export default function CourseCatalogMain({ support }: Props) {
             <TableHead>Plus</TableHead>
             {rows.map(row => (
                 <TableRow
-                    element={row.rowElement}
+                    element={row.element}
                     course={row.course}
                     isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
                     support={support}
@@ -60,7 +63,7 @@ export default function CourseCatalogMain({ support }: Props) {
                 />
             ))}
             {selectedCourse && <CoursePanel course={selectedCourse} onClose={handleClearSelectedCourse} />}
-            {isScrolling && <div>Scrolling...</div>}
+            <AutoLoad addRows={addRows} />
         </ExtensionRoot>
     );
 }