diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap index 432329be4..01fdd64d1 100644 --- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap +++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap @@ -24,6 +24,13 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`] > viewers > nearby view renders proper scooter dates 1`] = ` > - + { + getCurrentPosition(intl) + }} + position="top-left" + /> @@ -433,6 +440,7 @@ const mapStateToProps = (state) => { const mapDispatchToProps = { bikeRentalQuery, carRentalQuery, + getCurrentPosition, setLocation, setMapPopupLocationAndGeocode, setViewedStop, diff --git a/lib/components/viewers/nearby/nearby-view.tsx b/lib/components/viewers/nearby/nearby-view.tsx index 7235875cd..c087e1af3 100644 --- a/lib/components/viewers/nearby/nearby-view.tsx +++ b/lib/components/viewers/nearby/nearby-view.tsx @@ -30,8 +30,10 @@ const AUTO_REFRESH_INTERVAL = 15000 // TODO: use lonlat package type LatLonObj = { lat: number; lon: number } +type CurrentPosition = { coords?: { latitude: number; longitude: number } } type Props = { + currentPosition?: CurrentPosition displayedCoords?: LatLonObj entityId?: string fetchNearby: (latLon: LatLonObj, radius?: number) => void @@ -68,13 +70,20 @@ const getNearbyItem = (place: any) => { } } -function getNearbyCoordsFromUrlOrMapCenter( +function getNearbyCoordsFromUrlOrLocationOrMapCenter( coordsFromUrl?: LatLonObj, + currentPosition?: CurrentPosition, map?: MapRef ): LatLonObj | null { if (coordsFromUrl) { return coordsFromUrl } + + if (currentPosition?.coords) { + const { latitude: lat, longitude: lon } = currentPosition.coords + return { lat, lon } + } + const rawMapCoords = map?.getCenter() const mapCoords = rawMapCoords !== undefined && { lat: rawMapCoords.lat, @@ -87,6 +96,7 @@ function getNearbyCoordsFromUrlOrMapCenter( } function NearbyView({ + currentPosition, displayedCoords, entityId, fetchNearby, @@ -105,8 +115,13 @@ function NearbyView({ const [loading, setLoading] = useState(true) const firstItemRef = useRef(null) const finalNearbyCoords = useMemo( - () => getNearbyCoordsFromUrlOrMapCenter(nearbyViewCoords, map), - [nearbyViewCoords, map] + () => + getNearbyCoordsFromUrlOrLocationOrMapCenter( + nearbyViewCoords, + currentPosition, + map + ), + [nearbyViewCoords, currentPosition, map] ) // Make sure the highlighted location is cleaned up when leaving nearby @@ -266,11 +281,13 @@ function NearbyView({ } const mapStateToProps = (state: AppReduxState) => { - const { config, transitIndex, ui } = state.otp + const { config, location, transitIndex, ui } = state.otp const { nearbyViewCoords } = ui const { nearby } = transitIndex const { entityId } = state.router.location.query + const { currentPosition } = location return { + currentPosition, displayedCoords: nearby?.coords, entityId: entityId && decodeURIComponent(entityId), homeTimezone: config.homeTimezone, diff --git a/lib/util/state-types.ts b/lib/util/state-types.ts index 1b2295794..3daba23c6 100644 --- a/lib/util/state-types.ts +++ b/lib/util/state-types.ts @@ -17,6 +17,7 @@ export interface OtpState { type: string } } + location: any overlay: any serviceTimeRange?: { end: number