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>

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

@@ -3,9 +3,9 @@
 $spinner-border-width: 10px;
 
 .spinner {
-    border: 1px solid $CHARCOAL;
+    border: 1px solid $charcoal;
     border-width: $spinner-border-width;
-    border-top: $spinner-border-width solid $TANGERINE;
+    border-top: $spinner-border-width solid $tangerine;
     margin: 0 auto 15px auto;
     border-radius: 50%;
     width: 60px;

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

@@ -0,0 +1,3 @@
+.text {
+    font-family: 'Inter', sans-serif;
+}

src/views/components/common/Text/Text.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
+import colors, { ISassColors } from 'src/views/styles/colors.module.scss';
+import fonts, { ISizes, IWeights } from 'src/views/styles/fonts.module.scss';
+import styles from './Text.module.scss';
+
+type Props = {
+    color?: keyof ISassColors & 'black';
+    weight: keyof IWeights;
+    size: keyof ISizes;
+    span?: boolean;
+    className?: string;
+    onClick?: () => void;
+    align?: React.CSSProperties['textAlign'];
+    style?: React.CSSProperties;
+};
+
+/**
+ * A reusable Text component with props that build on top of the design system for the extension
+ */
+export default function Text(props: PropsWithChildren<Props>) {
+    const style = props.style || {};
+
+    style.textAlign ??= props.align;
+    style.color ??= colors?.[props.color ?? 'charcoal'];
+    style.fontSize ??= fonts?.[props.size ?? 'medium'];
+    style.fontWeight ??= fonts?.[props.weight ?? 'bold'];
+
+    if (props.span) {
+        <span className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
+            {props.children}
+        </span>;
+    }
+
+    return (
+        <div className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
+            {props.children}
+        </div>
+    );
+}

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

@@ -42,7 +42,7 @@ export default function AutoLoad({ addRows }: Props) {
         }
         // scrape the courses from the page
         const ccs = new CourseCatalogScraper(SiteSupport.COURSE_CATALOG_LIST);
-        const scrapedRows = ccs.scrape(nextRows);
+        const scrapedRows = ccs.scrape(nextRows, true);
 
         // add the scraped courses to the current page
         addRows(scrapedRows);