63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import React, { useEffect, useMemo, useState } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { Course } from 'src/shared/types/Course';
|
|
import useInfiniteScroll from '../hooks/useInfiniteScroll';
|
|
import { populateSearchInputs } from '../lib/courseCatalog/populateSearchInputs';
|
|
import { SiteSupport } from '../lib/getSiteSupport';
|
|
import TableHead from './injected/TableHead';
|
|
import TableRow from './injected/TableRow';
|
|
|
|
interface Props {
|
|
support: SiteSupport.COURSE_CATALOG_DETAILS | SiteSupport.COURSE_CATALOG_LIST;
|
|
}
|
|
|
|
/**
|
|
* This is the top level react component orchestrating the course catalog page.
|
|
*/
|
|
export default function CourseCatalogMain({ support }: Props) {
|
|
const [rows, setRows] = React.useState<HTMLTableRowElement[]>([]);
|
|
const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);
|
|
|
|
const isScrolling = useInfiniteScroll(async () => {
|
|
console.log('infinite scroll');
|
|
return false;
|
|
});
|
|
|
|
useEffect(() => {
|
|
populateSearchInputs();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const rows = scrapeRowsFromCourseTable();
|
|
setRows(rows);
|
|
}, []);
|
|
|
|
const handleRowButtonClick = (course: Course) => {
|
|
setSelectedCourse(course);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<TableHead>Plus</TableHead>
|
|
{rows.map(row => (
|
|
<TableRow row={row} onClick={handleRowButtonClick} />
|
|
))}
|
|
{isScrolling && <div>Scrolling...</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function scrapeRowsFromCourseTable(): HTMLTableRowElement[] {
|
|
const rows = Array.from(document.querySelectorAll('table tbody tr')) as HTMLTableRowElement[];
|
|
|
|
return Array.from(rows).filter(row => {
|
|
if (row.querySelector('th')) {
|
|
return false;
|
|
}
|
|
if (row.querySelector('td.course_header')) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
}
|