Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable go button when directions are not populated #378

Prev Previous commit
Next Next commit
chore: use specific atom for if route is ready
  • Loading branch information
matbmapspeople committed Jul 2, 2024
commit e4421421a97121dfdc152baba9868cbc7109b673
Original file line number Diff line number Diff line change
@@ -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>}
7 changes: 4 additions & 3 deletions packages/map-template/src/hooks/useDirectionsInfo.js
Original file line number Diff line number Diff line change
@@ -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;