Merge pull request #5015 from HSLdevcom/fix-stopsnearyoumap

Optimize stops near you rendering a bit
HSLdevcom · Jun 13, 2024 · 24f06d8 · 24f06d8
2 parents 5607a04 + 483b55e
commit 24f06d8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 58 deletions.
diff --git a/app/component/StopsNearYouPage.js b/app/component/StopsNearYouPage.js
@@ -96,7 +96,6 @@ class StopsNearYouPage extends React.Component {
     super(props);
     this.state = {
       phase: PH_START,
-      centerOfMap: null,
       centerOfMapChanged: false,
       showCityBikeTeaser: true,
       searchPosition: {},
@@ -235,22 +234,11 @@ class StopsNearYouPage extends React.Component {
     };
   };
 
-  setCenterOfMap = (mapElement, e) => {
+  setCenterOfMap = mapElement => {
     let location;
     if (!mapElement) {
-      if (distance(this.state.searchPosition, this.props.position) > 100) {
-        // user has pressed locate me after moving on the map via the search box
-        return this.setState({
-          centerOfMap: this.props.position,
-          centerOfMapChanged: true,
-        });
-      }
-      return this.setState({
-        centerOfMap: this.props.position,
-        centerOfMapChanged: false,
-      });
-    }
-    if (this.props.breakpoint === 'large') {
+      location = this.props.position;
+    } else if (this.props.breakpoint === 'large') {
       const centerOfMap = mapElement.leafletElement.getCenter();
       location = { lat: centerOfMap.lat, lon: centerOfMap.lng };
     } else {
@@ -265,25 +253,17 @@ class StopsNearYouPage extends React.Component {
       ]);
       location = { lat: point.lat, lon: point.lng };
     }
-    if (distance(location, this.state.searchPosition) > 100) {
-      // user has scrolled over 100 meters on the map
-      if (e || this.state.centerOfMapChanged) {
-        return this.setState({
-          centerOfMap: location,
-          centerOfMapChanged: true,
-        });
-      }
+    this.centerOfMap = location;
+    const changed = distance(location, this.state.searchPosition) > 100;
+    if (changed !== this.state.centerOfMapChanged) {
+      this.setState({ centerOfMapChanged: changed });
     }
-    return this.setState({
-      centerOfMap: location,
-      centerOfMapChanged: false,
-    });
   };
 
   updateLocation = () => {
-    const { centerOfMap } = this.state;
+    const { centerOfMap } = this;
     const { mode } = this.props.match.params;
-    if (centerOfMap && centerOfMap.lat && centerOfMap.lon) {
+    if (centerOfMap?.lat && centerOfMap?.lon) {
       let phase = PH_USEMAPCENTER;
       let type = 'CenterOfMap';
       if (centerOfMap.type === 'CurrentLocation') {
@@ -799,10 +779,10 @@ class StopsNearYouPage extends React.Component {
       ...this.props.match.location,
       pathname: path,
     });
+    this.centerOfMap = null;
     this.setState({
       phase: PH_USEDEFAULTPOS,
       searchPosition: item,
-      centerOfMap: null,
       centerOfMapChanged: false,
     });
   };

diff --git a/app/component/map/StopsNearYouMap.js b/app/component/map/StopsNearYouMap.js
@@ -166,7 +166,7 @@ function StopsNearYouMap(
 ) {
   const [sortedStopEdges, setSortedStopEdges] = useState([]);
   const [uniqueRealtimeTopics, setUniqueRealtimeTopics] = useState([]);
-  const [routes, setRouteLines] = useState([]);
+  const [routeLines, setRouteLines] = useState([]);
   const [bounds, setBounds] = useState([]);
   const [clientOn, setClientOn] = useState(false);
   const [firstPlan, setFirstPlan] = useState({
@@ -282,8 +282,8 @@ function StopsNearYouMap(
     }
   }, [position, sortedStopEdges]);
 
-  const setRoutes = sortedRoutes => {
-    const routeLines = [];
+  const updateRoutes = sortedRoutes => {
+    let patterns = [];
     const realtimeTopics = [];
     sortedRoutes.forEach(item => {
       const { place } = item.node;
@@ -297,7 +297,7 @@ function StopsNearYouMap(
             shortName: pattern.route.shortName,
             type: pattern.route.type,
           });
-          routeLines.push(pattern);
+          patterns.push(pattern);
         });
       // eslint-disable-next-line no-unused-expressions
       place.stops &&
@@ -310,12 +310,22 @@ function StopsNearYouMap(
               shortName: pattern.route.shortName,
               type: pattern.route.type,
             });
-            routeLines.push(pattern);
+            patterns.push(pattern);
           });
         });
     });
-
-    setRouteLines(routeLines);
+    patterns = uniqBy(patterns, p => p.patternGeometry?.points || '');
+    const lines = patterns
+      .filter(p => p.patternGeometry)
+      .map(p => (
+        <Line
+          key={`${p.code}`}
+          opaque
+          geometry={polyline.decode(p.patternGeometry.points)}
+          mode={getRouteMode(p.route)}
+        />
+      ));
+    setRouteLines(lines);
     setUniqueRealtimeTopics(uniqBy(realtimeTopics, route => route.route));
   };
 
@@ -382,38 +392,21 @@ function StopsNearYouMap(
       const stopsAndStations = handleStopsAndStations(sortedEdges);
       handleWalkRoutes(stopsAndStations);
       setSortedStopEdges(sortedEdges);
-      setRoutes(sortedEdges);
+      updateRoutes(sortedEdges);
     }
     if (mode === 'FAVORITE') {
       handleWalkRoutes(handleStopsAndStations(stopsNearYou));
       setSortedStopEdges(stopsNearYou);
-      setRoutes(stopsNearYou);
+      updateRoutes(stopsNearYou);
     }
   }, [stopsNearYou, favouriteIds]);
 
   if (loading) {
     return <Loading />;
   }
 
-  let leafletObjs = [];
-  // create route lines
-  if (isTransitMode && Array.isArray(routes)) {
-    const getPattern = pattern =>
-      pattern.patternGeometry ? pattern.patternGeometry.points : '';
-    leafletObjs = uniqBy(routes, getPattern).map(pattern => {
-      if (pattern.patternGeometry) {
-        return (
-          <Line
-            key={`${pattern.code}`}
-            opaque
-            geometry={polyline.decode(pattern.patternGeometry.points)}
-            mode={getRouteMode(pattern.route)}
-          />
-        );
-      }
-      return null;
-    });
-  }
+  const leafletObjs =
+    isTransitMode && Array.isArray(routeLines) ? [...routeLines] : [];
   if (uniqueRealtimeTopics.length > 0) {
     leafletObjs.push(
       <VehicleMarkerContainer