Merge pull request #5219 from HSLdevcom/navifixes5

Miscellaneous changes
HSLdevcom · Jan 7, 2025 · 00905f7 · 00905f7
2 parents 43cbe24 + 024dc62
commit 00905f7
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 199 deletions.
diff --git a/app/client.js b/app/client.js
@@ -24,7 +24,6 @@ import { ReactRelayContext } from 'react-relay';
 import { setRelayEnvironment } from '@digitransit-search-util/digitransit-search-util-query-utils';
 import { configShape } from './util/shapes';
 import { historyMiddlewares, render } from './routes';
-import Raven from './util/Raven';
 import configureMoment from './util/configure-moment';
 import StoreListeningIntlProvider from './util/StoreListeningIntlProvider';
 import appCreator from './app';
@@ -48,29 +47,11 @@ import {
   fetchFavouritesComplete,
 } from './action/FavouriteActions';
 
-const plugContext = f => () => ({
-  plugComponentContext: f,
-  plugActionContext: f,
-  plugStoreContext: f,
-});
-
 window.debug = debug; // Allow _debug.enable('*') in browser console
 
 // TODO: this is an ugly hack, but required due to cyclical processing in app
 const { config } = window.state.context.plugins['extra-context-plugin'];
 const app = appCreator(config);
-const raven = Raven(config.SENTRY_DSN);
-const addRaven = c => {
-  c.raven = raven; // eslint-disable-line no-param-reassign
-};
-
-const ravenPlugin = {
-  name: 'RavenPlugin',
-  plugContext: plugContext(addRaven),
-};
-
-// Add plugins
-app.plug(ravenPlugin);
 
 const getParams = query => {
   if (!query) {
@@ -252,7 +233,6 @@ async function init() {
 
   const ContextProvider = provideContext(StoreListeningIntlProvider, {
     /* eslint-disable-next-line */
-    raven: PropTypes.object,
     config: configShape,
     headers: PropTypes.objectOf(PropTypes.string),
   });

diff --git a/app/component/ErrorBoundary.js b/app/component/ErrorBoundary.js
@@ -9,26 +9,17 @@ import isRelayNetworkError from '../util/relayUtils';
 export default class ErrorBoundary extends React.Component {
   static propTypes = { children: PropTypes.node.isRequired };
 
-  static contextTypes = {
-    raven: PropTypes.shape({
-      captureException: PropTypes.func.isRequired,
-    }),
-  };
-
   state = { error: null, hasRetried: false };
 
   resetState = () => this.setState({ error: null, hasRetried: true });
 
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(error) {
     if (this.state.hasRetried) {
       // Did retry, didn't help
       window.location.reload();
       return;
     }
     this.setState({ error });
-    if (this.context.raven && !isRelayNetworkError(error)) {
-      this.context.raven.captureException(error, { extra: errorInfo });
-    }
   }
 
   render() {
@@ -49,11 +40,6 @@ export default class ErrorBoundary extends React.Component {
             <button type="button" onClick={this.resetState}>
               <FormattedMessage id="try-again" defaultMessage="Try again ›" />
             </button>
-            {/*
-              <button onClick(() => this.context.raven.lastEventId() && this.context.raven.showReportDialog())>
-                <FormattedMessage id="tell-us-what-happened" defaultMessage="Tell us what happened" />
-              </button>
-              */}
           </p>
         </div>
       );

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -17,7 +17,7 @@ import {
 } from './NaviUtils';
 import { updateClient, getTopics } from '../ItineraryPageUtils';
 
-const TIME_AT_DESTINATION = 3; // * 10 seconds
+const COUNT_AT_LEG_END = 2; // update cycles within DESTINATION_RADIUS from leg.to
 const TOPBAR_PADDING = 8; // pixels
 const HIDE_TOPCARD_DURATION = 2000; // milliseconds
 
@@ -27,13 +27,13 @@ function addMessages(incominMessages, newMessages) {
   });
 }
 
-const handleLegChange = (leg, firstLeg, time) => {
+const getLegType = (leg, firstLeg, time, countAtLegEnd) => {
   let legType;
   if (time < legTime(firstLeg.start)) {
     legType = LEGTYPE.PENDING;
   } else if (leg) {
     if (!leg.transitLeg) {
-      if (leg.current >= TIME_AT_DESTINATION) {
+      if (countAtLegEnd >= COUNT_AT_LEG_END) {
         legType = LEGTYPE.WAIT;
       } else {
         legType = LEGTYPE.MOVE;
@@ -73,7 +73,7 @@ function NaviCardContainer(
   const legRef = useRef(currentLeg);
   const focusRef = useRef(false);
   // Destination counter. How long user has been at the destination. * 10 seconds
-  const destCountRef = useRef(0);
+  const legEndRef = useRef(0);
   const cardRef = useRef(null);
   const { intl, config, match, router } = context;
   const handleRemove = index => {
@@ -212,20 +212,21 @@ function NaviCardContainer(
     if (
       position &&
       currentLeg &&
+      nextLeg && // itinerary end has its own logic
       distance(position, currentLeg.to) <= DESTINATION_RADIUS
     ) {
-      destCountRef.current += 1;
+      legEndRef.current += 1;
     } else {
       // Todo: this works in transit legs, but do we need additional logic for bikes / scooters?
-      destCountRef.current = 0;
+      legEndRef.current = 0;
     }
 
     return () => clearTimeout(timeoutId);
   }, [time]);
 
   // LegChange fires animation, we need to keep the old data until card goes out of the view.
   const l = legChanging ? previousLeg : currentLeg;
-  const legType = handleLegChange(l, firstLeg, time);
+  const legType = getLegType(l, firstLeg, time, legEndRef.current);
 
   const containerTopPosition =
     mapLayerRef.current.getBoundingClientRect().top + TOPBAR_PADDING;
@@ -244,7 +245,7 @@ function NaviCardContainer(
     >
       <button
         type="button"
-        className={`navi-top-card-button ${cardExpanded ? 'expanded' : ''}`}
+        className={`navi-top-card ${cardExpanded ? 'expanded' : ''}`}
         onClick={handleClick}
         ref={cardRef}
       >
@@ -289,10 +290,6 @@ NaviCardContainer.propTypes = {
   lastLeg: legShape,
   previousLeg: legShape,
   isJourneyCompleted: PropTypes.bool,
-
-  /*
-  focusToPoint: PropTypes.func.isRequired,
-  */
 };
 
 NaviCardContainer.defaultProps = {

diff --git a/app/component/itinerary/navigator/NaviContainer.js b/app/component/itinerary/navigator/NaviContainer.js
@@ -65,7 +65,7 @@ function NaviContainer(
   const arrivalTime = legTime(lastLeg.end);
 
   const isDestinationReached =
-    position && lastLeg && distance(position, lastLeg.to) <= DESTINATION_RADIUS;
+    position && distance(position, lastLeg.to) <= DESTINATION_RADIUS;
 
   const isPastExpectedArrival = time > arrivalTime + ADDITIONAL_ARRIVAL_TIME;
 

diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
@@ -34,7 +34,7 @@ export default function NaviInstructions(
 
     return (
       <>
-        <div className="destination-header">
+        <div className="notification-header">
           <FormattedMessage id={instructions} defaultMessage="Go to" />
           &nbsp;
           {legDestination(intl, leg, null, nextLeg)}
@@ -47,7 +47,7 @@ export default function NaviInstructions(
       </>
     );
   }
-  if (legType === LEGTYPE.WAIT && nextLeg.mode !== 'WALK') {
+  if (legType === LEGTYPE.WAIT && nextLeg.transitLeg) {
     const { mode, headsign, route, start } = nextLeg;
     const hs = headsign || nextLeg.trip?.tripHeadsign;
 
@@ -68,7 +68,7 @@ export default function NaviInstructions(
 
     return (
       <>
-        <div className="destination-header">
+        <div className="notification-header">
           <FormattedMessage
             id="navigation-get-mode"
             values={{ mode: getToLocalizedMode(mode, intl) }}
@@ -120,7 +120,7 @@ export default function NaviInstructions(
 
     return (
       <>
-        <div className="destination-header">
+        <div className="notification-header">
           <FormattedMessage
             id={instructions}
             defaultMessage="{mode}trip"

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
@@ -9,7 +9,7 @@ import { locationToUri } from '../../../util/otpStrings';
 import { getItineraryPagePath } from '../../../util/path';
 import { epochToIso, timeStr } from '../../../util/timeUtils';
 
-const TRANSFER_SLACK = 60000;
+const TRANSFER_SLACK = 80000;
 const DISPLAY_MESSAGE_THRESHOLD = 120 * 1000; // 2 minutes
 
 export const DESTINATION_RADIUS = 20; // meters
@@ -234,7 +234,9 @@ export const getAdditionalMessages = (
         severity: 'INFO',
         content: (
           <div className="navi-info-content">
-            <FormattedMessage id="navigation-remember-ticket" />
+            <span className="notification-header">
+              <FormattedMessage id="navigation-remember-ticket" />
+            </span>
             <span>
               {fares[0].ticketName} {fares[0].price} €
             </span>
@@ -256,8 +258,7 @@ export const getTransitLegState = (leg, intl, messages, time) => {
   }
 
   const notInSchedule =
-    estimated?.delay > DISPLAY_MESSAGE_THRESHOLD ||
-    estimated?.delay < -DISPLAY_MESSAGE_THRESHOLD;
+    estimated?.delay > TRANSFER_SLACK || estimated?.delay < -TRANSFER_SLACK;
   const localizedMode = getLocalizedMode(mode, intl);
   let content;
   let severity;
@@ -272,7 +273,7 @@ export const getTransitLegState = (leg, intl, messages, time) => {
     const translationId = `navigation-mode-${delay > 0 ? 'late' : 'early'}`;
 
     content = (
-      <div className="navi-alert-content">
+      <div className="navi-alert-content notification-header">
         <FormattedMessage id={translationId} values={{ mode: routeName }} />
       </div>
     );
@@ -292,7 +293,9 @@ export const getTransitLegState = (leg, intl, messages, time) => {
     }
     content = (
       <div className="navi-info-content">
-        <FormattedMessage id="navileg-mode-schedule" />
+        <span className="notification-header">
+          <FormattedMessage id="navileg-mode-schedule" />
+        </span>
         <FormattedMessage
           id="navileg-start-schedule"
           values={{
@@ -316,10 +319,12 @@ export const getTransitLegState = (leg, intl, messages, time) => {
 
     content = (
       <div className="navi-info-content">
-        <FormattedMessage
-          id="navileg-mode-realtime"
-          values={{ route: shortName, mode: localizedMode }}
-        />
+        <span className="notification-header">
+          <FormattedMessage
+            id="navileg-mode-realtime"
+            values={{ route: shortName, mode: localizedMode }}
+          />
+        </span>
         <FormattedMessage
           id="navileg-start-realtime"
           values={{
@@ -354,15 +359,17 @@ export function itinerarySearchPath(time, leg, nextLeg, position, to) {
 
 function withNewSearchBtn(children, searchCallback) {
   return (
-    <div className="navi-alert-content">
+    <div className="navi-info-content">
       {children}
       <FormattedMessage id="navigation-abort-trip" />
       <button
         className="new-itinerary-search"
         type="button"
         onClick={searchCallback}
       >
-        <FormattedMessage id="settings-dropdown-open-label" />
+        <span className="notification-header">
+          <FormattedMessage id="settings-dropdown-open-label" />
+        </span>
       </button>
     </div>
   );
@@ -405,8 +412,8 @@ export const getItineraryAlerts = (
       .map(alert => ({
         severity: 'ALERT',
         content: (
-          <div className="navi-alert-content">
-            <span className="header"> {alert.alertHeaderText}</span>
+          <div className="navi-info-content">
+            <span className="notification-header">{alert.alertHeaderText}</span>
           </div>
         ),
         id: alertId(alert),
@@ -426,17 +433,19 @@ export const getItineraryAlerts = (
       const routeName = `${lMode} ${route.shortName}`;
 
       const m = (
-        <FormattedMessage
-          id="navigation-mode-canceled"
-          values={{ mode: routeName }}
-        />
+        <span className="notification-header">
+          <FormattedMessage
+            id="navigation-mode-canceled"
+            values={{ mode: routeName }}
+          />
+        </span>
       );
       // we want to show the show routes button only for the first canceled leg.
       const content =
         i === 0 ? (
           withNewSearchBtn({ m }, itinerarySearchCallback)
         ) : (
-          <div className="navi-alert-content">{m}</div>
+          <div className="navi-info-content notification-header">{m}</div>
         );
 
       if (!messages.get(`canceled-${legId}`)) {
@@ -463,17 +472,20 @@ export const getItineraryAlerts = (
         alerts.push({
           severity: prob.severity,
           content: withNewSearchBtn(
-            <FormattedMessage
-              id="navigation-transfer-problem"
-              values={{
-                route1: prob.fromLeg.route.shortName,
-                route2: prob.toLeg.route.shortName,
-              }}
-            />,
+            <span className="notification-header">
+              <FormattedMessage
+                id="navigation-transfer-problem"
+                values={{
+                  route1: prob.fromLeg.route.shortName,
+                  route2: prob.toLeg.route.shortName,
+                }}
+              />
+            </span>,
             itinerarySearchCallback,
           ),
           id: transferId,
           hideClose: prob.severity === 'ALERT',
+          expiresOn: legTime(prob.toLeg.start),
         });
       }
     }