From 142db3fffd5c290c96c1d5fb974027c27c4cb1d3 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 13 Dec 2024 14:17:04 -0600 Subject: [PATCH 1/5] Only update currentPosition if the user has moved --- lib/components/app/responsive-webapp.js | 50 ++++++++++++++++++------- 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js index ee4c3c684..2d9c165b6 100644 --- a/lib/components/app/responsive-webapp.js +++ b/lib/components/app/responsive-webapp.js @@ -55,6 +55,23 @@ class ResponsiveWebapp extends Component { /** Lifecycle methods **/ + // Check if the position has changed enough to update the currentPosition + // (prevent constant updates in nearby view) + 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 +86,7 @@ class ResponsiveWebapp extends Component { map, matchContentToUrl, query, + receivedPositionResponse, setLocationToCurrent, setMapCenter } = this.props @@ -119,6 +137,21 @@ class ResponsiveWebapp extends Component { } } + 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 +187,6 @@ class ResponsiveWebapp extends Component { map, matchContentToUrl, parseUrlQueryString, - receivedPositionResponse, setNetworkConnectionLost } = this.props // Add on back button press behavior. @@ -180,18 +212,6 @@ class ResponsiveWebapp extends Component { // 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 +446,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, From 8271f4e967ac5f9aa0f67389a0adb2db97e58f1a Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 13 Dec 2024 14:18:35 -0600 Subject: [PATCH 2/5] Cleaner nearby view styling on mobile --- lib/components/mobile/navigation-bar.js | 2 +- lib/components/viewers/nearby/nearby-view.tsx | 9 ++++++--- lib/components/viewers/nearby/styled.tsx | 4 ++++ 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js index 1e7b0079c..a31e75d02 100644 --- 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 ( -
+
diff --git a/lib/components/viewers/nearby/nearby-view.tsx b/lib/components/viewers/nearby/nearby-view.tsx index 1405f9eae..cf9b1d75b 100644 --- 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' @@ -246,6 +247,8 @@ function NearbyView({ )) + console.log(nearbyItemList) + useEffect(() => { if (!staleData) { setLoading(false) @@ -273,16 +276,16 @@ function NearbyView({ /> )} {nearby && ( -

+ -

+ )} {/* This is used to scroll to top */}
diff --git a/lib/components/viewers/nearby/styled.tsx b/lib/components/viewers/nearby/styled.tsx index d088ebbfe..8ee6bef6e 100644 --- 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` From 50aefa17da6c57be81c3bd0e678edb27369469a6 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 16 Dec 2024 16:00:57 -0600 Subject: [PATCH 3/5] update snapshots --- .../viewers/__snapshots__/nearby-view.js.snap | 66 ++++++++++++------- 1 file changed, 42 insertions(+), 24 deletions(-) diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap index 65c9368a3..1a5af6b06 100644 --- 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" /> -

- - components.NearbyView.nearbyListIntro - -

+ + components.NearbyView.nearbyListIntro + + +
    @@ -4091,38 +4100,47 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = ` title="components.NearbyView.header" /> -

    - - components.NearbyView.nearbyListIntro - -

    + + components.NearbyView.nearbyListIntro + + +
      From 91d6e492e1711ff3bc6f3a39900ae85a3c8862f9 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 16 Dec 2024 17:19:17 -0600 Subject: [PATCH 4/5] Only watch position on mobile --- lib/components/app/responsive-webapp.js | 33 ++++++++++++++----------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js index 2d9c165b6..1e937aaed 100644 --- a/lib/components/app/responsive-webapp.js +++ b/lib/components/app/responsive-webapp.js @@ -137,21 +137,24 @@ class ResponsiveWebapp extends Component { } } - 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 (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)) { From 87e1ac8a29e14cbdeb31b2655ffdb6aa1841401f Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Mon, 16 Dec 2024 17:29:41 -0600 Subject: [PATCH 5/5] Fix comments and console logs --- lib/components/app/responsive-webapp.js | 3 ++- lib/components/viewers/nearby/nearby-view.tsx | 2 -- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js index 1e937aaed..c2e11360c 100644 --- a/lib/components/app/responsive-webapp.js +++ b/lib/components/app/responsive-webapp.js @@ -57,6 +57,7 @@ class ResponsiveWebapp extends Component { // 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 @@ -137,6 +138,7 @@ class ResponsiveWebapp extends Component { } } + // Watch for position changing on mobile if (isMobile()) { navigator.geolocation.watchPosition( // On success @@ -214,7 +216,6 @@ class ResponsiveWebapp extends Component { if (isMobile()) { // Test location availability on load getCurrentPosition(intl) - // Also, watch for changes in position on mobile } // 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 diff --git a/lib/components/viewers/nearby/nearby-view.tsx b/lib/components/viewers/nearby/nearby-view.tsx index cf9b1d75b..9c60ff677 100644 --- a/lib/components/viewers/nearby/nearby-view.tsx +++ b/lib/components/viewers/nearby/nearby-view.tsx @@ -247,8 +247,6 @@ function NearbyView({ )) - console.log(nearbyItemList) - useEffect(() => { if (!staleData) { setLoading(false)