created reusable text component, and setup typing for it automatically. also fixed bugs with autoload and scraper so that it would handle appending course name headers

src/views/components/CourseCatalogMain.tsx

@@ -6,6 +6,7 @@ import getCourseTableRows from '../lib/getCourseTableRows';
 import { SiteSupport } from '../lib/getSiteSupport';
 import { populateSearchInputs } from '../lib/populateSearchInputs';
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
+import Text from './common/Text/Text';
 import AutoLoad from './injected/AutoLoad/AutoLoad';
 import CoursePanel from './injected/CoursePanel/CoursePanel';
 import TableHead from './injected/TableHead';
@@ -53,15 +54,21 @@ export default function CourseCatalogMain({ support }: Props) {
     return (
         <ExtensionRoot>
             <TableHead>Plus</TableHead>
-            {rows.map(row => (
-                <TableRow
-                    element={row.element}
-                    course={row.course}
-                    isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
-                    support={support}
-                    onClick={handleRowButtonClick(row.course)}
-                />
-            ))}
+            {rows.map(row => {
+                if (!row.course) {
+                    // TODO: handle the course section headers
+                    return null;
+                }
+                return (
+                    <TableRow
+                        element={row.element}
+                        course={row.course}
+                        isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
+                        support={support}
+                        onClick={handleRowButtonClick(row.course)}
+                    />
+                );
+            })}
             {selectedCourse && <CoursePanel course={selectedCourse} onClose={handleClearSelectedCourse} />}
             <AutoLoad addRows={addRows} />
         </ExtensionRoot>