Merge pull request #1159 from opentripplanner/nearby-view-react-to-us…

…er-location nearby view: react to user location
opentripplanner · May 12, 2024 · ce4749d · ce4749d
2 parents 147e870 + 9971a6c
commit ce4749d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 5 deletions.
diff --git 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`]
   >
     <Connect(NearbyView)>
       <NearbyView
+        currentPosition={
+          Object {
+            "coords": null,
+            "error": null,
+            "fetching": false,
+          }
+        }
         fetchNearby={[Function]}
         homeTimezone="America/Los_Angeles"
         nearby={Array []}
@@ -132,6 +139,13 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
   >
     <Connect(NearbyView)>
       <NearbyView
+        currentPosition={
+          Object {
+            "coords": null,
+            "error": null,
+            "fetching": false,
+          }
+        }
         fetchNearby={[Function]}
         homeTimezone="America/Los_Angeles"
         nearby={

diff --git a/lib/components/map/default-map.tsx b/lib/components/map/default-map.tsx
@@ -17,6 +17,7 @@ import {
 } from '../../actions/api'
 import { ComponentContext } from '../../util/contexts'
 import { getActiveItinerary, getActiveSearch } from '../../util/state'
+import { getCurrentPosition } from '../../actions/location'
 import { MainPanelContent } from '../../actions/ui-constants'
 import { setLocation, setMapPopupLocationAndGeocode } from '../../actions/map'
 import { setViewedStop } from '../../actions/ui'
@@ -255,6 +256,7 @@ class DefaultMap extends Component {
       carRentalQuery,
       carRentalStations,
       config,
+      getCurrentPosition,
       intl,
       itinerary,
       mapConfig,
@@ -317,7 +319,12 @@ class DefaultMap extends Component {
           <EndpointsOverlay />
           <RouteViewerOverlay />
           <TransitVehicleOverlay ModeIcon={ModeIcon} />
-          <GeolocateControl position="top-left" />
+          <GeolocateControl
+            onGeolocate={() => {
+              getCurrentPosition(intl)
+            }}
+            position="top-left"
+          />
           <TransitiveOverlay
             getTransitiveRouteLabel={getTransitiveRouteLabel}
           />
@@ -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
@@ -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<HTMLDivElement>(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
@@ -17,6 +17,7 @@ export interface OtpState {
       type: string
     }
   }
+  location: any
   overlay: any
   serviceTimeRange?: {
     end: number