42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { Course } from 'src/shared/types/Course';
|
|
import { SiteSupport } from 'src/views/lib/getSiteSupport';
|
|
import { Button } from '../common/Button/Button';
|
|
|
|
interface Props {
|
|
support: SiteSupport;
|
|
element: HTMLTableRowElement;
|
|
onClick: (course: Course) => void;
|
|
}
|
|
|
|
/**
|
|
* 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, element, 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 = element.querySelector('td:last-child');
|
|
lastTableCell!.after(portalContainer);
|
|
setContainer(portalContainer);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setCourse(course);
|
|
}, [element]);
|
|
|
|
if (!container || !course) {
|
|
return null;
|
|
}
|
|
|
|
const handleOnClick = () => {
|
|
onClick(course);
|
|
};
|
|
|
|
return ReactDOM.createPortal(<Button onClick={handleOnClick}>Plus</Button>, container);
|
|
}
|