The data is refreshed with useEffect hooks in CotentContainer. When a user clicks different locations on the map, they move that location into focus but the route stays the same so ContentContainer never runs its useEffect hook to update the data for the active location if needed. Even if it did, all the others would stay stale until clicked on which isn't the best UX (we don't want it to change as soon as you click on it. This will all become irrelevant if we use the realtime db to push updates to the app instead of having the app request data every XX minutes (currently 5). Additionally, it would improve UX if the navbar updated it's highlight on the active location when clicked on the map because right now there is no display of the name of the currently focused location in the map.
Click several other little arrows at the other sensor locations.
Observe the route not changing. Observe the navbar highlight not changing.
Leave the webpage idle for at least 5 minutes. Click around again and observe no WebSocket activity in the JS console.
Click a location on the navbar that changes to the url path and observe a delay while the data is fetched and/or observe WebSocket activity in the JS console.
The data is refreshed with useEffect hooks in CotentContainer. When a user clicks different locations on the map, they move that location into focus but the route stays the same so ContentContainer never runs its useEffect hook to update the data for the active location if needed. Even if it did, all the others would stay stale until clicked on which isn't the best UX (we don't want it to change as soon as you click on it. This will all become irrelevant if we use the realtime db to push updates to the app instead of having the app request data every XX minutes (currently 5). Additionally, it would improve UX if the navbar updated it's highlight on the active location when clicked on the map because right now there is no display of the name of the currently focused location in the map.
Steps to recreate: