passing a scss classname down to a vanilla dom element on react state changes 🤯

src/views/components/CourseCatalogMain.tsx

@@ -8,7 +8,7 @@ import { SiteSupport } from '../lib/getSiteSupport';
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
 import CoursePanel from './injected/CoursePanel/CoursePanel';
 import TableHead from './injected/TableHead';
-import TableRow from './injected/TableRow';
+import TableRow from './injected/TableRow/TableRow';
 
 interface Props {
     support: SiteSupport.COURSE_CATALOG_DETAILS | SiteSupport.COURSE_CATALOG_LIST;
@@ -54,6 +54,7 @@ export default function CourseCatalogMain({ support }: Props) {
                 <TableRow
                     element={row.rowElement}
                     course={row.course}
+                    isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
                     support={support}
                     onClick={handleRowButtonClick(row.course)}
                 />

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

@@ -0,0 +1,8 @@
+@import 'src/views/styles/base.module.scss';
+
+.selectedRow {
+    td {
+        background: green !important;
+        color: white !important;
+    }
+}

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

@@ -2,10 +2,12 @@ import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Course, CourseRow } from 'src/shared/types/Course';
 import { SiteSupport } from 'src/views/lib/getSiteSupport';
-import { Button } from '../common/Button/Button';
+import { Button } from '../../common/Button/Button';
+import styles from './TableRow.module.scss';
 
 interface Props {
     support: SiteSupport;
+    isSelected: boolean;
     course: Course;
     element: HTMLTableRowElement;
     onClick: (...args: any[]) => any;
@@ -15,7 +17,8 @@ interface Props {
  * This component is injected into each row of the course catalog table.
  * @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, onClick }: Props): JSX.Element | null {
+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(() => {
@@ -25,6 +28,14 @@ export default function TableRow({ support, course, element, onClick }: Props):
         setContainer(portalContainer);
     }, []);
 
+    useEffect(() => {
+        if (isSelected) {
+            element.classList.add(styles.selectedRow);
+        } else {
+            element.classList.remove(styles.selectedRow);
+        }
+    }, [course, isSelected]);
+
     if (!container) {
         return null;
     }

todo.md

@@ -3,9 +3,10 @@
 Last Updated: 03/4/2023
 
 ## Features:
-- [ ] scraping course information
+
+-   [x] scraping course information
+-   [x] injecting plus header and buttons
 -   [ ] auto loading next pages
-- [ ] injecting plus header and buttons
 -   [ ] showing course popup
 -   [ ] RMP, eCis, Textbook, and Syllabus buttons
 -   [ ] displaying professor information on popup
@@ -13,6 +14,7 @@ Last Updated: 03/4/2023
 -   [ ] Multiple schedule support
 -   [ ] Browser Action Popup
 -   [ ] browser action badge
+-   [ ] Updated Easter Egg Messages
 -   [ ] links to RIS, Registrar, Degree Audit in browser action
 -   [ ] copy unique id quickly from browser action
 -   [ ] Clickable links to buildings
@@ -34,13 +36,15 @@ Last Updated: 03/4/2023
 -   [ ] UTPlanner support? (not as much of a priority anymore)
 -   [ ] Waitlist support
 -   [ ] import classes from waitlist page
+-   [ ] show flags on course popup
 -   [ ] waitlist pooling
 -   [ ] store in db
+-   [ ] extension and website darkmode support
 -   [ ] see who else is looking at certain classes (waitlist, or has it in their schedule)
 -   [ ] CHECK ALL THE TODOs in CODE BEFORE LAUNCHING
 
-
 ## LEGACY FROM UTRP-V1
+
 -   [ ] unneeded Logout message on individual course pages
 -   [ ] RMP not working on individual course pages
 -   [ ] Textbook button (amber)
@@ -68,4 +72,3 @@ Last Updated: 03/4/2023
 -   [ ] Conflict indicator ( Possible different section? )
 -   [ ] Compare classes mode
 -   [ ] Screenshotting calendar on zoomed browser cuts off image.
-