DT-6585 fix tracking errors in navigator

app/component/itinerary/navigator/NaviContainer.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import polyUtil from 'polyline-encoded';
 import { legTime } from '../../../util/legUtils';
+import { checkPositioningPermission } from '../../../action/PositionActions';
 import { GeodeticToEcef, GeodeticToEnu } from '../../../util/geo-utils';
 import { itineraryShape, relayShape } from '../../../util/shapes';
 import NaviBottom from './NaviBottom';
@@ -21,6 +22,7 @@ function NaviContainer(
 ) {
   const [planarLegs, setPlanarLegs] = useState([]);
   const [origin, setOrigin] = useState();
+  const [isPositioningAllowed, setPositioningAllowed] = useState(false);
 
   const position = getStore('PositionStore').getLocationState();
 
@@ -38,7 +40,21 @@ function NaviContainer(
     setOrigin(orig);
   }, [itinerary]);
 
-  const { realTimeLegs, time, isPositioningAllowed } = useRealtimeLegs(
+  useEffect(() => {
+    if (position.hasLocation) {
+      mapRef?.enableMapTracking();
+      setPositioningAllowed(true);
+    } else {
+      checkPositioningPermission().then(permission => {
+        if (permission.state === 'granted') {
+          mapRef?.enableMapTracking();
+          setPositioningAllowed(true);
+        }
+      });
+    }
+  }, [mapRef]);
+
+  const { realTimeLegs, time } = useRealtimeLegs(
     planarLegs,
     mapRef,
     relayEnvironment,

app/component/itinerary/navigator/hooks/useRealtimeLegs.js

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
 import { fetchQuery } from 'react-relay';
-import { checkPositioningPermission } from '../../../../action/PositionActions';
 import { legQuery } from '../../queries/LegQuery';
 import { legTime } from '../../../../util/legUtils';
 import { epochToIso } from '../../../../util/timeUtils';
@@ -87,19 +86,9 @@ function matchLegEnds(legs) {
 }
 
 const useRealtimeLegs = (initialLegs, mapRef, relayEnvironment) => {
-  const [isPositioningAllowed, setPositioningAllowed] = useState(false);
   const [realTimeLegs, setRealTimeLegs] = useState(initialLegs);
   const [time, setTime] = useState(Date.now());
 
-  const enableMapTracking = useCallback(async () => {
-    const permission = await checkPositioningPermission();
-    const isPermissionGranted = permission.state === 'granted' || true;
-    if (isPermissionGranted) {
-      mapRef?.enableMapTracking();
-    }
-    setPositioningAllowed(isPermissionGranted);
-  }, [mapRef]);
-
   const queryAndMapRealtimeLegs = useCallback(
     async legs => {
       if (!legs.length) {
@@ -151,17 +140,16 @@ const useRealtimeLegs = (initialLegs, mapRef, relayEnvironment) => {
   }, [initialLegs, queryAndMapRealtimeLegs]);
 
   useEffect(() => {
-    enableMapTracking();
     fetchAndSetRealtimeLegs();
     const interval = setInterval(() => {
       fetchAndSetRealtimeLegs();
       setTime(Date.now());
     }, 10000);
 
     return () => clearInterval(interval);
-  }, [enableMapTracking, fetchAndSetRealtimeLegs]);
+  }, [fetchAndSetRealtimeLegs]);
 
-  return { realTimeLegs, time, isPositioningAllowed };
+  return { realTimeLegs, time };
 };
 
 export { useRealtimeLegs };

app/component/map/ItineraryPageMap.js

@@ -16,7 +16,7 @@ import LocationMarker from './LocationMarker';
 import MapWithTracking from './MapWithTracking';
 import VehicleMarkerContainer from './VehicleMarkerContainer';
 
-const POINT_FOCUS_ZOOM = 16; // default
+const POINT_FOCUS_ZOOM = 17; // default
 
 function ItineraryPageMap(
   {