Merge pull request #5227 from HSLdevcom/DT-6447

DT-6447 try restarting frozen location watch

Author: partisaani

app/action/PositionActions.js

@@ -200,10 +200,20 @@ export function startLocationWatch(actionContext) {
           watchPosition(actionContext);
           break;
       }
+      watchPending = false;
     });
   }
 }
 
+/* stops location watch */
+export function stopLocationWatch() {
+  if (typeof geoWatchId !== 'undefined') {
+    navigator.geolocation.clearWatch(geoWatchId);
+    geoWatchId = undefined;
+  }
+  watchPending = false;
+}
+
 export function showGeolocationDeniedMessage(actionContext) {
   actionContext.dispatch('GeolocationDenied');
   updateGeolocationMessage(actionContext, 'denied');

app/component/itinerary/navigator/NaviContainer.js

@@ -4,6 +4,10 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
 import { legTime } from '../../../util/legUtils';
 import { legShape, relayShape } from '../../../util/shapes';
+import {
+  startLocationWatch,
+  stopLocationWatch,
+} from '../../../action/PositionActions';
 import NaviBottom from './NaviBottom';
 import NaviCardContainer from './NaviCardContainer';
 import { useRealtimeLegs } from './hooks/useRealtimeLegs';
@@ -23,9 +27,11 @@ function NaviContainer(
     mapRef,
     mapLayerRef,
   },
-  { getStore, router },
+  { executeAction, getStore, router },
 ) {
   const hasPosition = useRef(false);
+  const prevPos = useRef(undefined);
+  const posFrozen = useRef(0);
 
   let position = getStore('PositionStore').getLocationState();
   if (!position.hasLocation) {
@@ -49,6 +55,25 @@ function NaviContainer(
     mapRef?.enableMapTracking(); // try always, shows annoying notifier
   }, [mapRef, hasPosition.current]);
 
+  useEffect(() => {
+    if (position && prevPos.current) {
+      if (
+        prevPos.current.lat === position.lat &&
+        prevPos.current.lon === position.lon
+      ) {
+        posFrozen.current += 1;
+        if (posFrozen.current === 3) {
+          // window.alert('Restarting geolocation watch');
+          executeAction(stopLocationWatch);
+          setTimeout(() => executeAction(startLocationWatch), 10);
+        }
+      } else {
+        posFrozen.current = 0;
+      }
+    }
+    prevPos.current = position;
+  }, [time]);
+
   if (!realTimeLegs?.length) {
     return null;
   }
@@ -111,6 +136,7 @@ NaviContainer.propTypes = {
 };
 
 NaviContainer.contextTypes = {
+  executeAction: PropTypes.func,
   getStore: PropTypes.func.isRequired,
   router: routerShape.isRequired,
 };

app/component/itinerary/navigator/NaviUtils.js

@@ -27,14 +27,14 @@ export function summaryString(legs, time, previousLeg, currentLeg, nextLeg) {
       color = 'color:pink';
     }
     colors.push(l.freezeStart ? 'color:lightblue' : color);
-    msg += `\n%c${legTimeAcc(l.start)}`;
+    msg += `%c${legTimeAcc(l.start)}`;
     colors.push('color:gray');
     msg += `%c-`;
     colors.push(l.freezeEnd ? 'color:lightblue' : color);
     msg += `%c${legTimeAcc(l.end)} `;
   });
   colors.push('color:gray');
-  msg += `\n%c${previousLeg?.mode} ${currentLeg?.mode} ${nextLeg?.mode}`;
+  msg += `%c${previousLeg?.mode} ${currentLeg?.mode} ${nextLeg?.mode}`;
   colors.unshift(msg);
 
   return colors;

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import cloneDeep from 'lodash/cloneDeep';
 import polyUtil from 'polyline-encoded';
 import { useCallback, useEffect, useState } from 'react';
@@ -124,8 +125,9 @@ function getLegsOfInterest(legs, now) {
 function getInitialState(legs) {
   const time = Date.now();
   if (legs.length) {
+    const origin = GeodeticToEcef(legs[0].from.lat, legs[0].from.lon);
     return {
-      origin: GeodeticToEcef(legs[0].from.lat, legs[0].from.lon),
+      origin,
       time,
       realTimeLegs: legs.map(leg => {
         const geometry = polyUtil.decode(leg.legGeometry.points);
@@ -177,25 +179,15 @@ const useRealtimeLegs = (relayEnvironment, initialLegs) => {
 
   const fetchAndSetRealtimeLegs = useCallback(async () => {
     const now = Date.now();
-    if (
-      !realTimeLegs?.length ||
-      now >= legTime(realTimeLegs[realTimeLegs.length - 1].end)
-    ) {
-      setTimeAndRealTimeLegs(prev => ({
-        ...prev,
-        time: now,
-      }));
-    }
-
     const rtLegMap = await queryAndMapRealtimeLegs(realTimeLegs, now).catch(
       err =>
         // eslint-disable-next-line no-console
         console.error('Failed to query and map real time legs', err),
     );
 
     setTimeAndRealTimeLegs(prev => {
-      // Maps previous legs with fresh real time transit legs. If transit leg start is in the past according to previous state,
-      // the transit leg is marked as frozen to prevent the start from shifting in UI.
+      // Maps previous legs with fresh real time transit legs. If transit leg start or end time is in the past according
+      // to previous state, the time is marked as frozen to stabilize the current navigation state.
       // rtLegMap does not contain legs that have ended in the past as they've been filtered before updates are queried
       const rtLegs = prev.realTimeLegs.map(l => {
         const rtLeg =
@@ -223,13 +215,12 @@ const useRealtimeLegs = (relayEnvironment, initialLegs) => {
       matchLegEnds(rtLegs, now);
 
       // Freezes any leg.start|end in the past
-      const rtLegsWithFreezes = rtLegs.map(l => ({
-        ...l,
-        freezeStart: l.freezeStart || legTime(l.start) <= now,
-        freezeEnd: l.freezeEnd || legTime(l.end) <= now,
-      }));
+      rtLegs.forEach(l => {
+        l.freezeStart = legTime(l.start) <= now;
+        l.freezeEnd = legTime(l.end) <= now;
+      });
 
-      return { ...prev, time: now, realTimeLegs: rtLegsWithFreezes };
+      return { ...prev, time: now, realTimeLegs: rtLegs };
     });
   }, [queryAndMapRealtimeLegs]);