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>
     );
 }

src/views/components/common/Spinner/Spinner.module.scss

@@ -0,0 +1,23 @@
+@import 'src/views/styles/base.module.scss';
+
+$spinner-border-width: 10px;
+
+.spinner {
+    border: 1px solid $CHARCOAL;
+    border-width: $spinner-border-width;
+    border-top: $spinner-border-width solid $TANGERINE;
+    margin: 0 auto 15px auto;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/views/components/common/Spinner/Spinner.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ISassColors } from 'src/views/styles/colors.module.scss';
+import styles from './Spinner.module.scss';
+
+type Props = {
+    color?: keyof ISassColors;
+};
+
+/**
+ * A simple spinner component that can be used to indicate loading.
+ */
+export default function Spinner({ color }: Props) {
+    return <div className={styles.spinner} />;
+}

src/views/components/injected/AutoLoad/AutoLoad.module.scss

@@ -0,0 +1,7 @@
+@import 'src/views/styles/base.module.scss';
+
+.autoLoad {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/views/components/injected/AutoLoad/AutoLoad.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ScrapedRow } from 'src/shared/types/Course';
+import useInfiniteScroll from 'src/views/hooks/useInfiniteScroll';
+import { CourseCatalogScraper } from 'src/views/lib/CourseCatalogScraper';
+import { SiteSupport } from 'src/views/lib/getSiteSupport';
+import { loadNextCourseCatalogPage, AutoLoadStatus } from 'src/views/lib/loadNextCourseCatalogPage';
+import Spinner from '../../common/Spinner/Spinner';
+import styles from './AutoLoad.module.scss';
+
+type Props = {
+    addRows: (rows: ScrapedRow[]) => void;
+};
+
+/**
+ * This component is responsible for loading the next page of courses when the user scrolls to the bottom of the page.
+ * @returns
+ */
+export default function AutoLoad({ addRows }: Props) {
+    const [container, setContainer] = useState<HTMLDivElement | null>(null);
+    const [status, setStatus] = useState<AutoLoadStatus>(AutoLoadStatus.IDLE);
+
+    useEffect(() => {
+        const portalContainer = document.createElement('div');
+        const lastTableCell = document.querySelector('table')!;
+        lastTableCell!.after(portalContainer);
+        setContainer(portalContainer);
+    }, []);
+
+    // FOR DEBUGGING
+    useEffect(() => {
+        console.log(`AutoLoad is now ${status}`);
+    }, [status]);
+
+    // This hook will call the callback when the user scrolls to the bottom of the page.
+    useInfiniteScroll(async () => {
+        // fetch the next page of courses
+        const [status, nextRows] = await loadNextCourseCatalogPage();
+        setStatus(status);
+        if (!nextRows) {
+            return;
+        }
+        // scrape the courses from the page
+        const ccs = new CourseCatalogScraper(SiteSupport.COURSE_CATALOG_LIST);
+        const scrapedRows = ccs.scrape(nextRows);
+
+        // add the scraped courses to the current page
+        addRows(scrapedRows);
+    }, [addRows]);
+
+    if (!container || status === AutoLoadStatus.IDLE) {
+        return null;
+    }
+
+    return createPortal(
+        <div>
+            {status === AutoLoadStatus.LOADING && (
+                <div>
+                    <Spinner />
+                    <h2>Loading Next Page...</h2>
+                </div>
+            )}
+            {status === AutoLoadStatus.ERROR && (
+                <div className={styles.error}>
+                    <h2>Something went wrong</h2>
+                    <p>Try refreshing the page</p>
+                    <button onClick={() => window.location.reload()}>Refresh</button>
+                </div>
+            )}
+        </div>,
+        container
+    );
+}

src/views/components/injected/TableRow/TableRow.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { Course, CourseRow } from 'src/shared/types/Course';
+import { Course, ScrapedRow } from 'src/shared/types/Course';
 import { SiteSupport } from 'src/views/lib/getSiteSupport';
 import { Button } from '../../common/Button/Button';
 import styles from './TableRow.module.scss';
@@ -18,7 +18,6 @@ interface Props {
  * @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, course, element, isSelected, onClick }: Props): JSX.Element | null {
-    console.log('TableRow -> isSelected:', isSelected);
     const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
 
     useEffect(() => {