auto generate classes using scss magic, some restyling and refactoring'

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

@@ -1,16 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Course, ScrapedRow } from 'src/shared/types/Course';
-import { SiteSupport } from 'src/views/lib/getSiteSupport';
+import {} from 'src/views/lib/getSiteSupport';
 import { Button } from '../../common/Button/Button';
 import Icon from '../../common/Icon/Icon';
 import styles from './TableRow.module.scss';
 
 interface Props {
-    support: SiteSupport;
     isSelected: boolean;
-    course: Course;
-    element: HTMLTableRowElement;
+    row: ScrapedRow;
     onClick: (...args: any[]) => any;
 }
 
@@ -18,19 +16,25 @@ 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, isSelected, onClick }: Props): JSX.Element | null {
+export default function TableRow({ row, isSelected, onClick }: Props): JSX.Element | null {
     const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
 
+    const { element, course } = row;
+
     useEffect(() => {
         const portalContainer = document.createElement('td');
         const lastTableCell = element.querySelector('td:last-child');
         lastTableCell!.after(portalContainer);
         setContainer(portalContainer);
-    }, []);
+
+        return () => {
+            portalContainer.remove();
+        };
+    }, [element]);
 
     useEffect(() => {
         element.classList[isSelected ? 'add' : 'remove'](styles.selectedRow);
-    }, [course, isSelected, element.classList]);
+    }, [isSelected, element.classList]);
 
     if (!container) {
         return null;