Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CMS-545: Update api fetching on park operating dates page #1560

Merged
merged 1 commit into from
Jan 9, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 55 additions & 41 deletions src/gatsby/src/pages/plan-your-trip/park-operating-dates.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -450,15 +452,27 @@ 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>
))
) : (
<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" />
}
Expand Down
25 changes: 25 additions & 0 deletions src/gatsby/src/utils/advisoryHelper.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -58,6 +82,7 @@ const WINTER_SUB_AREA_ADVISORY = {

export {
loadAdvisories,
loadAllAdvisories,
getAdvisoryTypeFromUrl,
WINTER_FULL_PARK_ADVISORY,
WINTER_SUB_AREA_ADVISORY
Expand Down
Loading