beginning course scraping from row, and created assets folder with departments.json
This commit is contained in:
Sriram Hariharan
221
src/assets/json/departments.json
Normal file
221
src/assets/json/departments.json
Normal file
@@ -0,0 +1,221 @@
|
||||
[
|
||||
"ACC",
|
||||
"ADV",
|
||||
"ASE",
|
||||
"AFR",
|
||||
"AFS",
|
||||
"ASL",
|
||||
"AMS",
|
||||
"AHC",
|
||||
"ANT",
|
||||
"ALD",
|
||||
"ARA",
|
||||
"ARE",
|
||||
"ARI",
|
||||
"ARC",
|
||||
"AED",
|
||||
"ARH",
|
||||
"ART",
|
||||
"AET",
|
||||
"AAS",
|
||||
"ANS",
|
||||
"AST",
|
||||
"BSN",
|
||||
"BEN",
|
||||
"BCH",
|
||||
"BIO",
|
||||
"BME",
|
||||
"BDP",
|
||||
"B A",
|
||||
"BAX",
|
||||
"BGS",
|
||||
"CHE",
|
||||
"CH",
|
||||
"CHI",
|
||||
"C E",
|
||||
"CLA",
|
||||
"C C",
|
||||
"CGS",
|
||||
"COM",
|
||||
"CLD",
|
||||
"CMS",
|
||||
"CRP",
|
||||
"C L",
|
||||
"COE",
|
||||
"CSE",
|
||||
"C S",
|
||||
"CON",
|
||||
"CTI",
|
||||
"CRW",
|
||||
"CDI",
|
||||
"EDC",
|
||||
"CZ",
|
||||
"DAN",
|
||||
"DSC",
|
||||
"D S",
|
||||
"DES",
|
||||
"DEV",
|
||||
"D B",
|
||||
"DRS",
|
||||
"DCH",
|
||||
"ECO",
|
||||
"ELP",
|
||||
"EDP",
|
||||
"E E",
|
||||
"ECE",
|
||||
"EER",
|
||||
"EMA",
|
||||
"ENM",
|
||||
"E M",
|
||||
"E S",
|
||||
"E",
|
||||
"ESL",
|
||||
"ENS",
|
||||
"EVE",
|
||||
"EVS",
|
||||
"EUP",
|
||||
"EUS",
|
||||
"FIN",
|
||||
"F A",
|
||||
"FLU",
|
||||
"FR",
|
||||
"F H",
|
||||
"G E",
|
||||
"GRG",
|
||||
"GEO",
|
||||
"GER",
|
||||
"GSD",
|
||||
"GOV",
|
||||
"GRS",
|
||||
"GK",
|
||||
"GUI",
|
||||
"HAR",
|
||||
"H S",
|
||||
"HCT",
|
||||
"HED",
|
||||
"HEB",
|
||||
"HIN",
|
||||
"HIS",
|
||||
"HDF",
|
||||
"HDO",
|
||||
"H E",
|
||||
"HMN",
|
||||
"ILA",
|
||||
"I",
|
||||
"ISP",
|
||||
"INF",
|
||||
"ITD",
|
||||
"I B",
|
||||
"IRG",
|
||||
"ISL",
|
||||
"ITL",
|
||||
"ITC",
|
||||
"JPN",
|
||||
"J S",
|
||||
"J",
|
||||
"KIN",
|
||||
"KOR",
|
||||
"LAR",
|
||||
"LTC",
|
||||
"LAT",
|
||||
"LAL",
|
||||
"LAS",
|
||||
"LAW",
|
||||
"LEB",
|
||||
"L A",
|
||||
"LAH",
|
||||
"LIN",
|
||||
"MAL",
|
||||
"MAN",
|
||||
"MIS",
|
||||
"MFG",
|
||||
"MNS",
|
||||
"MKT",
|
||||
"MSE",
|
||||
"M",
|
||||
"M E",
|
||||
"MDV",
|
||||
"MAS",
|
||||
"MEL",
|
||||
"MES",
|
||||
"M S",
|
||||
"MOL",
|
||||
"MUS",
|
||||
"NSC",
|
||||
"N S",
|
||||
"NEU",
|
||||
"NOR",
|
||||
"N",
|
||||
"NTR",
|
||||
"OBO",
|
||||
"OPR",
|
||||
"O M",
|
||||
"ORI",
|
||||
"ORG",
|
||||
"PER",
|
||||
"PRS",
|
||||
"PGE",
|
||||
"PGS",
|
||||
"PHM",
|
||||
"PHL",
|
||||
"PED",
|
||||
"P S",
|
||||
"PHY",
|
||||
"PIA",
|
||||
"POL",
|
||||
"POR",
|
||||
"PRC",
|
||||
"PSY",
|
||||
"P A",
|
||||
"PBH",
|
||||
"P R",
|
||||
"RIM",
|
||||
"RTF",
|
||||
"R E",
|
||||
"R S",
|
||||
"RHE",
|
||||
"R M",
|
||||
"RUS",
|
||||
"REE",
|
||||
"SAN",
|
||||
"SAX",
|
||||
"STC",
|
||||
"STM",
|
||||
"S C",
|
||||
"SEL",
|
||||
"S S",
|
||||
"S W",
|
||||
"SOC",
|
||||
"SPN",
|
||||
"SPC",
|
||||
"SED",
|
||||
"SLH",
|
||||
"STA",
|
||||
"SDS",
|
||||
"SUS",
|
||||
"SWE",
|
||||
"TAM",
|
||||
"TXA",
|
||||
"T D",
|
||||
"TRO",
|
||||
"TRU",
|
||||
"TBA",
|
||||
"TUR",
|
||||
"T C",
|
||||
"UKR",
|
||||
"UGS",
|
||||
"UDN",
|
||||
"URB",
|
||||
"URD",
|
||||
"UTS",
|
||||
"UTL",
|
||||
"VIA",
|
||||
"VIO",
|
||||
"V C",
|
||||
"VAS",
|
||||
"VOI",
|
||||
"WGS",
|
||||
"WRT",
|
||||
"YID",
|
||||
"YOR"
|
||||
]
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Course } from 'src/shared/types/Course';
|
||||
import useInfiniteScroll from '../hooks/useInfiniteScroll';
|
||||
@@ -16,7 +16,7 @@ interface Props {
|
||||
*/
|
||||
export default function CourseCatalogMain({ support }: Props) {
|
||||
const [rows, setRows] = React.useState<HTMLTableRowElement[]>([]);
|
||||
const [selectedCourse, setSelectedCourse] = React.useState<Course | null>(null);
|
||||
const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);
|
||||
|
||||
const isScrolling = useInfiniteScroll(async () => {
|
||||
console.log('infinite scroll');
|
||||
@@ -32,11 +32,15 @@ export default function CourseCatalogMain({ support }: Props) {
|
||||
setRows(rows);
|
||||
}, []);
|
||||
|
||||
const handleRowButtonClick = (course: Course) => {
|
||||
setSelectedCourse(course);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TableHead>Plus</TableHead>
|
||||
{rows.map(row => (
|
||||
<TableRow row={row} />
|
||||
<TableRow row={row} onClick={handleRowButtonClick} />
|
||||
))}
|
||||
{isScrolling && <div>Scrolling...</div>}
|
||||
</div>
|
||||
|
||||
@@ -3,23 +3,23 @@ import ReactDOM from 'react-dom';
|
||||
|
||||
/**
|
||||
* This adds a new column to the course catalog table header.
|
||||
* @returns
|
||||
* @returns a react portal to the new column or null if the column has not been created yet.
|
||||
*/
|
||||
export default function TableHead({ children }: PropsWithChildren) {
|
||||
const [portalContainer, setPortalContainer] = useState<HTMLTableCellElement | null>(null);
|
||||
const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const portalContainer = document.createElement('th');
|
||||
portalContainer.setAttribute('scope', 'col');
|
||||
portalContainer.setAttribute('id', 'ut-registration-plus-table-head');
|
||||
const container = document.createElement('th');
|
||||
container.setAttribute('scope', 'col');
|
||||
container.setAttribute('id', 'ut-registration-plus-table-head');
|
||||
const lastTableHeadCell = document.querySelector('table thead th:last-child');
|
||||
lastTableHeadCell!.after(portalContainer);
|
||||
setPortalContainer(portalContainer);
|
||||
lastTableHeadCell!.after(container);
|
||||
setContainer(container);
|
||||
}, []);
|
||||
|
||||
if (!portalContainer) {
|
||||
if (!container) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ReactDOM.createPortal(<span>{children}</span>, portalContainer);
|
||||
return ReactDOM.createPortal(<span>{children}</span>, container);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user