Merge pull request #1324 from opentripplanner/prevent-nearby-constant…

…-updates Prevent constant updating in nearby view
opentripplanner · Dec 18, 2024 · 99eed28 · 99eed28
2 parents 20a7092 + 5dadd96
commit 99eed28
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 43 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,

diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js
@@ -64,7 +64,7 @@ class MobileNavigationBar extends Component {
     const backButtonText = intl.formatMessage({ id: 'common.forms.back' })
 
     return (
-      <header>
+      <header style={{ height: '50px' }}>
         <Navbar className="mobile-navbar-container" fixedTop fluid>
           <Navbar.Header>
             <Navbar.Brand>

diff --git a/lib/components/viewers/nearby/nearby-view.tsx b/lib/components/viewers/nearby/nearby-view.tsx
@@ -22,6 +22,7 @@ import {
   Scrollable
 } from './styled'
 import FromToPicker from './from-to-picker'
+import InvisibleA11yLabel from '../../util/invisible-a11y-label'
 import RentalStation from './rental-station'
 import Stop from './stop'
 import Vehicle from './vehicle-rent'
@@ -273,16 +274,16 @@ function NearbyView({
         />
       )}
       {nearby && (
-        <h3 style={{ opacity: 0, position: 'absolute' }}>
+        <InvisibleA11yLabel as="h3" style={{ position: 'absolute' }}>
           <FormattedMessage
             id="components.NearbyView.nearbyListIntro"
             values={{ count: nearby.length }}
           />
-        </h3>
+        </InvisibleA11yLabel>
       )}
       <NearbySidebarContainer
         className="base-color-bg"
-        style={{ marginTop: mobile ? '50px' : 0 }}
+        style={{ marginBottom: 0 }}
       >
         {/* This is used to scroll to top */}
         <div aria-hidden ref={firstItemRef} />

diff --git a/lib/components/viewers/nearby/styled.tsx b/lib/components/viewers/nearby/styled.tsx
@@ -18,6 +18,10 @@ export const NearbySidebarContainer = styled.ol`
   gap: 1em;
   padding: 0 1em;
   list-style: none;
+
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 50px);
+  }
 `
 
 export const Card = styled.div`