diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index 6c2d83ccd..100229dd1 100644 --- a/packages/map-template/CHANGELOG.md +++ b/packages/map-template/CHANGELOG.md @@ -5,7 +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.53.0] - 2024-07-01 +## [1.53.1] - 2024-07-02 + +### Fixed + +- Wayfinding 'Go' button is now disabled until route is fetched and ready to be displayed. + +## [1.53.0] - 2024-07-01 ### Added diff --git a/packages/map-template/src/components/Wayfinding/Wayfinding.jsx b/packages/map-template/src/components/Wayfinding/Wayfinding.jsx index bf0a2d304..d8ff72d79 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 && } {travelMode === travelModes.BICYCLING && }
{t('Distance')}:
-
{totalDistance && }
+
{totalDistance && areDirectionsReady && }
{t('Estimated time')}:
-
{totalTime && }
+
{totalTime && areDirectionsReady && }
- } diff --git a/packages/map-template/src/components/Wayfinding/Wayfinding.scss b/packages/map-template/src/components/Wayfinding/Wayfinding.scss index e37a7ee7d..7d86fde97 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 { diff --git a/packages/map-template/src/hooks/useDirectionsInfo.js b/packages/map-template/src/hooks/useDirectionsInfo.js index 9c1c8e668..d9d774a0f 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 [areDirectionsReady, setAreDirectionReady] = useState(); useEffect(() => { + setAreDirectionReady(false); if (originLocation?.geometry && destinationLocation?.geometry) { directionsService.getRoute({ origin: getLocationPoint(originLocation), @@ -23,7 +25,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); @@ -38,6 +39,7 @@ const useDirectionsInfo = (originLocation, destinationLocation, directionsServic totalTime, directionsResult }); + setAreDirectionReady(true); } else { setHasFoundRoute(false); } @@ -47,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;