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,44 +3,48 @@
 Last Updated: 03/4/2023
 
 ## Features:
-- [ ] scraping course information
-- [ ] auto loading next pages
-- [ ] injecting plus header and buttons
-- [ ] showing course popup
-- [ ] RMP, eCis, Textbook, and Syllabus buttons
-- [ ] displaying professor information on popup
-- [ ] saving courses
-- [ ] Multiple schedule support
-- [ ] Browser Action Popup
-- [ ] browser action badge
-- [ ] links to RIS, Registrar, Degree Audit in browser action
-- [ ] copy unique id quickly from browser action
-- [ ] Clickable links to buildings
-- [ ] Count how many hours and # of classes in schedule 
-- [ ] Conflict highlighting
-- [ ] Tooltip that says which classes conflict, maybe suggest a different section or time that doesn't conflict
-- [ ] import / export schedules from JSON file
-- [ ] Search for classes from within extension
-- [ ] Grade distribution
-- [ ] Course description
-- [ ] Highlight and use rich text to make course description more readable
-- [ ] auto load
-- [ ] calendar 
-- [ ] calendar file export
-- [ ] save as png
-- [ ] calendar click to open course popup
-- [ ] calendar switch schedule 
-- [ ] User Options
-- [ ] UTPlanner support? (not as much of a priority anymore)
-- [ ] Waitlist support
-- [ ] import classes from waitlist page
-- [ ] waitlist pooling
-- [ ] store in db
-- [ ] see who else is looking at certain classes (waitlist, or has it in their schedule)
-- [ ] CHECK ALL THE TODOs in CODE BEFORE LAUNCHING
 
+-   [x] scraping course information
+-   [x] injecting plus header and buttons
+-   [ ] auto loading next pages
+-   [ ] showing course popup
+-   [ ] RMP, eCis, Textbook, and Syllabus buttons
+-   [ ] displaying professor information on popup
+-   [ ] saving courses
+-   [ ] 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
+-   [ ] Count how many hours and # of classes in schedule
+-   [ ] Conflict highlighting
+-   [ ] Tooltip that says which classes conflict, maybe suggest a different section or time that doesn't conflict
+-   [ ] import / export schedules from JSON file
+-   [ ] Search for classes from within extension
+-   [ ] Grade distribution
+-   [ ] Course description
+-   [ ] Highlight and use rich text to make course description more readable
+-   [ ] auto load
+-   [ ] calendar
+-   [ ] calendar file export
+-   [ ] save as png
+-   [ ] calendar click to open course popup
+-   [ ] calendar switch schedule
+-   [ ] User Options
+-   [ ] 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)
@@ -63,9 +67,8 @@ Last Updated: 03/4/2023
 -   [ ] polish
 -   [ ] more 'at a glance info'
 -   [ ] Rearrange Courses
--   [ ] Firefo  Support
+-   [ ] Firefo Support
 -   [ ] RMP (cumulative score for class based off CIS, RMP, grade dist., etc.)
 -   [ ] Conflict indicator ( Possible different section? )
 -   [ ] Compare classes mode
 -   [ ] Screenshotting calendar on zoomed browser cuts off image.
-