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