fix: doesn't autoload on pages that don't have pages to load (#270)

* fix: no autoload on singular pages without next page

* fix: formatted
This commit is contained in:
Sriram Hariharan
2024-10-04 22:20:28 -05:00
committed by GitHub
parent 6a363aeb5c
commit 88eeb620ae
2 changed files with 10 additions and 3 deletions

View File

@@ -7,6 +7,7 @@ import { SiteSupport } from '@views/lib/getSiteSupport';
import type { AutoLoadStatusType } from '@views/lib/loadNextCourseCatalogPage'; import type { AutoLoadStatusType } from '@views/lib/loadNextCourseCatalogPage';
import { import {
AutoLoadStatus, AutoLoadStatus,
getNextButton,
loadNextCourseCatalogPage, loadNextCourseCatalogPage,
removePaginationButtons, removePaginationButtons,
} from '@views/lib/loadNextCourseCatalogPage'; } from '@views/lib/loadNextCourseCatalogPage';
@@ -27,6 +28,7 @@ type Props = {
export default function AutoLoad({ addRows }: Props): JSX.Element | null { export default function AutoLoad({ addRows }: Props): JSX.Element | null {
const [container, setContainer] = useState<HTMLDivElement | null>(null); const [container, setContainer] = useState<HTMLDivElement | null>(null);
const [status, setStatus] = useState<AutoLoadStatusType>(AutoLoadStatus.IDLE); const [status, setStatus] = useState<AutoLoadStatusType>(AutoLoadStatus.IDLE);
const [isSinglePage, setIsSinglePage] = useState(false);
useEffect(() => { useEffect(() => {
const portalContainer = document.createElement('div'); const portalContainer = document.createElement('div');
@@ -35,6 +37,10 @@ export default function AutoLoad({ addRows }: Props): JSX.Element | null {
setContainer(portalContainer); setContainer(portalContainer);
}, []); }, []);
useEffect(() => {
setIsSinglePage(!getNextButton(document));
}, []);
useEffect(() => { useEffect(() => {
removePaginationButtons(document); removePaginationButtons(document);
console.log(`AutoLoad is now ${status}`); console.log(`AutoLoad is now ${status}`);
@@ -43,6 +49,7 @@ export default function AutoLoad({ addRows }: Props): JSX.Element | null {
// This hook will call the callback when the user scrolls to the bottom of the page. // This hook will call the callback when the user scrolls to the bottom of the page.
useInfiniteScroll(async () => { useInfiniteScroll(async () => {
if (isSinglePage) return;
// fetch the next page of courses // fetch the next page of courses
const [status, nextRows] = await loadNextCourseCatalogPage(); const [status, nextRows] = await loadNextCourseCatalogPage();
setStatus(status); setStatus(status);
@@ -55,9 +62,9 @@ export default function AutoLoad({ addRows }: Props): JSX.Element | null {
// add the scraped courses to the current page // add the scraped courses to the current page
addRows(scrapedRows); addRows(scrapedRows);
}, [addRows]); }, [addRows, isSinglePage]);
if (!container || status === AutoLoadStatus.DONE) { if (!container || status === AutoLoadStatus.DONE || isSinglePage) {
return null; return null;
} }

View File

@@ -70,7 +70,7 @@ export async function loadNextCourseCatalogPage(): Promise<[AutoLoadStatusType,
* @param doc the document to get the next button from * @param doc the document to get the next button from
* @returns the next button from the document * @returns the next button from the document
*/ */
function getNextButton(doc: Document) { export function getNextButton(doc: Document) {
return doc.querySelector<HTMLAnchorElement>(NEXT_PAGE_BUTTON_SELECTOR); return doc.querySelector<HTMLAnchorElement>(NEXT_PAGE_BUTTON_SELECTOR);
} }