From e917ea2b65779421f385fab7958e2f2f0ffcc1c8 Mon Sep 17 00:00:00 2001 From: Aarav Jalan Date: Mon, 23 Mar 2026 19:09:57 +0530 Subject: [PATCH 1/4] fix(waypoints): clear placeholder results on panel close (#365) --- .../directions/waypoints/waypoint-item.tsx | 7 +++++-- src/components/route-planner.tsx | 9 ++++++++- src/stores/directions-store.ts | 20 +++++++++++++++++++ 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/components/directions/waypoints/waypoint-item.tsx b/src/components/directions/waypoints/waypoint-item.tsx index e24743dd..00e74dfa 100644 --- a/src/components/directions/waypoints/waypoint-item.tsx +++ b/src/components/directions/waypoints/waypoint-item.tsx @@ -37,8 +37,6 @@ export const Waypoint = ({ id, index }: WaypointProps) => { const doRemoveWaypoint = useDirectionsStore( (state) => state.doRemoveWaypoint ); - const waypoint = waypoints[index]; - const { userInput, geocodeResults } = waypoint!; const handleGeocodeResults = useCallback( (addresses: ActiveWaypoint[]) => { @@ -60,6 +58,11 @@ export const Waypoint = ({ id, index }: WaypointProps) => { [updateTextInput, index, refetchDirections] ); + const waypoint = waypoints.find((wp) => wp.id === id); + if (!waypoint) return null; + + const { userInput, geocodeResults } = waypoint!; + const style = { transform: CSS.Transform.toString(transform), transition, diff --git a/src/components/route-planner.tsx b/src/components/route-planner.tsx index a492fa44..501e91ed 100644 --- a/src/components/route-planner.tsx +++ b/src/components/route-planner.tsx @@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import { DirectionsControl } from './directions/directions'; import { IsochronesControl } from './isochrones/isochrones'; +import { useDirectionsStore } from '@/stores/directions-store'; const TilesControl = lazy(() => import('./tiles/tiles').then((module) => ({ default: module.TilesControl })) @@ -52,6 +53,9 @@ export const RoutePlanner = () => { const loading = useCommonStore((state) => state.loading); const toggleDirections = useCommonStore((state) => state.toggleDirections); + const clearPlaceholderWaypoints = useDirectionsStore( + (state) => state.clearPlaceholderWaypoints + ); const tabConfig = TAB_CONFIG[activeTab as keyof typeof TAB_CONFIG]; const { @@ -124,7 +128,10 @@ export const RoutePlanner = () => { diff --git a/src/hooks/use-directions-queries.ts b/src/hooks/use-directions-queries.ts index 77dbabd2..16f97931 100644 --- a/src/hooks/use-directions-queries.ts +++ b/src/hooks/use-directions-queries.ts @@ -90,7 +90,9 @@ export function useDirectionsQuery() { const data = await fetchDirections(); if (data) { receiveRouteResults({ data }); - zoomTo(data.decodedGeometry); + requestAnimationFrame(() => { + zoomTo(data.decodedGeometry); + }); } return data; } catch (error) { @@ -110,7 +112,7 @@ export function useDirectionsQuery() { } throw error; } finally { - setTimeout(() => showLoading(false), 500); + showLoading(false); } }, enabled: false, @@ -160,6 +162,27 @@ export function useReverseGeocodeDirections() { // Set placeholder immediately updatePlaceholderAddressAtIndex(index, lng, lat); + // If geocoding is disabled, skip the Nominatim round trip entirely. + const use_geocoding = useCommonStore.getState().settings.use_geocoding; + if (!use_geocoding) { + const coordTitle = `${lng.toFixed(6)}, ${lat.toFixed(6)}`; + const coordResult: ActiveWaypoint[] = [ + { + title: coordTitle, + description: '', + selected: true, + addresslnglat: [lng, lat], + sourcelnglat: [lng, lat], + displaylnglat: [lng, lat], + key: 0, + addressindex: 0, + }, + ]; + receiveGeocodeResults({ addresses: coordResult, index }); + updateTextInput({ inputValue: coordTitle, index, addressindex: 0 }); + return coordResult; + } + try { const addresses = await fetchReverseGeocode(lng, lat); receiveGeocodeResults({ From 829318288b94f9258282e777f782fe0a3ed27035 Mon Sep 17 00:00:00 2001 From: Aarav Jalan Date: Tue, 24 Mar 2026 17:26:10 +0530 Subject: [PATCH 3/4] PR Conflict - Fix --- src/hooks/use-directions-queries.ts | 43 ++--------------------------- 1 file changed, 2 insertions(+), 41 deletions(-) diff --git a/src/hooks/use-directions-queries.ts b/src/hooks/use-directions-queries.ts index 16c77afd..c03146ea 100644 --- a/src/hooks/use-directions-queries.ts +++ b/src/hooks/use-directions-queries.ts @@ -86,9 +86,7 @@ export function useDirectionsQuery() { const data = await fetchDirections(); if (data) { receiveRouteResults({ data }); - requestAnimationFrame(() => { - zoomTo(data.decodedGeometry); - }); + zoomTo(data.decodedGeometry); } return data; } catch (error) { @@ -108,7 +106,7 @@ export function useDirectionsQuery() { } throw error; } finally { - showLoading(false); + setTimeout(() => showLoading(false), 500); } }, enabled: false, @@ -147,43 +145,6 @@ export function useReverseGeocodeDirections() { // Set placeholder immediately updatePlaceholderAddressAtIndex(index, lng, lat); - // If geocoding is disabled, skip the Nominatim round trip entirely. - const use_geocoding = useCommonStore.getState().settings.use_geocoding; - if (!use_geocoding) { - const coordTitle = `${lng.toFixed(6)}, ${lat.toFixed(6)}`; - const coordResult: ActiveWaypoint[] = [ - { - title: coordTitle, - description: '', - selected: true, - addresslnglat: [lng, lat], - sourcelnglat: [lng, lat], - displaylnglat: [lng, lat], - key: 0, - addressindex: 0, - }, - ]; - receiveGeocodeResults({ addresses: coordResult, index }); - updateTextInput({ inputValue: coordTitle, index, addressindex: 0 }); - return coordResult; - } - - try { - const addresses = await fetchReverseGeocode(lng, lat); - receiveGeocodeResults({ - addresses, - index, - }); - updateTextInput({ - inputValue: addresses[0]?.title || '', - index, - addressindex: 0, - }); - return addresses; - } catch (error) { - console.error('Reverse geocode error:', error); - throw error; - } // Use raw coordinates directly — no reverse geocoding const lngLat: [number, number] = [lng, lat]; const address: ActiveWaypoint = { From 6ae3bf3312f3841de21ea8715c0e90890f882ef7 Mon Sep 17 00:00:00 2001 From: Aarav Jalan Date: Tue, 24 Mar 2026 17:29:24 +0530 Subject: [PATCH 4/4] PR Conflict - Fix --- src/components/map/index.tsx | 8 +++----- src/components/map/parts/map-context-menu.tsx | 12 ++++-------- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index eea9074e..1ac6d91c 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -301,15 +301,13 @@ export const MapComponent = () => { }); }, []); - // handleAddWaypoint now receives the lngLat from MapContextMenu directly. const handleAddWaypoint = useCallback( - (index: number, lngLat?: { lng: number; lat: number }) => { - const location = lngLat ?? popupLngLat; - if (!location) return; + (index: number) => { + if (!popupLngLat) return; setShowContextPopup(false); updateWaypointPosition({ - latLng: { lat: location.lat, lng: location.lng }, + latLng: { lat: popupLngLat.lat, lng: popupLngLat.lng }, index, }); }, diff --git a/src/components/map/parts/map-context-menu.tsx b/src/components/map/parts/map-context-menu.tsx index 42e45ea5..c85027bb 100644 --- a/src/components/map/parts/map-context-menu.tsx +++ b/src/components/map/parts/map-context-menu.tsx @@ -4,7 +4,7 @@ import { useDirectionsStore } from '@/stores/directions-store'; interface MapContextMenuProps { activeTab: string; - onAddWaypoint: (index: number, lngLat?: { lng: number; lat: number }) => void; + onAddWaypoint: (index: number) => void; onAddIsoWaypoint: () => void; popupLocation: { lng: number; lat: number }; } @@ -26,11 +26,7 @@ export function MapContextMenu({ orientation="vertical" data-testid="button-group-right-context" > -