From 2e03eb0d56325a7913e29d7a8ebf1c40620f7f81 Mon Sep 17 00:00:00 2001
From: Ayumi Tanaka <90415568+ayumi-oxd@users.noreply.github.com>
Date: Thu, 9 Jan 2025 15:03:12 -0800
Subject: [PATCH] CMS-545: Update api fetching on park operating dates page
 (#1560)

---
 .../plan-your-trip/park-operating-dates.js    | 96 +++++++++++--------
 src/gatsby/src/utils/advisoryHelper.js        | 25 +++++
 2 files changed, 80 insertions(+), 41 deletions(-)

diff --git a/src/gatsby/src/pages/plan-your-trip/park-operating-dates.js b/src/gatsby/src/pages/plan-your-trip/park-operating-dates.js
index 33cdaa470..a4bce6c8b 100644
--- a/src/gatsby/src/pages/plan-your-trip/park-operating-dates.js
+++ b/src/gatsby/src/pages/plan-your-trip/park-operating-dates.js
@@ -12,18 +12,15 @@ import ParkAccessStatus from "../../components/park/parkAccessStatus"
 import StaticIcon from "../../components/park/staticIcon"
 import NoSearchResults from "../../components/search/noSearchResults"
 import { datePhrase, processDateRanges, groupSubAreaDates } from "../../utils/parkDatesHelper"
-import { loadAdvisories, WINTER_FULL_PARK_ADVISORY, WINTER_SUB_AREA_ADVISORY } from "../../utils/advisoryHelper"
+import { loadAllAdvisories, WINTER_FULL_PARK_ADVISORY, WINTER_SUB_AREA_ADVISORY } from "../../utils/advisoryHelper"
 import "../../styles/listPage.scss"
 
-const ParkLink = ({ park, apiBaseUrl }) => {
+const ParkLink = ({ park, advisories, advisoryLoadError, isLoadingAdvisories }) => {
   const thisYear = new Date().getFullYear()
   const parkOperation = park.parkOperation
   const parkOperationDates = park.parkOperationDates.find(d => d.operatingYear === +thisYear) || {}
   const subAreas = park.parkOperationSubAreas.filter(a => a.isActive) || []
-  const [advisories, setAdvisories] = useState([])
   const [parkAccessStatus, setParkAccessStatus] = useState({})
-  const [advisoryLoadError, setAdvisoryLoadError] = useState(false)
-  const [isLoadingAdvisories, setIsLoadingAdvisories] = useState(true)
   const [addedSeasonalAdvisory, setAddedSeasonalAdvisory] = useState(false)
 
   // Overall operating dates for parks, to display above subareas
@@ -60,36 +57,6 @@ const ParkLink = ({ park, apiBaseUrl }) => {
     }
   }
 
-  const fetchAdvisoriesWithRetry = (retries = 3, delay = 1000) => {
-    setIsLoadingAdvisories(true)
-    loadAdvisories(apiBaseUrl, park.orcs)
-      .then(response => {
-        setAdvisories(response.data.data)
-        setAdvisoryLoadError(false)
-      })
-      .catch(error => {
-        if (error.response && error.response.status === 429 && retries > 0) {
-          // retry with exponential backoff
-          setTimeout(() => {
-            fetchAdvisoriesWithRetry(retries - 1, delay * 2)
-          }, delay)
-        } else {
-          setAdvisories([])
-          setAdvisoryLoadError(true)
-          console.error("Error fetching advisories:", error)
-        }
-      })
-      .finally(() => {
-        setIsLoadingAdvisories(false)
-      })
-  }
-
-  // get advisories
-  useEffect(() => {
-    fetchAdvisoriesWithRetry()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [apiBaseUrl, park.orcs])
-
   if (!addedSeasonalAdvisory) {
     if (advisories.some(a => a.accessStatus?.hidesSeasonalAdvisory)) {
       setAddedSeasonalAdvisory(true)
@@ -351,22 +318,57 @@ const ParkOperatingDatesPage = () => {
     }
   `)
 
+  // constants
   const apiBaseUrl = `${queryData.site.siteMetadata.apiURL}/api`
   const menuContent = queryData?.allStrapiMenu?.nodes || []
   const parks = queryData?.allStrapiProtectedArea?.nodes || []
+  const filters = [
+    "All", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
+    "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
+  ]
 
+  // states
+  const [advisories, setAdvisories] = useState([])
+  const [advisoryLoadError, setAdvisoryLoadError] = useState(false)
+  const [isLoadingAdvisories, setIsLoadingAdvisories] = useState(true)
   const [currentFilter, setCurrentFilter] = useState("All")
 
+  // functions
   const handleClick = (e) => {
     setCurrentFilter(e.target.value)
   }
   const filtering = (char) =>
     parks.filter(park => park.slug.charAt(0).toUpperCase() === char)
   const hasResult = filtering(currentFilter).length > 0 
-  const filters = [
-    "All", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
-    "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
-  ]
+  const filterAdvisoriesByOrcs = (orcs) => {
+    return advisories.filter(advisory => 
+      advisory.protectedAreas.some(protectedArea => protectedArea.orcs === orcs)
+    )
+  }
+  const fetchAdvisories = () => {
+    setIsLoadingAdvisories(true)
+    loadAllAdvisories(apiBaseUrl)
+      .then(response => {
+        setAdvisories(response.data.data)
+        setAdvisoryLoadError(false)
+      })
+      .catch(error => {
+        setAdvisories([])
+        setAdvisoryLoadError(true)
+        console.error("Error fetching advisories:", error)
+      })
+      .finally(() => {
+        setIsLoadingAdvisories(false)
+      })
+  }
+
+  // effects
+  useEffect(() => {
+    fetchAdvisories()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiBaseUrl])
+
+  // components
   const breadcrumbs = [
     <Link key="1" to="/">
       Home
@@ -450,7 +452,13 @@ const ParkOperatingDatesPage = () => {
               filters.map((filter, index) => (
                 <div key={index} className="list">
                   {filtering(filter).map((park, index) => (
-                    <ParkLink park={park} apiBaseUrl={apiBaseUrl} key={index} />
+                    <ParkLink 
+                      key={index}
+                      park={park}
+                      advisories={filterAdvisoriesByOrcs(park.orcs)}
+                      advisoryLoadError={advisoryLoadError}
+                      isLoadingAdvisories={isLoadingAdvisories}
+                    />
                   ))}
                 </div>
               ))
@@ -458,7 +466,13 @@ const ParkOperatingDatesPage = () => {
               <div className="list">
                 {hasResult ? 
                   filtering(currentFilter).map((park, index) => (
-                    <ParkLink park={park} apiBaseUrl={apiBaseUrl} key={index} />
+                    <ParkLink
+                      key={index}
+                      park={park}
+                      advisories={filterAdvisoriesByOrcs(park.orcs)}
+                      advisoryLoadError={advisoryLoadError}
+                      isLoadingAdvisories={isLoadingAdvisories}
+                    />
                   ))
                   : <NoSearchResults page="park-operating-dates" />
                 }
diff --git a/src/gatsby/src/utils/advisoryHelper.js b/src/gatsby/src/utils/advisoryHelper.js
index bbd69e298..2421d7dbe 100644
--- a/src/gatsby/src/utils/advisoryHelper.js
+++ b/src/gatsby/src/utils/advisoryHelper.js
@@ -34,6 +34,30 @@ const loadAdvisories = (apiBaseUrl, orcsId) => {
   return axios.get(`${apiBaseUrl}/public-advisories/items?${params}`)
 }
 
+const loadAllAdvisories = (apiBaseUrl) => {
+  const params = qs.stringify({
+    filters: {
+      advisoryStatus: {
+        code: {
+          $eq: "PUB"
+        }
+      }
+    },
+    fields: ["advisoryNumber"],
+    populate: {
+      accessStatus: { fields: ["accessStatus", "precedence", "color", "groupLabel"] },
+      protectedAreas: { fields: ["orcs"] }
+    },
+    pagination: {
+      limit: 1000,
+    }
+  }, {
+    encodeValuesOnly: true,
+  })
+
+  return axios.get(`${apiBaseUrl}/public-advisories/?${params}`)
+}
+
 const WINTER_FULL_PARK_ADVISORY = {
   id: -1,
   title: "Limited access to this park during winter season",
@@ -58,6 +82,7 @@ const WINTER_SUB_AREA_ADVISORY = {
 
 export {
   loadAdvisories,
+  loadAllAdvisories,
   getAdvisoryTypeFromUrl,
   WINTER_FULL_PARK_ADVISORY,
   WINTER_SUB_AREA_ADVISORY