diff --git a/ENVIRONMENTVARS.md b/ENVIRONMENTVARS.md new file mode 100644 index 00000000..5c151eb7 --- /dev/null +++ b/ENVIRONMENTVARS.md @@ -0,0 +1,32 @@ +# DC Facelift Environment Variables + +## Table of Contents + +- [General Information](#general-information) +- [Application Variables](#application-variables) + +## General Information + +Environment variables are used in this code repository to control how the application builds, how and where data is fetched for separate sections in the application, for rendering certain features, and for controlling data flow. + +General environment variables are declared in the `.env.example` file. A copy of this file should be made and saved as `.env.local` where real values should be added. + +Generally, environment variables are meant to be read through the `process.env` object _on the server_. Variables intended for use on the client side should be prefaced with NEXT*PUBLIC* per Next's [docs](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables). + +If an environment variable is updated, make sure to restart the server for the application to pick up the new value. + +## Application Variables + +These environment variables control how certain elements on the page render and where to fetch data. + +| Variable | Type | Value Example | Description | +| ---------------------------- | ------ | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| `APP_ENV` | string | "development" | App environment key used to determine various environment-specific app settings. | +| `DC_URL` | string | "" or "https://qa-digitalcollections.nypl.org" or https://digitalcollections.nypl.org | The base URL of the DC url, either points locally or externally to legacy DC. | +| `API_URL` | string | "https://api.repo.nypl.org" or "https://qa.api.repo.nypl.org" | base url for Repo API calls. | +| `AUTH_TOKEN` | string | "" | Auth token for Repo API. | +| `ADOBE_EMBED_URL` | string | "" | Url endpoint used for Adobe Analytics event tracking. | +| `GOOGLE_SHEETS_CLIENT_EMAIL` | string | "" | | +| `GOOGLE_SHEETS_PRIVATE_KEY` | string | "" | | +| `SPREADSHEET_ID` | string | "" | | +| `NEW_RELIC_LICENSE_KEY` | string | "true" | | diff --git a/__tests__/__mocks__/data/mockPaginatedCollections.tsx b/__tests__/__mocks__/data/mockPaginatedCollections.tsx new file mode 100644 index 00000000..24f50330 --- /dev/null +++ b/__tests__/__mocks__/data/mockPaginatedCollections.tsx @@ -0,0 +1,455 @@ +export const mockPaginatedCollections = { + nyplAPI: { + response: { + numResults: "954924", + page: "1", + perPage: "40", + collection: [ + { + uuid: "60932400-20f2-0138-8583-05c43d448773", + title: "Posada Collection", + url: "https://digitalcollections.nypl.org/collections/posada-collection#/?tab=navigation", + imageID: "58270299", + numberOfDigitizedItems: 34, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "724303e0-c6bb-012f-afbd-58d385a7bc34", + title: "MAVO", + url: "https://digitalcollections.nypl.org/collections/mavo#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 35, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "6b6532b0-5df7-013b-36f8-0242ac110002", + title: "Austin Hansen photograph collection", + url: "https://digitalcollections.nypl.org/collections/austin-hansen-photograph-collection#/?tab=navigation", + imageID: "58300996", + numberOfDigitizedItems: 65, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "5b996640-c31c-0139-0bac-0242ac110004", + title: + "Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers", + url: "https://digitalcollections.nypl.org/collections/arthur-alfonso-schomburg-papers#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 55, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "d3802d10-f49a-0139-3bff-0242ac110002", + title: "Friedman-Abeles photographs", + url: "https://digitalcollections.nypl.org/collections/friedman-abeles-photographs#/?tab=navigation", + imageID: "58498722", + numberOfDigitizedItems: 35, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "e5462600-c5d9-012f-a6a3-58d385a7bc34", + title: "Farm Security Administration Photographs", + url: "https://digitalcollections.nypl.org/collections/farm-security-administration-photographs#/?tab=navigation", + imageID: "1952272", + numberOfDigitizedItems: 36, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "812e5770-c60c-012f-7167-58d385a7bc34", + title: "Changing New York", + url: "https://digitalcollections.nypl.org/collections/changing-new-york#/?tab=navigation", + imageID: "58447105", + numberOfDigitizedItems: 37, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "f7ffc990-c5ae-012f-eb75-58d385a7bc34", + title: + "The Black Experience in Children's Books: Selections from Augusta Baker's Bibliographies", + url: "https://digitalcollections.nypl.org/collections/the-black-experience-in-childrens-books-selections-from-augusta-bakers#/?tab=about", + imageID: "56958645", + numberOfDigitizedItems: 153, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "60932400-20f2-0138-8583-05c43d448773", + title: "Posada Collection", + url: "https://digitalcollections.nypl.org/collections/posada-collection#/?tab=navigation", + imageID: "58270299", + numberOfDigitizedItems: 34, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "724303e0-c6bb-012f-afbd-58d385a7bc34", + title: "MAVO", + url: "https://digitalcollections.nypl.org/collections/mavo#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 35, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "6b6532b0-5df7-013b-36f8-0242ac110002", + title: "Austin Hansen photograph collection", + url: "https://digitalcollections.nypl.org/collections/austin-hansen-photograph-collection#/?tab=navigation", + imageID: "58300996", + numberOfDigitizedItems: 65, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "5b996640-c31c-0139-0bac-0242ac110004", + title: + "Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers", + url: "https://digitalcollections.nypl.org/collections/arthur-alfonso-schomburg-papers#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 55, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "d3802d10-f49a-0139-3bff-0242ac110002", + title: "Friedman-Abeles photographs", + url: "https://digitalcollections.nypl.org/collections/friedman-abeles-photographs#/?tab=navigation", + imageID: "58498722", + numberOfDigitizedItems: 35, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "e5462600-c5d9-012f-a6a3-58d385a7bc34", + title: "Farm Security Administration Photographs", + url: "https://digitalcollections.nypl.org/collections/farm-security-administration-photographs#/?tab=navigation", + imageID: "1952272", + numberOfDigitizedItems: 36, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "812e5770-c60c-012f-7167-58d385a7bc34", + title: "Changing New York", + url: "https://digitalcollections.nypl.org/collections/changing-new-york#/?tab=navigation", + imageID: "58447105", + numberOfDigitizedItems: 37, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "f7ffc990-c5ae-012f-eb75-58d385a7bc34", + title: + "The Black Experience in Children's Books: Selections from Augusta Baker's Bibliographies", + url: "https://digitalcollections.nypl.org/collections/the-black-experience-in-childrens-books-selections-from-augusta-bakers#/?tab=about", + imageID: "56958645", + numberOfDigitizedItems: 153, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "60932400-20f2-0138-8583-05c43d448773", + title: "Posada Collection", + url: "https://digitalcollections.nypl.org/collections/posada-collection#/?tab=navigation", + imageID: "58270299", + numberOfDigitizedItems: 34, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "724303e0-c6bb-012f-afbd-58d385a7bc34", + title: "MAVO", + url: "https://digitalcollections.nypl.org/collections/mavo#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 35, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "6b6532b0-5df7-013b-36f8-0242ac110002", + title: "Austin Hansen photograph collection", + url: "https://digitalcollections.nypl.org/collections/austin-hansen-photograph-collection#/?tab=navigation", + imageID: "58300996", + numberOfDigitizedItems: 65, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "5b996640-c31c-0139-0bac-0242ac110004", + title: + "Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers", + url: "https://digitalcollections.nypl.org/collections/arthur-alfonso-schomburg-papers#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 55, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "d3802d10-f49a-0139-3bff-0242ac110002", + title: "Friedman-Abeles photographs", + url: "https://digitalcollections.nypl.org/collections/friedman-abeles-photographs#/?tab=navigation", + imageID: "58498722", + numberOfDigitizedItems: 35, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "e5462600-c5d9-012f-a6a3-58d385a7bc34", + title: "Farm Security Administration Photographs", + url: "https://digitalcollections.nypl.org/collections/farm-security-administration-photographs#/?tab=navigation", + imageID: "1952272", + numberOfDigitizedItems: 36, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "812e5770-c60c-012f-7167-58d385a7bc34", + title: "Changing New York", + url: "https://digitalcollections.nypl.org/collections/changing-new-york#/?tab=navigation", + imageID: "58447105", + numberOfDigitizedItems: 37, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "f7ffc990-c5ae-012f-eb75-58d385a7bc34", + title: + "The Black Experience in Children's Books: Selections from Augusta Baker's Bibliographies", + url: "https://digitalcollections.nypl.org/collections/the-black-experience-in-childrens-books-selections-from-augusta-bakers#/?tab=about", + imageID: "56958645", + numberOfDigitizedItems: 153, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "60932400-20f2-0138-8583-05c43d448773", + title: "Posada Collection", + url: "https://digitalcollections.nypl.org/collections/posada-collection#/?tab=navigation", + imageID: "58270299", + numberOfDigitizedItems: 34, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "724303e0-c6bb-012f-afbd-58d385a7bc34", + title: "MAVO", + url: "https://digitalcollections.nypl.org/collections/mavo#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 35, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "6b6532b0-5df7-013b-36f8-0242ac110002", + title: "Austin Hansen photograph collection", + url: "https://digitalcollections.nypl.org/collections/austin-hansen-photograph-collection#/?tab=navigation", + imageID: "58300996", + numberOfDigitizedItems: 65, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "5b996640-c31c-0139-0bac-0242ac110004", + title: + "Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers", + url: "https://digitalcollections.nypl.org/collections/arthur-alfonso-schomburg-papers#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 55, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "d3802d10-f49a-0139-3bff-0242ac110002", + title: "Friedman-Abeles photographs", + url: "https://digitalcollections.nypl.org/collections/friedman-abeles-photographs#/?tab=navigation", + imageID: "58498722", + numberOfDigitizedItems: 35, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "e5462600-c5d9-012f-a6a3-58d385a7bc34", + title: "Farm Security Administration Photographs", + url: "https://digitalcollections.nypl.org/collections/farm-security-administration-photographs#/?tab=navigation", + imageID: "1952272", + numberOfDigitizedItems: 36, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "812e5770-c60c-012f-7167-58d385a7bc34", + title: "Changing New York", + url: "https://digitalcollections.nypl.org/collections/changing-new-york#/?tab=navigation", + imageID: "58447105", + numberOfDigitizedItems: 37, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "f7ffc990-c5ae-012f-eb75-58d385a7bc34", + title: + "The Black Experience in Children's Books: Selections from Augusta Baker's Bibliographies", + url: "https://digitalcollections.nypl.org/collections/the-black-experience-in-childrens-books-selections-from-augusta-bakers#/?tab=about", + imageID: "56958645", + numberOfDigitizedItems: 153, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "60932400-20f2-0138-8583-05c43d448773", + title: "Posada Collection", + url: "https://digitalcollections.nypl.org/collections/posada-collection#/?tab=navigation", + imageID: "58270299", + numberOfDigitizedItems: 34, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "724303e0-c6bb-012f-afbd-58d385a7bc34", + title: "MAVO", + url: "https://digitalcollections.nypl.org/collections/mavo#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 35, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "6b6532b0-5df7-013b-36f8-0242ac110002", + title: "Austin Hansen photograph collection", + url: "https://digitalcollections.nypl.org/collections/austin-hansen-photograph-collection#/?tab=navigation", + imageID: "58300996", + numberOfDigitizedItems: 65, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "5b996640-c31c-0139-0bac-0242ac110004", + title: + "Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers", + url: "https://digitalcollections.nypl.org/collections/arthur-alfonso-schomburg-papers#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 55, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "d3802d10-f49a-0139-3bff-0242ac110002", + title: "Friedman-Abeles photographs", + url: "https://digitalcollections.nypl.org/collections/friedman-abeles-photographs#/?tab=navigation", + imageID: "58498722", + numberOfDigitizedItems: 35, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "e5462600-c5d9-012f-a6a3-58d385a7bc34", + title: "Farm Security Administration Photographs", + url: "https://digitalcollections.nypl.org/collections/farm-security-administration-photographs#/?tab=navigation", + imageID: "1952272", + numberOfDigitizedItems: 36, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "812e5770-c60c-012f-7167-58d385a7bc34", + title: "Changing New York", + url: "https://digitalcollections.nypl.org/collections/changing-new-york#/?tab=navigation", + imageID: "58447105", + numberOfDigitizedItems: 37, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "f7ffc990-c5ae-012f-eb75-58d385a7bc34", + title: + "The Black Experience in Children's Books: Selections from Augusta Baker's Bibliographies", + url: "https://digitalcollections.nypl.org/collections/the-black-experience-in-childrens-books-selections-from-augusta-bakers#/?tab=about", + imageID: "56958645", + numberOfDigitizedItems: 153, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "60932400-20f2-0138-8583-05c43d448773", + title: "Posada Collection", + url: "https://digitalcollections.nypl.org/collections/posada-collection#/?tab=navigation", + imageID: "58270299", + numberOfDigitizedItems: 34, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "724303e0-c6bb-012f-afbd-58d385a7bc34", + title: "MAVO", + url: "https://digitalcollections.nypl.org/collections/mavo#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 35, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "6b6532b0-5df7-013b-36f8-0242ac110002", + title: "Austin Hansen photograph collection", + url: "https://digitalcollections.nypl.org/collections/austin-hansen-photograph-collection#/?tab=navigation", + imageID: "58300996", + numberOfDigitizedItems: 65, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "5b996640-c31c-0139-0bac-0242ac110004", + title: + "Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers Arthur Alfonso Schomburg papers", + url: "https://digitalcollections.nypl.org/collections/arthur-alfonso-schomburg-papers#/?tab=navigation", + imageID: null, + numberOfDigitizedItems: 55, + containsOnSiteMaterials: true, + containsAVMaterial: false, + }, + { + uuid: "d3802d10-f49a-0139-3bff-0242ac110002", + title: "Friedman-Abeles photographs", + url: "https://digitalcollections.nypl.org/collections/friedman-abeles-photographs#/?tab=navigation", + imageID: "58498722", + numberOfDigitizedItems: 35, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "e5462600-c5d9-012f-a6a3-58d385a7bc34", + title: "Farm Security Administration Photographs", + url: "https://digitalcollections.nypl.org/collections/farm-security-administration-photographs#/?tab=navigation", + imageID: "1952272", + numberOfDigitizedItems: 36, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "812e5770-c60c-012f-7167-58d385a7bc34", + title: "Changing New York", + url: "https://digitalcollections.nypl.org/collections/changing-new-york#/?tab=navigation", + imageID: "58447105", + numberOfDigitizedItems: 37, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + { + uuid: "f7ffc990-c5ae-012f-eb75-58d385a7bc34", + title: + "The Black Experience in Children's Books: Selections from Augusta Baker's Bibliographies", + url: "https://digitalcollections.nypl.org/collections/the-black-experience-in-childrens-books-selections-from-augusta-bakers#/?tab=about", + imageID: "56958645", + numberOfDigitizedItems: 153, + containsOnSiteMaterials: false, + containsAVMaterial: false, + }, + ], + }, + }, +}; diff --git a/app/collections/[slug]/page.tsx b/app/collections/[slug]/page.tsx index 37297fe0..3212e4db 100644 --- a/app/collections/[slug]/page.tsx +++ b/app/collections/[slug]/page.tsx @@ -1,6 +1,8 @@ import React from "react"; import { Metadata } from "next"; import PageLayout from "../../src/components/pageLayout/pageLayout"; +import SearchResults from "@/src/components/search/results"; +import { mockItems } from "__tests__/__mocks__/data/mockItems"; type CollectionProps = { params: { slug: string }; @@ -29,6 +31,8 @@ export default function Collections({ params }: CollectionProps) { }, ]} adobeAnalyticsPageName={pageName} - > + > + + ); } diff --git a/app/collections/page.tsx b/app/collections/page.tsx index cd496ca3..398e90ba 100644 --- a/app/collections/page.tsx +++ b/app/collections/page.tsx @@ -1,11 +1,12 @@ import React from "react"; import { Metadata } from "next"; import { CollectionsPage } from "../src/components/pages/collectionsPage/collectionsPage"; +import { mockCollectionCards } from "__tests__/__mocks__/data/mockCollectionCards"; export const metadata: Metadata = { title: "Collections - NYPL Digital Collections", }; -export default function Collections() { - return ; +export default async function Collections() { + return ; } diff --git a/app/search/index/page.tsx b/app/search/index/page.tsx index e4db3e33..91774aa4 100644 --- a/app/search/index/page.tsx +++ b/app/search/index/page.tsx @@ -1,13 +1,14 @@ import React from "react"; -import { Metadata } from "next"; import PageLayout from "../../src/components/pageLayout/pageLayout"; import SearchResults from "../../src/components/search/results"; +import { mockItems } from "../../../__tests__/__mocks__/data/mockItems"; // TODO: render mockItems -export const metadata: Metadata = { - title: "Search - NYPL Digital Collections", +export type SearchProps = { + params: { slug: string }; + searchParams: { page: string }; }; -export default function Search() { +export default async function Search() { return ( - + ); } diff --git a/app/src/components/grids/collectionsGrid.tsx b/app/src/components/grids/collectionsGrid.tsx index a8891fbd..e8412e56 100644 --- a/app/src/components/grids/collectionsGrid.tsx +++ b/app/src/components/grids/collectionsGrid.tsx @@ -1,88 +1,29 @@ "use client"; -import { useSearchParams, usePathname, useRouter } from "next/navigation"; -import { Heading, Pagination } from "@nypl/design-system-react-components"; +import React from "react"; import { CollectionCardModel } from "../../models/collectionCard"; import useBreakpoints from "../../hooks/useBreakpoints"; import CollectionDataType from "../../types/CollectionDataType"; -import React, { useRef, useState } from "react"; -import { totalNumPages } from "../../utils/utils"; import { SimpleGrid as DCSimpleGrid } from "../simpleGrid/simpleGrid"; import { Card as DCCard } from "../card/card"; -import { useTooltipOffset } from "@/src/hooks/useTooltipOffset"; - -export const CollectionsGrid = ({ data }: any) => { - const pathname = usePathname(); - const queryParams = useSearchParams(); - const headingRef = useRef(null); - - const [currentPage, setCurrentPage] = useState( - Number(queryParams.get("page")) || 1 - ); - - const { replace } = useRouter(); +export const CollectionsGrid = ({ collections }: any) => { const { isLargerThanLargeTablet } = useBreakpoints(); - const totalPages = totalNumPages(data.numFound, data.perPage); - - const updatePageURL = async (pageNumber: number) => { - const params = new URLSearchParams(); - params.set("page", pageNumber.toString()); - setCurrentPage(pageNumber); - const url = `${pathname}?${params.toString()}#${data.slug}`; - replace(url); - headingRef.current?.focus; - }; - - const cardRef = useRef(null); - const tooltipOffset = useTooltipOffset(cardRef); - return ( - <> - - {`Collections in the ${data.name}`} - - - {data?.collections?.map((collection: CollectionDataType, index) => { - const collectionModel = new CollectionCardModel(collection); - return ( - - ); - })} - - {totalPages > 1 && ( - <> - + {collections?.map((collection: CollectionDataType, index) => { + const collectionModel = new CollectionCardModel(collection); + return ( + - - )} - + ); + })} + ); }; diff --git a/app/src/components/grids/itemsGrid.tsx b/app/src/components/grids/itemsGrid.tsx new file mode 100644 index 00000000..ce8c2ad4 --- /dev/null +++ b/app/src/components/grids/itemsGrid.tsx @@ -0,0 +1,29 @@ +"use client"; + +import useBreakpoints from "../../hooks/useBreakpoints"; +import React from "react"; +import { SimpleGrid as DCSimpleGrid } from "../simpleGrid/simpleGrid"; +import { Card as DCCard } from "../card/card"; +import ItemCardDataType from "@/src/types/ItemCardDataType"; +import { ItemCardModel } from "@/src/models/itemCard"; + +export const ItemsGrid = ({ items }: any) => { + console.log("items are: ", items); + const { isLargerThanLargeTablet } = useBreakpoints(); + + return ( + + {items?.map((item: ItemCardDataType, index) => { + const itemModel = new ItemCardModel(item); + return ( + + ); + })} + + ); +}; diff --git a/app/src/components/pages/collectionLanePage/collectionLanePage.tsx b/app/src/components/pages/collectionLanePage/collectionLanePage.tsx index dd6b5846..d1bed48d 100644 --- a/app/src/components/pages/collectionLanePage/collectionLanePage.tsx +++ b/app/src/components/pages/collectionLanePage/collectionLanePage.tsx @@ -7,13 +7,15 @@ import { import { useParams } from "next/navigation"; import { headerBreakpoints } from "../../../utils/breakpoints"; import { slugToString } from "../../../utils/utils"; -import { mockCollections } from "../../../../../__tests__/__mocks__/data/mockCollections"; +import { mockCollectionCards } from "__tests__/__mocks__/data/mockCollectionCards"; +import { CollectionsGrid } from "../../grids/collectionsGrid"; import React, { useEffect, useRef, useState } from "react"; import PageLayout from "../../pageLayout/pageLayout"; -import { SimpleGrid as DCSimpleGrid } from "../../simpleGrid/simpleGrid"; -import { CollectionCardModel } from "@/src/models/collectionCard"; -import CollectionDataType from "@/src/types/CollectionDataType"; -import { Card as DCCard } from "../../card/card"; +// import CollectionLanesLoading from "../../lanes/collectionLanes/collectionLanesLoading"; +// import { SimpleGrid as DCSimpleGrid } from "../../simpleGrid/simpleGrid"; +// import { CollectionCardModel } from "@/src/models/collectionCard"; +// import CollectionDataType from "@/src/types/CollectionDataType"; +// import { Card as DCCard } from "../../card/card"; import useBreakpoints from "@/src/hooks/useBreakpoints"; import { useTooltipOffset } from "@/src/hooks/useTooltipOffset"; import LaneLoading from "../../lane/laneLoading"; @@ -31,6 +33,7 @@ export default function CollectionLanePage() { useEffect(() => { setIsLoaded(true); }, []); + return ( {isLoaded ? ( - - {mockCollections?.map((collection: CollectionDataType, index) => { - const collectionModel = new CollectionCardModel(collection); - return ( - - ); - })} - + <> + + ) : ( <> , diff --git a/app/src/components/pages/collectionsPage/collectionsPage.tsx b/app/src/components/pages/collectionsPage/collectionsPage.tsx index daa7d90d..1513298d 100644 --- a/app/src/components/pages/collectionsPage/collectionsPage.tsx +++ b/app/src/components/pages/collectionsPage/collectionsPage.tsx @@ -10,7 +10,7 @@ import { } from "@nypl/design-system-react-components"; import { headerBreakpoints } from "../../../utils/breakpoints"; -export const CollectionsPage = () => { +export const CollectionsPage = ({ data }) => { return ( { /> - + ); }; diff --git a/app/src/components/pages/divisionPage/divisionPage.tsx b/app/src/components/pages/divisionPage/divisionPage.tsx index 51974f19..4de60978 100644 --- a/app/src/components/pages/divisionPage/divisionPage.tsx +++ b/app/src/components/pages/divisionPage/divisionPage.tsx @@ -1,16 +1,28 @@ "use client"; -import { useParams } from "next/navigation"; import { Box, Heading, HorizontalRule, Link, + Pagination, } from "@nypl/design-system-react-components"; +import { + useParams, + useSearchParams, + usePathname, + useRouter, +} from "next/navigation"; +import React, { useEffect, useState, useRef } from "react"; import PageLayout from "../../pageLayout/pageLayout"; import { headerBreakpoints } from "../../../utils/breakpoints"; -import { slugToString } from "../../../utils/utils"; -import React, { useEffect, useState } from "react"; +// import { ItemLane } from "../../lanes/itemLane/itemLane"; import { CollectionsGrid } from "../../grids/collectionsGrid"; +// import CollectionLanesLoading from "../../lanes/collectionLanes/collectionLanesLoading"; +import { slugToString, totalNumPages } from "../../../utils/utils"; +import useBreakpoints from "../../../hooks/useBreakpoints"; +// import { slugToString } from "../../../utils/utils"; +// import React, { useEffect, useState } from "react"; +// import { CollectionsGrid } from "../../grids/collectionsGrid"; import { DC_URL } from "@/src/config/constants"; import { Lane as DCLane } from "../../lane/lane"; import LaneLoading from "../../lane/laneLoading"; @@ -21,6 +33,30 @@ export default function DivisionPage({ data }: any) { const title = slugToString(slug); const pageName = `divisions|${slug}`; const [isLoaded, setIsLoaded] = useState(false); + + const pathname = usePathname(); + const queryParams = useSearchParams(); + const headingRef = useRef(null); + + const [currentPage, setCurrentPage] = useState( + Number(queryParams.get("page")) || 1 + ); + + const { replace } = useRouter(); + + const { isLargerThanLargeTablet } = useBreakpoints(); + + const totalPages = totalNumPages(data.numFound, data.perPage); + + const updatePageURL = async (pageNumber: number) => { + const params = new URLSearchParams(); + params.set("page", pageNumber.toString()); + setCurrentPage(pageNumber); + const url = `${pathname}?${params.toString()}#${data.slug}`; + replace(url); + headingRef.current?.focus; + }; + useEffect(() => { setIsLoaded(true); }, []); @@ -31,7 +67,7 @@ export default function DivisionPage({ data }: any) { breadcrumbs={[ { text: "Home", url: "/" }, { text: "Divisions", url: "/divisions" }, - { text: `${title}`, url: `/divisions/${slug}` }, + { text: `${title}`, url: `/divisions/${data.slug}` }, ]} adobeAnalyticsPageName={pageName} > @@ -76,11 +112,38 @@ export default function DivisionPage({ data }: any) { )} + + + {`Collections in the ${data.name}`} + + {isLoaded ? ( - + ) : ( )} + {totalPages > 1 && ( + + )} ); } diff --git a/app/src/components/search/content.tsx b/app/src/components/search/content.tsx index 180426ec..5d6efc68 100644 --- a/app/src/components/search/content.tsx +++ b/app/src/components/search/content.tsx @@ -1,14 +1,27 @@ -import { Box, Menu, Text } from "@nypl/design-system-react-components"; -import { mockCollections } from "__tests__/__mocks__/data/mockCollections"; -import { useSearchParams } from "next/navigation"; -import { useRouter } from "next/navigation"; +import { + Box, + Menu, + Text, + Pagination, +} from "@nypl/design-system-react-components"; +import { useSearchParams, usePathname, useRouter } from "next/navigation"; import { CollectionsGrid } from "../grids/collectionsGrid"; +import React, { useState } from "react"; +import { ItemsGrid } from "../grids/itemsGrid"; -const SearchContent = () => { +const SearchContent = ({ showFilter, isSearchPage, data }) => { + const isLoaded = true; const queryParams = useSearchParams(); const query = queryParams.toString(); const router = useRouter(); + const pathname = usePathname(); + + const totalPages = 3; // TODO: change to be dynamic after API hookup + + const [currentPage, setCurrentPage] = useState( + Number(queryParams.get("page")) || 1 + ); const createQueryString = (name, value) => { const params = new URLSearchParams(); @@ -29,44 +42,70 @@ const SearchContent = () => {

Search params: {query}


- - {" "} - Sort by{" "} - {" "} - + {showFilter ? ( + <> + + {" "} + Sort by{" "} + {" "} + + + ) : null} - + + {/* certainly a better way to handle this but it's annoying me. */} + {isLoaded && isSearchPage ? ( + + ) : ( + + )} + + {totalPages > 1 && ( + + )} ); }; diff --git a/app/src/components/search/results.tsx b/app/src/components/search/results.tsx index 93cca3a8..c51092ae 100644 --- a/app/src/components/search/results.tsx +++ b/app/src/components/search/results.tsx @@ -6,11 +6,15 @@ function SearchBarFallback() { return <>placeholder; } -const SearchResults = ({}) => { +const SearchResults = ({ showFilter, isSearchPage, data }) => { return ( <> }> - + ); diff --git a/app/src/hooks/useTooltipOffset.ts b/app/src/hooks/useTooltipOffset.ts index 756fecae..a184c57f 100644 --- a/app/src/hooks/useTooltipOffset.ts +++ b/app/src/hooks/useTooltipOffset.ts @@ -13,6 +13,7 @@ export function useTooltipOffset(cardRef) { 0, initialImageHeight, ]); + const getOffset = () => { if (cardRef.current) { const image = cardRef.current.children[0] as HTMLElement; diff --git a/app/src/models/collectionCard.ts b/app/src/models/collectionCard.ts index c026c946..ae89e0a0 100644 --- a/app/src/models/collectionCard.ts +++ b/app/src/models/collectionCard.ts @@ -18,7 +18,7 @@ export class CollectionCardModel { this.title = data.title; this.url = process.env.APP_ENV === "development" - ? `/collections/${stringToSlug(data.title)}#/?tab=about` + ? `/collections/${stringToSlug(data.title)}` : data.url; this.imageID = data.image_id || data.imageID; this.imageURL = imageURL(data.imageID, "full", "288,", "0");