beginning course scraping from row, and created assets folder with departments.json

src/views/components/injected/TableRow.tsx

@@ -1,24 +1,44 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { Course } from 'src/shared/types/Course';
 import { Button } from '../common/Button/Button';
 
 interface Props {
     row: HTMLTableRowElement;
+    onClick: (course: Course) => void;
 }
 
-export default function TableRow({ row }: Props) {
-    const [portalContainer, setPortalContainer] = useState<HTMLTableCellElement | null>(null);
+/**
+ * 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({ row, onClick }: Props): JSX.Element | null {
+    const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
+    const [course, setCourse] = useState<Course | null>(null);
 
     useEffect(() => {
         const portalContainer = document.createElement('td');
         const lastTableCell = row.querySelector('td:last-child');
         lastTableCell!.after(portalContainer);
-        setPortalContainer(portalContainer);
+        setContainer(portalContainer);
     }, []);
 
-    if (!portalContainer) {
+    useEffect(() => {
+        const course = scrapeCourseFromRow(row);
+        setCourse(course);
+    }, [row]);
+
+    if (!container || !course) {
         return null;
     }
 
-    return ReactDOM.createPortal(<Button>Plus</Button>, portalContainer);
+    const handleOnClick = () => {
+        onClick(course);
+    };
+
+    return ReactDOM.createPortal(<Button onClick={handleOnClick}>Plus</Button>, container);
+}
+
+function scrapeCourseFromRow(row): Course {
+    return null as any;
 }