CMS-544: Fix the load more button on Active advisory page takes the u…

…ser back to top of the page (#1545) * CMS-544: Fix the load more button on Active advisory page takes the user back to top of the page * CMS-544: Update getAdvisories with URLSearchParams
bcgov · Dec 10, 2024 · cfab67f · cfab67f
1 parent cdc45a0
commit cfab67f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/src/gatsby/src/components/advisories/advisoryPageNav.js b/src/gatsby/src/components/advisories/advisoryPageNav.js
@@ -1,24 +1,13 @@
 import React from "react"
 import "../../styles/advisories/advisoryPageNav.scss";
 
-const AdvisoryPageNav = ({ pageIndex, pageCount, setPage }) => {
-  const handleLoadMore = () => {
-    setPage(pageIndex + 1)
-  }
-  const handleKeyDownLoadMore = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault()
-      handleLoadMore()
-    }
-  }
-
+const AdvisoryPageNav = ({ pageIndex, pageCount, handleClick }) => {
   return (
     <div className="load-more-button-container">
       {pageIndex < pageCount && (
         <button
           aria-label="Load more results"
-          onClick={handleLoadMore}
-          onKeyDown={e => handleKeyDownLoadMore(e)}
+          onClick={handleClick}
           className="btn btn-secondary load-more-button"
         >
           Load more

diff --git a/src/gatsby/src/pages/active-advisories.js b/src/gatsby/src/pages/active-advisories.js
@@ -224,11 +224,10 @@ const PublicActiveAdvisoriesPage = ({ data }) => {
   const getAdvisories = useCallback(
     q => {
       // q = api query
-
-      let newApiCall = apiUrl + `/public-advisories` + q
-
-      newApiCall += "&limit=" + pageLen // use -1 for unlimited
-      newApiCall += "&start=" + pageLen * (pageIndex - 1)
+      const params = new URLSearchParams(q)
+      params.append("limit", pageLen)
+      params.append("start", pageLen * (pageIndex - 1))
+      const newApiCall = `${apiUrl}/public-advisories?${params.toString()}`
 
       if (apiCall !== newApiCall) {
         // Don't repeat the same call
@@ -251,10 +250,8 @@ const PublicActiveAdvisoriesPage = ({ data }) => {
             setIsSearchError(false)
 
             // Get count
-            let apiCount = apiUrl + "/public-advisories/count" + q
-            if (q === "?queryText") {
-              apiCount = apiUrl + "/public-advisories/count"
-            }
+            const countParams = new URLSearchParams(q)
+            const apiCount = `${apiUrl}/public-advisories/count?${countParams.toString()}`
 
             axios
               .get(apiCount)
@@ -282,12 +279,32 @@ const PublicActiveAdvisoriesPage = ({ data }) => {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pageIndex, apiCall, apiUrl]
+    [apiCall, apiUrl]
   )
 
-  // Page setter exposed to AdvisortyPageNav
-  const setPage = p => {
-    setPageIndex(p)
+  // Load more advisories when 'Load more' button is clicked
+  const handleLoadMore = () => {
+    const newIndex = pageIndex + 1
+    setPageIndex(newIndex)
+    const pageStart = (newIndex - 1) * pageLen
+
+    const aType = getAdvisoryTypeFromUrl()
+    let q = getApiQuery(aType)
+
+    const params = new URLSearchParams(q)
+    params.append("limit", pageLen)
+    params.append("start", pageStart)
+    const newApiCall = `${apiUrl}/public-advisories?${params.toString()}`
+
+    axios.get(newApiCall).then(resultResponse => {
+      if (resultResponse.status === 200) {
+        const newResults = resultResponse.data.data;
+        setAdvisories(prevResults => [...prevResults, ...newResults])
+      }
+    }).catch(error => {
+      console.log(error)
+      setIsSearchError(true)
+    })
   }
 
   // This hashset is used by the advisoryCard.js component to quiclky 
@@ -401,7 +418,7 @@ const PublicActiveAdvisoriesPage = ({ data }) => {
           <AdvisoryPageNav
             pageIndex={pageIndex}
             pageCount={pageCount}
-            setPage={setPage}
+            handleClick={handleLoadMore}
           />
         </div>
       </div>