refactoring

src/views/components/injected/TableHead.tsx

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * This adds a new column to the course catalog table header.
+ * @returns
+ */
+export default function TableHead({ children }: PropsWithChildren) {
+    const [portalContainer, setPortalContainer] = useState<HTMLTableCellElement | null>(null);
+
+    useEffect(() => {
+        const portalContainer = document.createElement('th');
+        portalContainer.setAttribute('scope', 'col');
+        portalContainer.setAttribute('id', 'ut-registration-plus-table-head');
+        const lastTableHeadCell = document.querySelector('table thead th:last-child');
+        lastTableHeadCell!.after(portalContainer);
+        setPortalContainer(portalContainer);
+    }, []);
+
+    if (!portalContainer) {
+        return null;
+    }
+
+    return ReactDOM.createPortal(<span>{children}</span>, portalContainer);
+}

src/views/components/injected/TableRow.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from '../common/Button/Button';
+
+interface Props {
+    row: HTMLTableRowElement;
+}
+
+export default function TableRow({ row }: Props) {
+    const [portalContainer, setPortalContainer] = useState<HTMLTableCellElement | null>(null);
+
+    useEffect(() => {
+        const portalContainer = document.createElement('td');
+        const lastTableCell = row.querySelector('td:last-child');
+        lastTableCell!.after(portalContainer);
+        setPortalContainer(portalContainer);
+    }, []);
+
+    if (!portalContainer) {
+        return null;
+    }
+
+    return ReactDOM.createPortal(<Button>Plus</Button>, portalContainer);
+}