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}`;
+}