first round of updates

NYPL · Dec 11, 2024 · f7adce1 · f7adce1
1 parent be1ef8b
commit f7adce1
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 28 deletions.
diff --git a/app/collections/page.tsx b/app/collections/page.tsx
@@ -6,7 +6,7 @@ import { redirect } from "next/navigation";
 
 export type CollectionsProps = {
   params: { slug: string };
-  searchParams: { page: number; sort: string; collection_keyword: string };
+  searchParams: { page: string; sort: string; collection_keyword: string };
 };
 
 export const metadata: Metadata = {

diff --git a/app/src/components/pages/collectionsPage/collectionsPage.tsx b/app/src/components/pages/collectionsPage/collectionsPage.tsx
@@ -42,23 +42,21 @@ export function CollectionsPage({ data, params }) {
 
   const headingRef = useRef<HTMLHeadingElement>(null);
 
-  // pagination
   const numFound = data.numFound || data.numResults;
   const totalPages = totalNumPages(numFound, data.perPage);
 
-  // set defaults
   const [currentPage, setCurrentPage] = useState<number>(
-    params.page || DEFAULT_PAGE_NUM
+    Number(params.page) || Number(DEFAULT_PAGE_NUM)
   );
 
   const [currentSort, setCurrentSort] = useState<string>(
     params.sort || DEFAULT_COLLECTION_SORT
   );
 
-  const [currentCollectionKeyword, setCurrentCollectionKeyword] =
-    useState<string>(params.collection_keyword || DEFAULT_SEARCH_TERM);
+  const [currentCollectionKeywords, setcurrentCollectionKeywords] =
+    useState<string>(params.collection_keywords || DEFAULT_SEARCH_TERM);
 
-  const handleLoadingState = async (queryString) => {
+  const updateURL = async (queryString) => {
     setIsLoaded(false);
     await push(`${pathname}?${queryString}`);
     setTimeout(() => {
@@ -69,42 +67,41 @@ export function CollectionsPage({ data, params }) {
 
   const handleSearchSubmit = async (e: SyntheticEvent) => {
     e.preventDefault();
-    setCurrentPage(DEFAULT_PAGE_NUM);
+    setCurrentPage(Number(DEFAULT_PAGE_NUM));
     setCurrentSort(DEFAULT_COLLECTION_SORT);
     const queryString = createCollectionsQueryStringFromObject({
-      collection_keyword: currentCollectionKeyword,
+      collection_keywords: currentCollectionKeywords,
       sort: currentSort,
       page: currentPage,
     });
-    handleLoadingState(queryString);
+    updateURL(queryString);
   };
 
   const handleSearchChange = (e: SyntheticEvent) => {
     const target = e.target as HTMLInputElement;
-    setCurrentCollectionKeyword(target.value);
+    setcurrentCollectionKeywords(target.value);
   };
 
   // pagination
-  // Question: Do we want to introduce debouncing?
   const onPageChange = async (pageNumber: number) => {
     setCurrentPage(pageNumber);
     const queryString = createCollectionsQueryStringFromObject({
-      collection_keyword: currentCollectionKeyword,
+      collection_keywords: currentCollectionKeywords,
       sort: currentSort,
       page: pageNumber.toString(),
     });
-    handleLoadingState(queryString);
+    updateURL(queryString);
   };
 
   // sort
   const onMenuClick = async (id) => {
     setCurrentSort(id);
     const queryString = createCollectionsQueryStringFromObject({
-      collection_keyword: currentCollectionKeyword,
+      collection_keywords: currentCollectionKeywords,
       sort: id,
       page: currentPage,
     });
-    handleLoadingState(queryString);
+    updateURL(queryString);
   };
 
   useEffect(() => {
@@ -151,12 +148,12 @@ export function CollectionsPage({ data, params }) {
           textInputProps={{
             isClearable: true,
             isClearableCallback: () => {
-              setCurrentCollectionKeyword(DEFAULT_SEARCH_TERM);
+              setcurrentCollectionKeywords(DEFAULT_SEARCH_TERM);
             },
             labelText: "Search by collection title",
-            name: "collection_keyword",
+            name: "collection_keywords",
             placeholder: "Search by collection title",
-            defaultValue: currentCollectionKeyword,
+            defaultValue: currentCollectionKeywords,
             onChange: (e) => handleSearchChange(e),
           }}
           onSubmit={handleSearchSubmit}
@@ -217,7 +214,7 @@ export function CollectionsPage({ data, params }) {
         }
         ref={headingRef}
         tabIndex={-1}
-        id={"all-collections-page"}
+        id="all-collections-page"
         width="max-content"
       >
         {`Displaying ${displayResults(data.numResults, data.perPage, data.page)}
@@ -228,7 +225,7 @@ export function CollectionsPage({ data, params }) {
         collections.length > 0 ? (
           <CardsGrid records={collections} />
         ) : (
-          <NoResultsFound searchTerm={params.collection_keyword} />
+          <NoResultsFound searchTerm={params.collection_keywords} />
         )
       ) : (
         Array(Math.ceil(collections.length / 4)).fill(

diff --git a/app/src/config/constants.ts b/app/src/config/constants.ts
@@ -14,6 +14,6 @@ export const TRUNCATED_LENGTH = 80;
 
 export const CARDS_PER_PAGE = 48;
 
-export const DEFAULT_PAGE_NUM = 1;
+export const DEFAULT_PAGE_NUM = "1";
 export const DEFAULT_COLLECTION_SORT = "date-desc";
 export const DEFAULT_SEARCH_TERM = "";
diff --git a/app/src/utils/apiHelpers.ts b/app/src/utils/apiHelpers.ts
@@ -2,7 +2,12 @@ import data from "../../src/data/lanes";
 import type { LaneDataType } from "../../src/types/Lane";
 import { imageURL, addCommas, collectionsSortOptions } from "../utils/utils";
 import defaultFeaturedItems from "../data/defaultFeaturedItemData";
-import { CARDS_PER_PAGE } from "../config/constants";
+import {
+  CARDS_PER_PAGE,
+  DEFAULT_COLLECTION_SORT,
+  DEFAULT_PAGE_NUM,
+  DEFAULT_SEARCH_TERM,
+} from "../config/constants";
 import { fetchApi } from "./fetchApi";
 
 export const getHomePageData = async () => {
@@ -157,15 +162,15 @@ export const getDivisionData = async ({
 };
 
 export const getCollectionsData = async ({
-  keyword = "",
-  sortID = "date-desc", // TODO: rename sortID TODO: store defaults as constants
-  pageNum = 1,
+  keyword = DEFAULT_SEARCH_TERM,
+  sortID = DEFAULT_COLLECTION_SORT,
+  pageNum = DEFAULT_PAGE_NUM,
   perPage = CARDS_PER_PAGE,
 }: {
   keyword?: string;
   sortID?: string;
-  pageNum?: number;
-  perPage?: number; // OPEN QUESTION: perhaps remove the "perPage" field because the API default is 48 and that is what we want.
+  pageNum?: string;
+  perPage?: number;
 } = {}) => {
   let apiUrl = `${process.env.API_URL}/api/v2/collections?page=${pageNum}&per_page=${perPage}&sort=${collectionsSortOptions[sortID]}&q=${keyword}`;
   const res = await fetchApi(apiUrl);