Merge pull request #28 from blue-core-lod/result-pagination

Supports pagination for search results

Author: jermnelson

src/actionCreators/search.js

@@ -29,6 +29,8 @@ export const fetchSinopiaSearchResults =
           )
         )
         dispatch(addApiSearchHistory(sinopiaSearchUri, query, keycloak))
+        // Use extracted options from response if available, otherwise use passed options
+        const finalOptions = response.options || options
         dispatch(
           setSearchResults(
             "resource",
@@ -37,8 +39,9 @@ export const fetchSinopiaSearchResults =
             response.totalHits,
             facetResponse || {},
             query,
-            options,
-            response.error
+            finalOptions,
+            response.error,
+            response.links
           )
         )
         if (response.results) {

src/actions/search.js

@@ -11,7 +11,8 @@ export const setSearchResults = (
   facetResults,
   query,
   options,
-  error
+  error,
+  links
 ) => ({
   type: "SET_SEARCH_RESULTS",
   payload: {
@@ -23,6 +24,7 @@ export const setSearchResults = (
     query,
     options,
     error,
+    links,
   },
 })
 

src/components/search/Search.jsx

@@ -13,6 +13,7 @@ import {
   selectSearchUri,
   selectSearchOptions,
   selectSearchTotalResults,
+  selectSearchLinks,
 } from "selectors/search"
 import { sinopiaSearchUri } from "utilities/authorityConfig"
 import useSearch from "hooks/useSearch"
@@ -38,9 +39,10 @@ const Search = (props) => {
   const totalResults = useSelector((state) =>
     selectSearchTotalResults(state, "resource")
   )
+  const links = useSelector((state) => selectSearchLinks(state, "resource"))
 
-  const changeSearchPage = (startOfRange) => {
-    fetchSearchResults(queryString, uri, searchOptions, startOfRange, keycloak)
+  const changeSearchPage = (linkUrl) => {
+    fetchSearchResults(linkUrl, uri, searchOptions, null, keycloak)
   }
 
   return (
@@ -59,6 +61,7 @@ const Search = (props) => {
           resultsPerPage={searchOptions.resultsPerPage}
           startOfRange={searchOptions.startOfRange}
           totalResults={totalResults}
+          links={links}
           changePage={changeSearchPage}
         />
         <SearchResultsMessage />

src/components/search/SearchResultsPaging.jsx

@@ -8,6 +8,36 @@ const SearchResultsPaging = (props) => {
 
   const changePage = (event, page) => {
     event.preventDefault()
+    const lastPage = Math.ceil(props.totalResults / props.resultsPerPage)
+
+    // If we have links and it's a next/previous action, use the link URL
+    if (props.links) {
+      if (page === currentPage + 1) {
+        if (props.links.next) {
+          props.changePage(props.links.next)
+        }
+        return
+      }
+      if (page === currentPage - 1) {
+        if (props.links.prev) {
+          props.changePage(props.links.prev)
+        }
+        return
+      }
+      if (page === 1) {
+        if (props.links.first) {
+          props.changePage(props.links.first)
+        }
+        return
+      }
+      if (page === lastPage) {
+        if (props.links.last) {
+          props.changePage(props.links.last)
+        }
+        return
+      }
+    }
+    // Fallback to offset-based pagination for specific page numbers
     props.changePage((page - 1) * props.resultsPerPage)
   }
 
@@ -25,7 +55,23 @@ const SearchResultsPaging = (props) => {
   const pageButton = (key, label, page, active) => {
     const classes = ["page-item"]
     if (active) classes.push("active")
-    if (page < 1 || page > lastPage) classes.push("disabled")
+
+    // Check if button should be disabled
+    let isDisabled = page < 1 || page > lastPage
+
+    // When using links-based pagination, also check link availability
+    if (props.links && !isDisabled) {
+      if (key === "next" && !props.links.next) {
+        isDisabled = true
+      } else if (key === "previous" && !props.links.prev) {
+        isDisabled = true
+      } else if (key === "first" && !props.links.first) {
+        isDisabled = true
+      }
+    }
+
+    if (isDisabled) classes.push("disabled")
+
     return (
       <li key={key} className={classes.join(" ")}>
         <button
@@ -88,6 +134,7 @@ SearchResultsPaging.propTypes = {
   totalResults: PropTypes.number.isRequired,
   resultsPerPage: PropTypes.number.isRequired,
   startOfRange: PropTypes.number.isRequired,
+  links: PropTypes.object,
 }
 
 export default SearchResultsPaging

src/reducers/search.js

@@ -26,6 +26,7 @@ export const setSearchResults = (state, action) => ({
       typeFilter: action.payload.options?.typeFilter,
       groupFilter: action.payload.options?.groupFilter,
     },
+    links: action.payload.links,
     error: action.payload.error,
   },
 })

src/selectors/search.js

@@ -24,4 +24,7 @@ export const selectSearchOptions = (state, searchType) =>
 export const selectSearchResults = (state, searchType) =>
   state.search[searchType]?.results
 
+export const selectSearchLinks = (state, searchType) =>
+  state.search[searchType]?.links
+
 export const selectHeaderSearch = (state) => state.editor.currentHeaderSearch

src/sinopiaSearch.js

@@ -36,7 +36,38 @@ export const getSearchResultsWithFacets = async (
   if (Config.useResourceTemplateFixtures && hasFixtureResource(query))
     return Promise.resolve(resourceSearchResults(query))
 
-  const body = new URLSearchParams({ q: query })
+  // Check if query is a full URL (for pagination links)
+  let url
+  const extractedOptions = { ...options }
+
+  if (
+    query &&
+    typeof query === "string" &&
+    (query.startsWith("http://") || query.startsWith("https://"))
+  ) {
+    url = query
+    // Extract offset from URL query parameters
+    try {
+      const urlObj = new URL(query)
+      const offset = urlObj.searchParams.get("offset")
+      const limit = urlObj.searchParams.get("limit")
+      if (offset !== null) {
+        extractedOptions.startOfRange = parseInt(offset, 10)
+      }
+      if (limit !== null) {
+        extractedOptions.resultsPerPage = parseInt(limit, 10)
+      }
+    } catch (e) {
+      // If URL parsing fails, continue with original options
+    }
+  } else if (query) {
+    const body = new URLSearchParams({ q: query })
+    url = `${Config.searchHost}${Config.searchPath}?${body}`
+  } else {
+    // If query is null/undefined, construct URL without query parameter
+    url = `${Config.searchHost}${Config.searchPath}`
+  }
+
   // const termsFilters = []
   // if (options.typeFilter) {
   //   termsFilters.push({
@@ -73,7 +104,7 @@ export const getSearchResultsWithFacets = async (
   //     },
   //   }
   // }
-  return fetchSearchResults(body, keycloak)
+  return fetchSearchResultsFromUrl(url, keycloak, extractedOptions)
 }
 
 export const getSearchResultsByUris = (resourceUris) => {
@@ -84,6 +115,8 @@ export const getSearchResultsByUris = (resourceUris) => {
   )
     return Promise.resolve(resourceSearchResults(resourceUris[0])[0])
 
+  // This function appears to be for a different use case
+  // For now, keeping it as-is since it uses a different body format
   const body = {
     query: {
       terms: {
@@ -92,45 +125,47 @@ export const getSearchResultsByUris = (resourceUris) => {
     },
     size: resourceUris.length,
   }
-  return fetchSearchResults(body).then((results) => results[0])
+  // TODO: This needs to be updated to work with the new API
+  const url = `${Config.searchHost}${Config.searchPath}`
+  return fetchSearchResultsFromUrl(url, null).then((results) => results[0])
 }
 
-const fetchSearchResults = (body, keycloak) => {
-  const url = `${Config.searchHost}${Config.searchPath}?${body}`
-  return fetch(url, {
+const fetchSearchResultsFromUrl = (url, keycloak, extractedOptions) => fetch(url, {
     method: "GET",
   })
-    .then((resp) => {
-      return resp.json()
-    })
+    .then((resp) => resp.json())
     .then((json) => {
       if (json.error) {
         return [
           {
             totalHits: 0,
             results: [],
             error: json.error.reason || json.error,
+            options: extractedOptions,
           },
           undefined,
         ]
       }
-      return [hitsToResult(json), aggregationsToResult(json)]
+      const result = hitsToResult(json)
+      // Add extracted options to result
+      result.options = extractedOptions
+      return [result, aggregationsToResult(json)]
     })
     .catch((err) => [
       {
         totalHits: 0,
         results: [],
         error: err.toString(),
+        options: extractedOptions,
       },
       undefined,
     ])
-}
 
 const hitsToResult = (payload) => {
   const results = []
   payload.results.forEach((hit) => {
     const types = hit.data["@type"]
-    let rdfTypes = []
+    const rdfTypes = []
     if (Array.isArray(types)) {
       types.forEach((type) =>
         rdfTypes.push(`http://id.loc.gov/ontologies/bibframe/${type}`)
@@ -145,21 +180,25 @@ const hitsToResult = (payload) => {
     // Handle array of titles
     if (Array.isArray(mainTitle)) {
       // Map each title to extract @value if it's an object, otherwise use as-is
-      const titles = mainTitle.map(title => {
-        if (title && typeof title === 'object' && '@value' in title) {
-          return title['@value']
+      const titles = mainTitle.map((title) => {
+        if (title && typeof title === "object" && "@value" in title) {
+          return title["@value"]
         }
         return title
       })
       // Join multiple titles with a separator
-      label = titles.join(' / ')
-    } else if (mainTitle && typeof mainTitle === 'object' && '@value' in mainTitle) {
+      label = titles.join(" / ")
+    } else if (
+      mainTitle &&
+      typeof mainTitle === "object" &&
+      "@value" in mainTitle
+    ) {
       // Handle single JSON-LD object
-      label = mainTitle['@value']
+      label = mainTitle["@value"]
     }
     results.push({
       uri: hit.uri,
-      label: label,
+      label,
       created: hit.created_at,
       modified: hit.updated_at,
       type: rdfTypes,
@@ -168,8 +207,9 @@ const hitsToResult = (payload) => {
     })
   })
   return {
-    totalHits: results.length,
-    results: results,
+    totalHits: payload.total,
+    results,
+    links: payload.links,
   }
 }
 
@@ -308,8 +348,8 @@ const templateModFromBlueCore = (hit) => {
     id: resourceId,
     originalURI: hit.uri,
     remark: resourceRemark,
-    resourceLabel: resourceLabel,
-    resourceURI: resourceURI,
+    resourceLabel,
+    resourceURI,
     uri: bcURI,
   }
 }