Merge pull request #5166 from HSLdevcom/DT-6476_patch-2

DT-6476 Refactor navigation initializer into callback function
HSLdevcom · Nov 15, 2024 · 966ac87 · 966ac87
2 parents 6ea93ca + dc12bb7
commit 966ac87
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 34 deletions.
diff --git a/app/component/itinerary/ItineraryDetails.js b/app/component/itinerary/ItineraryDetails.js
@@ -53,7 +53,7 @@ class ItineraryDetails extends React.Component {
     currentLanguage: PropTypes.string,
     changeHash: PropTypes.func,
     openSettings: PropTypes.func.isRequired,
-    setNavigation: PropTypes.func,
+    startNavigation: PropTypes.func,
     bikeAndPublicItineraryCount: PropTypes.number,
     relayEnvironment: relayShape,
   };
@@ -65,7 +65,7 @@ class ItineraryDetails extends React.Component {
     bikeAndPublicItineraryCount: 0,
     carEmissions: undefined,
     relayEnvironment: undefined,
-    setNavigation: undefined,
+    startNavigation: undefined,
   };
 
   static contextTypes = {
@@ -308,11 +308,10 @@ class ItineraryDetails extends React.Component {
                 />
               )),
 
-            this.props.setNavigation && (
+            this.props.startNavigation && (
               <StartNavi
                 key="navigation"
-                itinerary={itinerary}
-                setNavigation={this.props.setNavigation}
+                startNavigation={this.props.startNavigation}
               />
             ),
             config.showCO2InItinerarySummary && !legsWithScooter && (

diff --git a/app/component/itinerary/ItineraryPage.js b/app/component/itinerary/ItineraryPage.js
@@ -17,6 +17,7 @@ import {
   getDialogState,
   getLatestNavigatorItinerary,
   setDialogState,
+  setLatestNavigatorItinerary,
 } from '../../store/localStorage';
 import { addAnalyticsEvent } from '../../util/analyticsUtils';
 import { getWeatherData } from '../../util/apiUtils';
@@ -654,6 +655,21 @@ export default function ItineraryPage(props, context) {
     setNaviMode(isEnabled);
   };
 
+  const storeItineraryAndStartNavigation = itinerary => {
+    setNavigation(true);
+    setLatestNavigatorItinerary({
+      itinerary,
+      params: {
+        from: params.from,
+        to: params.to,
+        arriveBy: query.arriveBy,
+        time: query.time,
+        hash,
+        secondHash,
+      },
+    });
+  };
+
   // save url-defined location to old searches
   function saveUrlSearch(endpoint) {
     const parts = endpoint.split('::'); // label::lat,lon
@@ -1164,7 +1180,10 @@ export default function ItineraryPage(props, context) {
         Date.parse(combinedEdges[selectedIndex]?.node.end) < Date.now();
       const navigateHook =
         !desktop && config.experimental.navigation && !pastSearch
-          ? setNavigation
+          ? () =>
+              storeItineraryAndStartNavigation(
+                combinedEdges[selectedIndex]?.node,
+              )
           : undefined;
       carEmissions = carEmissions ? Math.round(carEmissions) : undefined;
       content = (
@@ -1180,7 +1199,7 @@ export default function ItineraryPage(props, context) {
           bikeAndPublicItineraryCount={bikePublicPlan.bikePublicItineraryCount}
           openSettings={showSettingsPanel}
           relayEnvironment={props.relayEnvironment}
-          setNavigation={navigateHook}
+          startNavigation={navigateHook}
         />
       );
     }

diff --git a/app/component/itinerary/StartNavi.js b/app/component/itinerary/StartNavi.js
@@ -1,35 +1,18 @@
-import { matchShape } from 'found';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { FormattedMessage, intlShape } from 'react-intl';
-import { setLatestNavigatorItinerary } from '../../store/localStorage';
-import { configShape, itineraryShape } from '../../util/shapes';
+import { configShape } from '../../util/shapes';
 import Icon from '../Icon';
 
-const StartNavi = ({ setNavigation, itinerary }, context) => {
-  const { config, intl, match } = context;
+const StartNavi = ({ startNavigation }, context) => {
+  const { config, intl } = context;
 
   const color =
     config.colors?.accessiblePrimary || config.colors?.primary || 'black';
 
-  const handleClick = () => {
-    setNavigation(true);
-    setLatestNavigatorItinerary({
-      itinerary,
-      params: {
-        from: match.params.from,
-        to: match.params.to,
-        arriveBy: match.location.query.arriveBy,
-        time: match.location.query.time,
-        hash: match.params.hash,
-        secondHash: match.params.secondHash,
-      },
-    });
-  };
-
   return (
     <div className="navi-start-container">
-      <button type="button" onClick={handleClick}>
+      <button type="button" onClick={startNavigation}>
         <Icon img="icon-icon_navigation" color={color} height={2} width={2} />
         <div className="content">
           <FormattedMessage tagName="div" id="new-feature" />
@@ -48,14 +31,12 @@ const StartNavi = ({ setNavigation, itinerary }, context) => {
 };
 
 StartNavi.propTypes = {
-  setNavigation: PropTypes.func.isRequired,
-  itinerary: itineraryShape.isRequired,
+  startNavigation: PropTypes.func.isRequired,
 };
 
 StartNavi.contextTypes = {
   config: configShape.isRequired,
   intl: intlShape.isRequired,
-  match: matchShape.isRequired,
 };
 
 export default StartNavi;
diff --git a/app/component/itinerary/navigator/NaviContainer.js b/app/component/itinerary/navigator/NaviContainer.js
@@ -4,7 +4,7 @@ import { legTime } from '../../../util/legUtils';
 import { itineraryShape, relayShape } from '../../../util/shapes';
 import NaviBottom from './NaviBottom';
 import NaviCardContainer from './NaviCardContainer';
-import { useRealtimeLegs } from '../hooks/useRealtimeLegs';
+import { useRealtimeLegs } from './hooks/useRealtimeLegs';
 
 function NaviContainer(
   { itinerary, focusToLeg, relayEnvironment, setNavigation, mapRef },

diff --git a/...ponent/itinerary/hooks/useRealtimeLegs.js → ...nerary/navigator/hooks/useRealtimeLegs.js b/...ponent/itinerary/hooks/useRealtimeLegs.js → ...nerary/navigator/hooks/useRealtimeLegs.js
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { fetchQuery } from 'react-relay';
-import { checkPositioningPermission } from '../../../action/PositionActions';
-import { legQuery } from '../queries/LegQuery';
+import { checkPositioningPermission } from '../../../../action/PositionActions';
+import { legQuery } from '../../queries/LegQuery';
 
 const useRealtimeLegs = (initialLegs, mapRef, relayEnvironment) => {
   const [isPositioningAllowed, setPositioningAllowed] = useState(false);