AB#340 Fix travel companion repeating card

app/component/itinerary/navigator/NaviCardContainer.js

@@ -19,9 +19,10 @@ import usePrevious from './hooks/usePrevious';
 
 const HIDE_TOPCARD_DURATION = 2000; // milliseconds
 
-const getLegType = (leg, firstLeg, time, interlineWithPreviousLeg) => {
+const getLegType = (leg, firstLeg, interlineWithPreviousLeg) => {
   let legType;
-  if (time < legTime(firstLeg.start)) {
+  const currentTime = Date.now();
+  if (currentTime < legTime(firstLeg.start)) {
     if (!firstLeg.forceStart) {
       legType = LEGTYPE.PENDING;
     } else {
@@ -78,7 +79,7 @@ function NaviCardContainer(
   }
 
   // track only relevant vehicles for the journey.
-  // addd 20 s buffer so that vehicle location is available
+  // add 20 s buffer so that vehicle location is available
   // for leg validation long enough
   const getNaviTopics = () =>
     getTopics(
@@ -185,17 +186,14 @@ function NaviCardContainer(
     return () => clearTimeout(timeoutId);
   }, [time, firstLeg]);
 
-  // LegChange fires animation, we need to keep the old data until card goes out of the view.
-  const l = legChanging ? previousLeg : currentLeg;
-  const legType = getLegType(
-    l,
-    firstLeg,
-    time,
-    nextLeg?.interlineWithPreviousLeg,
-  );
+  // LegChange fires animation, we need to keep the old data from the first render until card goes out of the view.
+  const cardChanging = legChanged || legChanging;
+  const l = cardChanging ? previousLeg : currentLeg;
+  const nl = cardChanging ? currentLeg : nextLeg;
+  const legType = getLegType(l, firstLeg, nl?.interlineWithPreviousLeg);
 
   let className;
-  if (isJourneyCompleted || legChanging) {
+  if (isJourneyCompleted || cardChanging) {
     className = 'hide-card';
   } else {
     className = 'show-card';
@@ -210,7 +208,7 @@ function NaviCardContainer(
     >
       <NaviCard
         leg={l}
-        nextLeg={nextLeg}
+        nextLeg={nl}
         legType={legType}
         time={time}
         position={position}

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

@@ -82,7 +82,7 @@ const useRealtimeLegs = (
   }, [fetchAndSetRealtimeLegs]);
 
   const { firstLeg, lastLeg, currentLeg, nextLeg, previousLeg } =
-    getLegsOfInterest(itinerary.legs, params.updatedAt);
+    getLegsOfInterest(itinerary.legs);
 
   const tailLength = currentLeg
     ? getRemainingTraversal(

app/component/itinerary/navigator/hooks/utils/realtimeLegUtils.js

@@ -124,10 +124,9 @@ function matchLegEnds(legs) {
 /**
  * Extracts legs of interest (current, next, previous, etc.) based on the current time.
  * @param {Array} legs - Array of legs.
- * @param {number} now - Current timestamp in milliseconds.
  * @returns {Object} Object containing legs of interest.
  */
-function getLegsOfInterest(legs, now) {
+function getLegsOfInterest(legs) {
   if (!legs?.length) {
     return {
       firstLeg: undefined,
@@ -136,6 +135,7 @@ function getLegsOfInterest(legs, now) {
       nextLeg: undefined,
     };
   }
+  const now = Date.now();
   const currentLeg = legs.find(
     ({ start, end }) => legTime(start) <= now && legTime(end) >= now,
   );
@@ -246,7 +246,7 @@ const BOARD_DELAY = 20000; // 20s, default delay for card change in transit boar
 // Apparently we should consider if the leg ends at an end stop
 // also geolocation certainty plays important role
 function shiftLegsByGeolocation(legs, time, vehicles, position, origin) {
-  const { previousLeg, currentLeg, nextLeg } = getLegsOfInterest(legs, time);
+  const { previousLeg, currentLeg, nextLeg } = getLegsOfInterest(legs);
   let confirm;
 
   if (previousLeg && !previousLeg.freezeEnd) {