add functionality to retain scroll position on zone details on zone/t…

[DanNguyen8189]

…ime switch

Issue

#7618
Add functionality to retain scroll position on zone details when selecting another zone/country or timeframe

Description

useScrollHashIntoView, the function responsible for scrolling the zone details panel, depended on useLocation() variables (hash,pathname,search). However, they were not changing as the user scrolled. The function saw that hash/anchor was blank and would scroll to the top every time the zone or time was switched.

Modifications:

• Added a function responsible for setting the scroll position by element id when the user scrolls (useUpdateHashOnScroll)
• That function sets a new state variable (zoneDetailsScrollHashAtom) when it does
• Modified useUpdateHashOnScroll to look at this state variable when determining scroll position. It currently resets this variable and scrolls to the top if the current zone doesn't have the desired section
• Added a getSectionIds function to get the section ids the current zone has, since some zones may not have all of them

It's possible that using useLocation() may still work if we set the hash onto the url when the user scrolls (change useUpdateHashOnScroll to do this) and move useLocation() inside the useEffect instead

Preview

Double check

• I have tested my parser changes locally with poetry run test_parser "zone_key"
• I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

[madsnedergaard]

Thanks for contributing! 🙌
We are currently reworking the app and moving the frontend codebase internally to speed up development, but we'll consider if we can reuse your changes on there in the future :)