From b3af4d76b52b3d7e06582fb23cc4fa364c1996a8 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak <matb@mapspeople.com> Date: Mon, 17 Jun 2024 12:47:34 +0200 Subject: [PATCH 1/9] chore: create isDirectionReady const, set it to false when fetching is started, set it to true when data is populated, return it --- packages/map-template/src/hooks/useDirectionsInfo.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/map-template/src/hooks/useDirectionsInfo.js b/packages/map-template/src/hooks/useDirectionsInfo.js index 9c1c8e66..89ff2849 100644 --- a/packages/map-template/src/hooks/useDirectionsInfo.js +++ b/packages/map-template/src/hooks/useDirectionsInfo.js @@ -5,7 +5,7 @@ import directionsResponseState from '../atoms/directionsResponseState'; import hasFoundRouteState from '../atoms/hasFoundRouteState'; /* - * Hook to handle when both origin location and destination location are selected, + * Hook to handle when both origin location and destination location are selected, * and have geometry, call the MapsIndoors SDK to get information about the route. */ const useDirectionsInfo = (originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) => { @@ -13,8 +13,10 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic const [totalTime, setTotalTime] = useState(); const [hasFoundRoute, setHasFoundRoute] = useRecoilState(hasFoundRouteState); const [, setDirectionsResponse] = useRecoilState(directionsResponseState); + const [isDirectionReady, setIsDirectionReady] = useState() useEffect(() => { + setIsDirectionReady(false); if (originLocation?.geometry && destinationLocation?.geometry) { directionsService.getRoute({ origin: getLocationPoint(originLocation), @@ -38,6 +40,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic totalTime, directionsResult }); + setIsDirectionReady(true) } else { setHasFoundRoute(false); } @@ -47,7 +50,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic } }, [originLocation, destinationLocation, directionsService, accessibilityOn, travelMode]); - return [totalDistance, totalTime, hasFoundRoute]; + return [totalDistance, totalTime, hasFoundRoute, isDirectionReady]; } export default useDirectionsInfo; From dfa2db1da1636c11c2de3bad0d02f4806fc651b1 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak <matb@mapspeople.com> Date: Mon, 17 Jun 2024 12:47:50 +0200 Subject: [PATCH 2/9] chore: use isDirectionReady to disable go button --- .../src/components/Wayfinding/Wayfinding.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx index bf0a2d30..57cbd266 100644 --- a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx +++ b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx @@ -104,7 +104,8 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction const distanceUnitSystem = useRecoilValue(distanceUnitSystemSelector); - const [totalDistance, totalTime, hasFoundRoute] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) + const [totalDistance, totalTime, hasFoundRoute, isDirectionReady] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) + console.log(isDirectionReady); /** * Decorates location with data that is required for wayfinding to work. @@ -479,15 +480,15 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction {travelMode === travelModes.DRIVING && <DriveIcon />} {travelMode === travelModes.BICYCLING && <BikeIcon />} <div>{t('Distance')}:</div> - <div className="wayfinding__meters">{totalDistance && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div> + <div className="wayfinding__meters">{totalDistance && isDirectionReady && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div> </div> <div className="wayfinding__time"> <ClockIcon /> <div>{t('Estimated time')}:</div> - <div className="wayfinding__minutes">{totalTime && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div> + <div className="wayfinding__minutes">{totalTime && isDirectionReady && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div> </div> </div> - <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()}> + <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()} disabled={!isDirectionReady}> {t('Go!')} </button> </div>} From a0fda58712cea73881f4163b2e3d2e8322a72bd0 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak <matb@mapspeople.com> Date: Mon, 17 Jun 2024 12:48:00 +0200 Subject: [PATCH 3/9] chore: apply specific styling when button is disabled --- .../map-template/src/components/Wayfinding/Wayfinding.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/map-template/src/components/Wayfinding/Wayfinding.scss b/packages/map-template/src/components/Wayfinding/Wayfinding.scss index e37a7ee7..7d86fde9 100644 --- a/packages/map-template/src/components/Wayfinding/Wayfinding.scss +++ b/packages/map-template/src/components/Wayfinding/Wayfinding.scss @@ -149,6 +149,11 @@ &:hover { filter: brightness(90%); } + + &:disabled { + opacity: 0.3; + cursor: not-allowed; + } } &__scrollable { From edcdca5bb8d8df7ab9d3f9bcfcdbda2118781a05 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak <matb@mapspeople.com> Date: Mon, 17 Jun 2024 12:48:52 +0200 Subject: [PATCH 4/9] chore: remove console log --- packages/map-template/src/components/Wayfinding/Wayfinding.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx index 57cbd266..b3c67c07 100644 --- a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx +++ b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx @@ -105,7 +105,6 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction const distanceUnitSystem = useRecoilValue(distanceUnitSystemSelector); const [totalDistance, totalTime, hasFoundRoute, isDirectionReady] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) - console.log(isDirectionReady); /** * Decorates location with data that is required for wayfinding to work. From a963c8bc19dccef507b7316f83bd5fbe5d7bc977 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak <matb@mapspeople.com> Date: Fri, 21 Jun 2024 14:36:56 +0200 Subject: [PATCH 5/9] chore: use better naming --- .../map-template/src/components/Wayfinding/Wayfinding.jsx | 8 ++++---- packages/map-template/src/hooks/useDirectionsInfo.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx index b3c67c07..d8ff72d7 100644 --- a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx +++ b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx @@ -104,7 +104,7 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction const distanceUnitSystem = useRecoilValue(distanceUnitSystemSelector); - const [totalDistance, totalTime, hasFoundRoute, isDirectionReady] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) + const [totalDistance, totalTime, hasFoundRoute, areDirectionsReady] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) /** * Decorates location with data that is required for wayfinding to work. @@ -479,15 +479,15 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction {travelMode === travelModes.DRIVING && <DriveIcon />} {travelMode === travelModes.BICYCLING && <BikeIcon />} <div>{t('Distance')}:</div> - <div className="wayfinding__meters">{totalDistance && isDirectionReady && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div> + <div className="wayfinding__meters">{totalDistance && areDirectionsReady && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div> </div> <div className="wayfinding__time"> <ClockIcon /> <div>{t('Estimated time')}:</div> - <div className="wayfinding__minutes">{totalTime && isDirectionReady && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div> + <div className="wayfinding__minutes">{totalTime && areDirectionsReady && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div> </div> </div> - <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()} disabled={!isDirectionReady}> + <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()} disabled={!areDirectionsReady}> {t('Go!')} </button> </div>} diff --git a/packages/map-template/src/hooks/useDirectionsInfo.js b/packages/map-template/src/hooks/useDirectionsInfo.js index 89ff2849..280091cc 100644 --- a/packages/map-template/src/hooks/useDirectionsInfo.js +++ b/packages/map-template/src/hooks/useDirectionsInfo.js @@ -13,10 +13,10 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic const [totalTime, setTotalTime] = useState(); const [hasFoundRoute, setHasFoundRoute] = useRecoilState(hasFoundRouteState); const [, setDirectionsResponse] = useRecoilState(directionsResponseState); - const [isDirectionReady, setIsDirectionReady] = useState() + const [areDirectionsReady, setAreDirectionReady] = useState() useEffect(() => { - setIsDirectionReady(false); + setAreDirectionReady(false); if (originLocation?.geometry && destinationLocation?.geometry) { directionsService.getRoute({ origin: getLocationPoint(originLocation), @@ -40,7 +40,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic totalTime, directionsResult }); - setIsDirectionReady(true) + setAreDirectionReady(true) } else { setHasFoundRoute(false); } @@ -50,7 +50,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic } }, [originLocation, destinationLocation, directionsService, accessibilityOn, travelMode]); - return [totalDistance, totalTime, hasFoundRoute, isDirectionReady]; + return [totalDistance, totalTime, hasFoundRoute, areDirectionsReady]; } export default useDirectionsInfo; From b5c1dec74eb63e9ffbb1b58c72aca2cc2e846ca4 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak <matb@mapspeople.com> Date: Tue, 25 Jun 2024 08:41:37 +0200 Subject: [PATCH 6/9] chore: use hasFoundRoute --- .../map-template/src/components/Wayfinding/Wayfinding.jsx | 8 ++++---- packages/map-template/src/hooks/useDirectionsInfo.js | 8 +++----- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx index d8ff72d7..a82fa742 100644 --- a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx +++ b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx @@ -104,7 +104,7 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction const distanceUnitSystem = useRecoilValue(distanceUnitSystemSelector); - const [totalDistance, totalTime, hasFoundRoute, areDirectionsReady] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) + const [totalDistance, totalTime, hasFoundRoute] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) /** * Decorates location with data that is required for wayfinding to work. @@ -479,15 +479,15 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction {travelMode === travelModes.DRIVING && <DriveIcon />} {travelMode === travelModes.BICYCLING && <BikeIcon />} <div>{t('Distance')}:</div> - <div className="wayfinding__meters">{totalDistance && areDirectionsReady && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div> + <div className="wayfinding__meters">{totalDistance && hasFoundRoute && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div> </div> <div className="wayfinding__time"> <ClockIcon /> <div>{t('Estimated time')}:</div> - <div className="wayfinding__minutes">{totalTime && areDirectionsReady && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div> + <div className="wayfinding__minutes">{totalTime && hasFoundRoute && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div> </div> </div> - <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()} disabled={!areDirectionsReady}> + <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()} disabled={!hasFoundRoute}> {t('Go!')} </button> </div>} diff --git a/packages/map-template/src/hooks/useDirectionsInfo.js b/packages/map-template/src/hooks/useDirectionsInfo.js index 280091cc..62d95590 100644 --- a/packages/map-template/src/hooks/useDirectionsInfo.js +++ b/packages/map-template/src/hooks/useDirectionsInfo.js @@ -13,10 +13,9 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic const [totalTime, setTotalTime] = useState(); const [hasFoundRoute, setHasFoundRoute] = useRecoilState(hasFoundRouteState); const [, setDirectionsResponse] = useRecoilState(directionsResponseState); - const [areDirectionsReady, setAreDirectionReady] = useState() useEffect(() => { - setAreDirectionReady(false); + setHasFoundRoute(false); if (originLocation?.geometry && destinationLocation?.geometry) { directionsService.getRoute({ origin: getLocationPoint(originLocation), @@ -25,7 +24,6 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic avoidStairs: accessibilityOn }).then(directionsResult => { if (directionsResult && directionsResult.legs) { - setHasFoundRoute(true); // Calculate total distance and time const totalDistance = directionsResult.legs.reduce((accumulator, current) => accumulator + current.distance.value, 0); const totalTime = directionsResult.legs.reduce((accumulator, current) => accumulator + current.duration.value, 0); @@ -40,7 +38,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic totalTime, directionsResult }); - setAreDirectionReady(true) + setHasFoundRoute(true); } else { setHasFoundRoute(false); } @@ -50,7 +48,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic } }, [originLocation, destinationLocation, directionsService, accessibilityOn, travelMode]); - return [totalDistance, totalTime, hasFoundRoute, areDirectionsReady]; + return [totalDistance, totalTime, hasFoundRoute]; } export default useDirectionsInfo; From 23ba8b4218ee7336122d6a3ca22f8aeb0ac9810f Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak <matb@mapspeople.com> Date: Thu, 27 Jun 2024 12:48:41 +0200 Subject: [PATCH 7/9] chore: add changelog --- packages/map-template/CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index 1efc8adb..2852002a 100644 --- a/packages/map-template/CHANGELOG.md +++ b/packages/map-template/CHANGELOG.md @@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.52.1] - 2024-06-19 + +### Fixed + +- Wayfinding Go button is now disabled until route is fetched and ready to be displayed. + + ## [1.52.0] - 2024-06-19 ### Added From e4421421a97121dfdc152baba9868cbc7109b673 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak <matb@mapspeople.com> Date: Tue, 2 Jul 2024 11:01:03 +0200 Subject: [PATCH 8/9] chore: use specific atom for if route is ready --- .../map-template/src/components/Wayfinding/Wayfinding.jsx | 8 ++++---- packages/map-template/src/hooks/useDirectionsInfo.js | 7 ++++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx index a82fa742..d8ff72d7 100644 --- a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx +++ b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx @@ -104,7 +104,7 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction const distanceUnitSystem = useRecoilValue(distanceUnitSystemSelector); - const [totalDistance, totalTime, hasFoundRoute] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) + const [totalDistance, totalTime, hasFoundRoute, areDirectionsReady] = useDirectionsInfo(originLocation, destinationLocation, directionsService, travelMode, accessibilityOn) /** * Decorates location with data that is required for wayfinding to work. @@ -479,15 +479,15 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction {travelMode === travelModes.DRIVING && <DriveIcon />} {travelMode === travelModes.BICYCLING && <BikeIcon />} <div>{t('Distance')}:</div> - <div className="wayfinding__meters">{totalDistance && hasFoundRoute && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div> + <div className="wayfinding__meters">{totalDistance && areDirectionsReady && <mi-distance unit={distanceUnitSystem} meters={totalDistance} />}</div> </div> <div className="wayfinding__time"> <ClockIcon /> <div>{t('Estimated time')}:</div> - <div className="wayfinding__minutes">{totalTime && hasFoundRoute && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div> + <div className="wayfinding__minutes">{totalTime && areDirectionsReady && <mi-time translations={JSON.stringify({ days: t('d'), hours: t('h'), minutes: t('min') })} seconds={totalTime} />}</div> </div> </div> - <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()} disabled={!hasFoundRoute}> + <button className="wayfinding__button" style={{ background: primaryColor }} onClick={() => onStartDirections()} disabled={!areDirectionsReady}> {t('Go!')} </button> </div>} diff --git a/packages/map-template/src/hooks/useDirectionsInfo.js b/packages/map-template/src/hooks/useDirectionsInfo.js index 62d95590..d9d774a0 100644 --- a/packages/map-template/src/hooks/useDirectionsInfo.js +++ b/packages/map-template/src/hooks/useDirectionsInfo.js @@ -13,9 +13,10 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic const [totalTime, setTotalTime] = useState(); const [hasFoundRoute, setHasFoundRoute] = useRecoilState(hasFoundRouteState); const [, setDirectionsResponse] = useRecoilState(directionsResponseState); + const [areDirectionsReady, setAreDirectionReady] = useState(); useEffect(() => { - setHasFoundRoute(false); + setAreDirectionReady(false); if (originLocation?.geometry && destinationLocation?.geometry) { directionsService.getRoute({ origin: getLocationPoint(originLocation), @@ -38,7 +39,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic totalTime, directionsResult }); - setHasFoundRoute(true); + setAreDirectionReady(true); } else { setHasFoundRoute(false); } @@ -48,7 +49,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic } }, [originLocation, destinationLocation, directionsService, accessibilityOn, travelMode]); - return [totalDistance, totalTime, hasFoundRoute]; + return [totalDistance, totalTime, hasFoundRoute, areDirectionsReady]; } export default useDirectionsInfo; From 74e078cc1f6313f346cd5638d79c0feec3f57547 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak <matb@mapspeople.com> Date: Tue, 2 Jul 2024 11:23:08 +0200 Subject: [PATCH 9/9] chore: add missing # --- packages/map-template/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index 3f70db26..100229dd 100644 --- a/packages/map-template/CHANGELOG.md +++ b/packages/map-template/CHANGELOG.md @@ -11,7 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Wayfinding 'Go' button is now disabled until route is fetched and ready to be displayed. -# [1.53.0] - 2024-07-01 +## [1.53.0] - 2024-07-01 ### Added