refactoring

src/views/components/CourseCatalogMain.tsx

@@ -4,7 +4,8 @@ import { Course } from 'src/shared/types/Course';
 import useInfiniteScroll from '../hooks/useInfiniteScroll';
 import { populateSearchInputs } from '../lib/courseCatalog/populateSearchInputs';
 import { SiteSupport } from '../lib/getSiteSupport';
-import { Button } from './common/Button/Button';
+import TableHead from './injected/TableHead';
+import TableRow from './injected/TableRow';
 
 interface Props {
     support: SiteSupport.COURSE_CATALOG_DETAILS | SiteSupport.COURSE_CATALOG_LIST;
@@ -17,8 +18,6 @@ export default function CourseCatalogMain({ support }: Props) {
     const [rows, setRows] = React.useState<HTMLTableRowElement[]>([]);
     const [selectedCourse, setSelectedCourse] = React.useState<Course | null>(null);
 
-    const [shouldHighlight, setShouldHighlight] = React.useState(false);
-
     const isInfiniteScrollLoading = useInfiniteScroll(async () => {
         console.log('infinite scroll');
         return false;
@@ -35,69 +34,15 @@ export default function CourseCatalogMain({ support }: Props) {
 
     return (
         <div>
-            <TableHead />
+            <TableHead>Plus</TableHead>
-            <Button onClick={() => setRows([])}>{shouldHighlight ? 'Unhighlight' : 'Highlight'}</Button>
             {rows.map(row => (
-                <TableRow row={row} shouldHighlight={shouldHighlight} />
+                <TableRow row={row} />
             ))}
             {isInfiniteScrollLoading && <div>Scrolling...</div>}
         </div>
     );
 }
 
-const TableRow: (props: { row: HTMLTableRowElement; shouldHighlight: boolean }) => JSX.Element | null = ({
-    row,
-    shouldHighlight,
-}) => {
-    const [portalContainer, setPortalContainer] = React.useState<HTMLTableCellElement | null>(null);
-
-    useEffect(() => {
-        const portalContainer = document.createElement('td');
-        const lastTableCell = row.querySelector('td:last-child');
-        lastTableCell!.after(portalContainer);
-        setPortalContainer(portalContainer);
-    }, []);
-
-    useEffect(() => {
-        console.log('shouldHighlight', shouldHighlight);
-        // make the color of the row change when the button is clicked
-        if (shouldHighlight) {
-            row.querySelectorAll('td').forEach(td => {
-                td.style.color = 'red';
-            });
-        } else {
-            row.querySelectorAll('td').forEach(td => {
-                td.style.color = '';
-            });
-        }
-    }, [shouldHighlight, row]);
-
-    if (!portalContainer) {
-        return null;
-    }
-
-    return ReactDOM.createPortal(<Button>Plus</Button>, portalContainer);
-};
-
-const TableHead = () => {
-    const [portalContainer, setPortalContainer] = React.useState<HTMLTableHeaderCellElement | null>(null);
-
-    useEffect(() => {
-        const portalContainer = document.createElement('th');
-        portalContainer.setAttribute('scope', 'col');
-        portalContainer.setAttribute('id', 'ut-registration-plus-table-head-portal');
-        const lastTableHeadCell = document.querySelector('table thead th:last-child');
-        lastTableHeadCell!.after(portalContainer);
-        setPortalContainer(portalContainer);
-    }, []);
-
-    if (!portalContainer) {
-        return null;
-    }
-
-    return ReactDOM.createPortal(<span>Plus</span>, portalContainer);
-};
-
 function scrapeRowsFromCourseTable(): HTMLTableRowElement[] {
     const rows = Array.from(document.querySelectorAll('table tbody tr')) as HTMLTableRowElement[];
 

src/views/components/injected/TableHead.tsx

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

src/views/components/injected/TableRow.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from '../common/Button/Button';
+
+interface Props {
+    row: HTMLTableRowElement;
+}
+
+export default function TableRow({ row }: Props) {
+    const [portalContainer, setPortalContainer] = useState<HTMLTableCellElement | null>(null);
+
+    useEffect(() => {
+        const portalContainer = document.createElement('td');
+        const lastTableCell = row.querySelector('td:last-child');
+        lastTableCell!.after(portalContainer);
+        setPortalContainer(portalContainer);
+    }, []);
+
+    if (!portalContainer) {
+        return null;
+    }
+
+    return ReactDOM.createPortal(<Button>Plus</Button>, portalContainer);
+}