Merge pull request #5180 from HSLdevcom/DT-6572

DT-6572: use consisted time and update currentLeg's data
HSLdevcom · Nov 29, 2024 · e208097 · e208097
2 parents 9b49562 + 989b825
commit e208097
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 31 deletions.
diff --git a/app/component/itinerary/navigator/NaviBottom.js b/app/component/itinerary/navigator/NaviBottom.js
@@ -4,8 +4,11 @@ import { FormattedMessage } from 'react-intl';
 import { configShape } from '../../../util/shapes';
 import { epochToTime } from '../../../util/timeUtils';
 
-export default function NaviBottom({ setNavigation, arrival }, { config }) {
-  const remainingDuration = Math.ceil((arrival - Date.now()) / 60000); // ms to minutes
+export default function NaviBottom(
+  { setNavigation, arrival, time },
+  { config },
+) {
+  const remainingDuration = Math.ceil((arrival - time) / 60000); // ms to minutes
   return (
     <div className="navibottomsheet">
       <div className="divider" />
@@ -51,6 +54,7 @@ export default function NaviBottom({ setNavigation, arrival }, { config }) {
 NaviBottom.propTypes = {
   setNavigation: PropTypes.func.isRequired,
   arrival: PropTypes.number.isRequired,
+  time: PropTypes.number.isRequired,
 };
 
 NaviBottom.contextTypes = {

diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js
@@ -27,6 +27,7 @@ export default function NaviCard({
   legType,
   cardExpanded,
   startTime,
+  time,
 }) {
   if (legType === LEGTYPE.PENDING) {
     return (
@@ -67,6 +68,7 @@ export default function NaviCard({
             nextLeg={nextLeg}
             instructions={instructions}
             legType={legType}
+            time={time}
           />
           <div type="button" className="navitop-arrow">
             <Icon
@@ -77,7 +79,12 @@ export default function NaviCard({
         </div>
       </div>
       {cardExpanded && (
-        <NaviCardExtension legType={legType} leg={leg} nextLeg={nextLeg} />
+        <NaviCardExtension
+          legType={legType}
+          leg={leg}
+          nextLeg={nextLeg}
+          time={time}
+        />
       )}
     </div>
   );
@@ -89,6 +96,7 @@ NaviCard.propTypes = {
   legType: PropTypes.string.isRequired,
   cardExpanded: PropTypes.bool,
   startTime: PropTypes.string,
+  time: PropTypes.number.isRequired,
 };
 NaviCard.defaultProps = {
   cardExpanded: false,

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -28,7 +28,7 @@ function addMessages(incominMessages, newMessages) {
   });
 }
 function NaviCardContainer(
-  { focusToLeg, time, realTimeLegs, position },
+  { focusToLeg, time, legs, position },
   { intl, config, match, router },
 ) {
   const [currentLeg, setCurrentLeg] = useState(null);
@@ -60,16 +60,17 @@ function NaviCardContainer(
   }, [currentLeg, cardExpanded]);
 
   useEffect(() => {
-    const newLeg = realTimeLegs.find(leg => {
+    const newLeg = legs.find(leg => {
       return legTime(leg.start) <= time && time <= legTime(leg.end);
     });
 
+    setCurrentLeg(newLeg);
     const incomingMessages = new Map();
 
     // Alerts for NaviStack
     addMessages(
       incomingMessages,
-      getItineraryAlerts(realTimeLegs, intl, messages, match.params, router),
+      getItineraryAlerts(legs, intl, messages, match.params, router),
     );
 
     const legChanged = newLeg?.legId
@@ -78,7 +79,7 @@ function NaviCardContainer(
     const l = currentLeg || newLeg;
 
     if (l) {
-      const nextLeg = getNextLeg(realTimeLegs, legTime(l.start));
+      const nextLeg = getNextLeg(legs, legTime(l.start));
 
       if (nextLeg?.transitLeg) {
         // Messages for NaviStack.
@@ -91,7 +92,6 @@ function NaviCardContainer(
         focusToLeg?.(newLeg);
       }
       if (legChanged) {
-        setCurrentLeg(newLeg);
         setCardExpanded(false);
       }
     }
@@ -123,7 +123,7 @@ function NaviCardContainer(
         focusToLeg(newLeg);
         destCountRef.current = 0;
       } else {
-        const { first, last } = getFirstLastLegs(realTimeLegs);
+        const { first, last } = getFirstLastLegs(legs);
         if (time < legTime(first.start)) {
           focusToLeg(first);
         } else {
@@ -146,10 +146,10 @@ function NaviCardContainer(
     }
   }, [time]);
 
-  const { first, last } = getFirstLastLegs(realTimeLegs);
+  const { first, last } = getFirstLastLegs(legs);
   let legType;
   const t = currentLeg ? legTime(currentLeg.start) : time;
-  const nextLeg = getNextLeg(realTimeLegs, t);
+  const nextLeg = getNextLeg(legs, t);
 
   if (time < legTime(first.start)) {
     legType = LEGTYPE.PENDING;
@@ -184,6 +184,7 @@ function NaviCardContainer(
             cardExpanded={cardExpanded}
             legType={legType}
             startTime={legTimeStr(first.start)}
+            time={time}
           />
         </div>
       </button>
@@ -201,7 +202,7 @@ function NaviCardContainer(
 NaviCardContainer.propTypes = {
   focusToLeg: PropTypes.func,
   time: PropTypes.number.isRequired,
-  realTimeLegs: PropTypes.arrayOf(legShape).isRequired,
+  legs: PropTypes.arrayOf(legShape).isRequired,
   position: PropTypes.shape({
     lat: PropTypes.number,
     lon: PropTypes.number,

diff --git a/app/component/itinerary/navigator/NaviCardExtension.js b/app/component/itinerary/navigator/NaviCardExtension.js
@@ -12,7 +12,7 @@ import { getDestinationProperties, LEGTYPE } from './NaviUtils';
 
 import RouteNumberContainer from '../../RouteNumberContainer';
 
-const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => {
+const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
   const { stop, name, rentalVehicle, vehicleParking, vehicleRentalStation } =
     leg ? leg.to : nextLeg.from;
   const { code, platformCode, zoneId, vehicleMode } = stop || {};
@@ -36,8 +36,7 @@ const NaviCardExtension = ({ legType, leg, nextLeg }, { config }) => {
   if (legType === LEGTYPE.TRANSIT) {
     const { intermediatePlaces, headsign, trip, realtimeState } = leg;
     const hs = headsign || trip.tripHeadsign;
-    const now = Date.now();
-    const idx = intermediatePlaces.findIndex(p => legTime(p.arrival) > now);
+    const idx = intermediatePlaces.findIndex(p => legTime(p.arrival) > time);
     const count = idx > -1 ? intermediatePlaces.length - idx : 0;
     const stopCount = (
       <span className={cx('bold', { realtime: realtimeState === 'UPDATED' })}>
@@ -111,6 +110,7 @@ NaviCardExtension.propTypes = {
   leg: legShape,
   nextLeg: legShape,
   legType: PropTypes.string,
+  time: PropTypes.number.isRequired,
 };
 
 NaviCardExtension.defaultProps = {

diff --git a/app/component/itinerary/navigator/NaviContainer.js b/app/component/itinerary/navigator/NaviContainer.js
@@ -42,14 +42,18 @@ function NaviContainer(
     <>
       <NaviCardContainer
         itinerary={itinerary}
-        realTimeLegs={realTimeLegs}
+        legs={realTimeLegs}
         focusToLeg={
           mapRef?.state.mapTracking || isPositioningAllowed ? null : focusToLeg
         }
         time={time}
         position={position}
       />
-      <NaviBottom setNavigation={setNavigation} arrival={arrivalTime} />
+      <NaviBottom
+        setNavigation={setNavigation}
+        arrival={arrivalTime}
+        time={time}
+      />
     </>
   );
 }

diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
@@ -10,7 +10,7 @@ import { displayDistance } from '../../../util/geo-utils';
 import { durationToString } from '../../../util/timeUtils';
 
 export default function NaviInstructions(
-  { leg, nextLeg, instructions, legType },
+  { leg, nextLeg, instructions, legType, time },
   { intl, config },
 ) {
   const [fadeOut, setFadeOut] = useState(false);
@@ -51,7 +51,7 @@ export default function NaviInstructions(
     const color = route.color || 'currentColor';
     const localizedMode = getLocalizedMode(mode, intl);
 
-    const remainingDuration = Math.ceil((legTime(start) - Date.now()) / 60000); // ms to minutes
+    const remainingDuration = Math.ceil((legTime(start) - time) / 60000); // ms to minutes
     const rt = nextLeg.realtimeState === 'UPDATED';
     const values = {
       duration: withRealTime(rt, remainingDuration),
@@ -98,7 +98,7 @@ export default function NaviInstructions(
       : intl.formatMessage({ id: 'navileg-from-stop' });
     const localizedMode = getLocalizedMode(leg.mode, intl);
 
-    const remainingDuration = Math.ceil((t - Date.now()) / 60000); // ms to minutes
+    const remainingDuration = Math.ceil((t - time) / 60000); // ms to minutes
     const values = {
       stopOrStation,
       stop: leg.to.stop.name,
@@ -133,6 +133,7 @@ NaviInstructions.propTypes = {
   nextLeg: legShape,
   instructions: PropTypes.string.isRequired,
   legType: PropTypes.string,
+  time: PropTypes.number.isRequired,
 };
 
 NaviInstructions.defaultProps = {

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
@@ -144,19 +144,13 @@ export const getTransitLegState = (leg, intl, messages, time) => {
   return state;
 };
 
-export const getItineraryAlerts = (
-  realTimeLegs,
-  intl,
-  messages,
-  location,
-  router,
-) => {
-  const canceled = realTimeLegs.filter(leg => leg.realtimeState === 'CANCELED');
+export const getItineraryAlerts = (legs, intl, messages, location, router) => {
+  const canceled = legs.filter(leg => leg.realtimeState === 'CANCELED');
   let content;
-  const alerts = realTimeLegs.flatMap(leg => {
+  const alerts = legs.flatMap(leg => {
     return leg.alerts
       .filter(alert => {
-        const { first } = getFirstLastLegs(realTimeLegs);
+        const { first } = getFirstLastLegs(legs);
         const startTime = legTime(first.start) / 1000;
         if (messages.get(alert.id)) {
           return false;
@@ -184,7 +178,7 @@ export const getItineraryAlerts = (
         id: alert.id,
       }));
   });
-  const transferProblem = findTransferProblem(realTimeLegs);
+  const transferProblem = findTransferProblem(legs);
   const abortTrip = <FormattedMessage id="navigation-abort-trip" />;
   const withShowRoutesBtn = children => (
     <div className="alt-btn">