Merge branch 'dev' into reduce-bundle

opentripplanner · Dec 18, 2024 · fde3213 · fde3213
2 parents 8cd56b5 + 99eed28
commit fde3213
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 129 deletions.
diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
@@ -57,38 +57,47 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
                 title="components.NearbyView.header"
               />
             </Connect(PageTitle)>
-            <h3
+            <styled.span
+              as="h3"
               style={
                 Object {
-                  "opacity": 0,
                   "position": "absolute",
                 }
               }
             >
-              <FormattedMessage
-                id="components.NearbyView.nearbyListIntro"
-                values={
+              <h3
+                className="sc-jvfqPk gYtyWO"
+                style={
                   Object {
-                    "count": 0,
+                    "position": "absolute",
                   }
                 }
               >
-                components.NearbyView.nearbyListIntro
-              </FormattedMessage>
-            </h3>
+                <FormattedMessage
+                  id="components.NearbyView.nearbyListIntro"
+                  values={
+                    Object {
+                      "count": 0,
+                    }
+                  }
+                >
+                  components.NearbyView.nearbyListIntro
+                </FormattedMessage>
+              </h3>
+            </styled.span>
             <styled.ol
               className="base-color-bg"
               style={
                 Object {
-                  "marginTop": 0,
+                  "marginBottom": 0,
                 }
               }
             >
               <ol
-                className="sc-dcwqsv bgYBAJ base-color-bg"
+                className="sc-dcwqsv gGYuaw base-color-bg"
                 style={
                   Object {
-                    "marginTop": 0,
+                    "marginBottom": 0,
                   }
                 }
               >
@@ -4091,38 +4100,47 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                 title="components.NearbyView.header"
               />
             </Connect(PageTitle)>
-            <h3
+            <styled.span
+              as="h3"
               style={
                 Object {
-                  "opacity": 0,
                   "position": "absolute",
                 }
               }
             >
-              <FormattedMessage
-                id="components.NearbyView.nearbyListIntro"
-                values={
+              <h3
+                className="sc-jvfqPk gYtyWO"
+                style={
                   Object {
-                    "count": 20,
+                    "position": "absolute",
                   }
                 }
               >
-                components.NearbyView.nearbyListIntro
-              </FormattedMessage>
-            </h3>
+                <FormattedMessage
+                  id="components.NearbyView.nearbyListIntro"
+                  values={
+                    Object {
+                      "count": 20,
+                    }
+                  }
+                >
+                  components.NearbyView.nearbyListIntro
+                </FormattedMessage>
+              </h3>
+            </styled.span>
             <styled.ol
               className="base-color-bg"
               style={
                 Object {
-                  "marginTop": 0,
+                  "marginBottom": 0,
                 }
               }
             >
               <ol
-                className="sc-dcwqsv bgYBAJ base-color-bg"
+                className="sc-dcwqsv gGYuaw base-color-bg"
                 style={
                   Object {
-                    "marginTop": 0,
+                    "marginBottom": 0,
                   }
                 }
               >

diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js
@@ -55,6 +55,24 @@ class ResponsiveWebapp extends Component {
 
   /** Lifecycle methods **/
 
+  // Check if the position has changed enough to update the currentPosition
+  // (prevent constant updates in nearby view)
+  // .001 works out to be about 94-300 ft depending on the longitude.
+  positionShouldUpdate = (position) => {
+    const { currentPosition } = this.props
+    if (!currentPosition.coords) return true
+    const latChanged =
+      Math.abs(
+        position?.coords?.latitude - currentPosition?.coords?.latitude
+      ) >= 0.001
+    const lonChanged =
+      Math.abs(
+        position?.coords?.longitude - currentPosition?.coords?.longitude
+      ) >= 0.001
+
+    return latChanged || lonChanged
+  }
+
   /* eslint-disable-next-line complexity */
   componentDidUpdate(prevProps) {
     const {
@@ -69,6 +87,7 @@ class ResponsiveWebapp extends Component {
       map,
       matchContentToUrl,
       query,
+      receivedPositionResponse,
       setLocationToCurrent,
       setMapCenter
     } = this.props
@@ -119,6 +138,25 @@ class ResponsiveWebapp extends Component {
       }
     }
 
+    // Watch for position changing on mobile
+    if (isMobile()) {
+      navigator.geolocation.watchPosition(
+        // On success
+        (position) => {
+          const shouldUpdate = this.positionShouldUpdate(position)
+          if (shouldUpdate) {
+            receivedPositionResponse({ position })
+          }
+        },
+        // On error
+        (error) => {
+          console.log('error in watchPosition', error)
+        },
+        // Options
+        { enableHighAccuracy: true }
+      )
+    }
+
     // If the path changes (e.g., via a back button press) check whether the
     // main content needs to switch between, for example, a viewer and a search.
     if (!isEqual(location.pathname, prevProps.location.pathname)) {
@@ -154,7 +192,6 @@ class ResponsiveWebapp extends Component {
       map,
       matchContentToUrl,
       parseUrlQueryString,
-      receivedPositionResponse,
       setNetworkConnectionLost
     } = this.props
     // Add on back button press behavior.
@@ -179,19 +216,6 @@ class ResponsiveWebapp extends Component {
     if (isMobile()) {
       // Test location availability on load
       getCurrentPosition(intl)
-      // Also, watch for changes in position on mobile
-      navigator.geolocation.watchPosition(
-        // On success
-        (position) => {
-          receivedPositionResponse({ position })
-        },
-        // On error
-        (error) => {
-          console.log('error in watchPosition', error)
-        },
-        // Options
-        { enableHighAccuracy: true }
-      )
     }
     // Handle routing to a specific part of the app (e.g. stop viewer) on page
     // load. (This happens prior to routing request in case special routerId is
@@ -426,10 +450,12 @@ class RouterWrapperWithAuth0 extends Component {
 }
 
 const mapStateToWrapperProps = (state) => {
-  const { homeTimezone, map, persistence, reactRouter } = state.otp.config
+  const { homeTimezone, location, map, persistence, reactRouter } =
+    state.otp.config
   return {
     auth0Config: getAuth0Config(persistence),
     autoFly: map.autoFlyOnTripFormUpdate,
+    currentPosition: location?.currentPosition,
     defaultLocale: getDefaultLocale(state.otp.config, state.user.loggedInUser),
     homeTimezone,
     locale: state.otp.ui.locale,