fix(map): call updateBoundary directly, remove useEffect

The useEffect-based boundary rendering was unreliable due to React's
state lifecycle - the effect would fire before boundary data arrived
from the API, then not re-trigger properly when data was populated.

New approach:
- Remove the boundary useEffect entirely
- Define updateBoundary function in map load handler
- Store function reference in Zustand store and local ref
- PlaceCard calls updateBoundary(geometry) directly when API returns
- Click handlers call updateBoundary(null) to clear

This bypasses React's render cycle - the map library handles its own
state and we tell it what to draw when we have the data.

Test sequence:
- Click Twin Falls → boundary shows on first click
- Click Kimberly → boundary shows on first click
- Switch between them → old clears, new shows
- Click empty map → boundary clears

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-04-29 23:23:11 +00:00
commit ac7cec972f
3 changed files with 59 additions and 97 deletions

View file

@ -382,6 +382,9 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
const current = useStore.getState().selectedPlace
if (current && current.lat === placeLat && current.lon === placeLon) {
useStore.getState().setSelectedPlace({ ...current, boundary: data.boundary })
// Call updateBoundary directly - bypass React render cycle
const updateBoundary = useStore.getState().updateBoundary
if (updateBoundary) updateBoundary(data.boundary)
}
}
}
@ -406,6 +409,9 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
const current = useStore.getState().selectedPlace
if (current && current.lat === placeLat && current.lon === placeLon) {
useStore.getState().setSelectedPlace({ ...current, boundary: data.boundary })
// Call updateBoundary directly - bypass React render cycle
const updateBoundary = useStore.getState().updateBoundary
if (updateBoundary) updateBoundary(data.boundary)
}
}
}