diff --git a/app/src/components/lane/laneLoading.tsx b/app/src/components/lane/laneLoading.tsx index 3a559d0f..0800acaf 100644 --- a/app/src/components/lane/laneLoading.tsx +++ b/app/src/components/lane/laneLoading.tsx @@ -14,7 +14,7 @@ export default function LaneLoading({ withTitle = true }) { )} - + diff --git a/app/src/components/pages/divisionPage/divisionPage.tsx b/app/src/components/pages/divisionPage/divisionPage.tsx index e4dc5674..a51f41d9 100644 --- a/app/src/components/pages/divisionPage/divisionPage.tsx +++ b/app/src/components/pages/divisionPage/divisionPage.tsx @@ -19,8 +19,8 @@ import { CardsGrid } from "../../grids/cardsGrid"; import { totalNumPages, createAdobeAnalyticsPageName, + displayResults, } from "../../../utils/utils"; -import useBreakpoints from "../../../hooks/useBreakpoints"; import { DC_URL } from "@/src/config/constants"; import { Lane as DCLane } from "../../lane/lane"; import LaneLoading from "../../lane/laneLoading"; @@ -38,9 +38,7 @@ export default function DivisionPage({ data }: any) { Number(queryParams.get("page")) || 1 ); - const { replace } = useRouter(); - - const { isLargerThanLargeTablet } = useBreakpoints(); + const { push } = useRouter(); const totalPages = totalNumPages(data.numFound, data.perPage); @@ -49,8 +47,12 @@ export default function DivisionPage({ data }: any) { params.set("page", pageNumber.toString()); setCurrentPage(pageNumber); const url = `${pathname}?${params.toString()}#${data.slug}`; - replace(url); - headingRef.current?.focus; + setIsLoaded(false); + push(url); + setTimeout(() => { + setIsLoaded(true); + headingRef.current?.focus(); + }, 2000); }; useEffect(() => { @@ -110,24 +112,26 @@ export default function DivisionPage({ data }: any) { + {displayResults(data.numFound, data.perPage, data.page)} + + + {`Collections in the ${data.name}`} {isLoaded ? ( ) : ( - <> - - + Array(Math.ceil(data.collections.length / 4)).fill( - + ) )} {totalPages > 1 && ( { + test("displays correct result range for first page with enough results", () => { + expect(displayResults(100, 10, 1)).toBe("Results: 1-10 of 100"); + }); + + test("displays correct result range for middle page", () => { + expect(displayResults(100, 10, 5)).toBe("Results: 41-50 of 100"); + }); + + test("displays correct result range for last page when there are fewer results than perPage", () => { + expect(displayResults(45, 10, 5)).toBe("Results: 41-45 of 45"); + }); + + test("displays correct result range when numFound is less than perPage", () => { + expect(displayResults(8, 10, 1)).toBe("Results: 1-8 of 8"); + }); + + test("displays correct result range for the last page when it's the same as perPage", () => { + expect(displayResults(50, 10, 5)).toBe("Results: 41-50 of 50"); + }); + + test("displays correct range when perPage is greater than numFound", () => { + expect(displayResults(5, 10, 1)).toBe("Results: 1-5 of 5"); + }); +}); diff --git a/app/src/utils/utils.ts b/app/src/utils/utils.ts index 5f0ccefb..981e8fda 100644 --- a/app/src/utils/utils.ts +++ b/app/src/utils/utils.ts @@ -112,3 +112,13 @@ export const createAdobeAnalyticsPageName = ( ): string => { return recordName ? `${base}|${stringToSlug(recordName)}` : base; }; + +export function displayResults( + numFound: number, + perPage: number, + page: number +) { + const start = (page - 1) * perPage + 1; + const end = Math.min(page * perPage, numFound); + return `Results: ${start}-${end} of ${numFound}`; +}