Merge pull request #5167 from HSLdevcom/DT-6441

DT-6441 improve near you page
HSLdevcom · Nov 18, 2024 · 51c3079 · 51c3079
2 parents 966ac87 + a446d9a
commit 51c3079
Show file tree

Hide file tree

Showing 23 changed files with 166 additions and 177 deletions.
diff --git a/app/component/map/Map.js b/app/component/map/Map.js
@@ -120,16 +120,11 @@ export default class Map extends React.Component {
     if (props.mapRef) {
       props.mapRef(this);
     }
-    if (this.props.breakpoint === 'large') {
+    if (this.props.breakpoint !== 'large') {
       this.boundsOptions = {
         paddingTopLeft: [0, EXTRA_PADDING],
         paddingBottomRight: [0, (window.innerHeight - 64) / 2],
       };
-    } else {
-      this.boundsOptions = {
-        paddingTopLeft: [0, 0],
-        paddingBottomRight: [0, 0],
-      };
     }
   }
 
@@ -192,13 +187,15 @@ export default class Map extends React.Component {
 
   // eslint-disable-next-line react/no-unused-class-component-methods
   setBottomPadding = padding => {
-    this.boundsOptions.paddingBottomRight = [
-      0,
-      Math.max(
-        Math.min(padding, window.innerHeight - 2 * EXTRA_PADDING),
-        EXTRA_PADDING,
-      ),
-    ];
+    if (this.boundsOptions) {
+      this.boundsOptions.paddingBottomRight = [
+        0,
+        Math.max(
+          Math.min(padding, window.innerHeight - 2 * EXTRA_PADDING),
+          EXTRA_PADDING,
+        ),
+      ];
+    }
   };
 
   render() {
@@ -216,7 +213,7 @@ export default class Map extends React.Component {
     const { config } = this.context;
 
     const naviProps = {}; // these define map center and zoom
-    if (bottomPadding !== undefined) {
+    if (bottomPadding !== undefined && this.boundsOptions) {
       this.boundsOptions.paddingBottomRight = [
         0,
         Math.min(bottomPadding + EXTRA_PADDING, window.innerHeight - 60),
@@ -226,7 +223,7 @@ export default class Map extends React.Component {
       // bounds overrule center & zoom
       naviProps.bounds = boundWithMinimumArea(this.props.bounds); // validate
     } else if (lat && lon) {
-      if (this.boundsOptions.paddingBottomRight !== undefined) {
+      if (this.boundsOptions?.paddingBottomRight !== undefined) {
         // bounds fitting can take account the wanted padding, so convert to bounds
         naviProps.bounds = boundWithMinimumArea([[lat, lon]], zoom);
       } else {

diff --git a/app/component/map/MapBottomsheetContext.js b/app/component/map/MapBottomsheetContext.js
@@ -1,4 +1,4 @@
 import { createContext } from 'react';
 
-// value 0 = default map bottom padding, used in desktop
-export default createContext(0);
+// undefined value used in desktop
+export default createContext(undefined);
diff --git a/app/component/map/MapContainer.js b/app/component/map/MapContainer.js
@@ -9,15 +9,13 @@ const mapModules = {
   Map: () => importLazy(import(/* webpackChunkName: "map" */ './Map')),
 };
 
-function MapContainer({ className, children, bottomPadding, ...props }) {
+function MapContainer({ className, children, ...props }) {
   const contextPadding = useContext(MapBottomsheetContext);
   return (
     <div className={`map ${className}`}>
       <LazilyLoad modules={mapModules}>
         {({ Map }) => {
-          return (
-            <Map {...props} bottomPadding={bottomPadding || contextPadding} />
-          );
+          return <Map {...props} bottomPadding={contextPadding} />;
         }}
       </LazilyLoad>
       {children}
@@ -28,13 +26,11 @@ function MapContainer({ className, children, bottomPadding, ...props }) {
 MapContainer.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
-  bottomPadding: PropTypes.number,
 };
 
 MapContainer.defaultProps = {
   className: '',
   children: undefined,
-  bottomPadding: undefined,
 };
 
 export default connectToStores(

diff --git a/app/component/map/StopsNearYouMap.js → app/component/map/NearYouMap.js b/app/component/map/StopsNearYouMap.js → app/component/map/NearYouMap.js
@@ -101,7 +101,7 @@ const updateClient = (context, topics) => {
   }
 };
 
-const handleBounds = (location, edges, breakpoint) => {
+const handleBounds = (location, edges) => {
   if (edges.length === 0) {
     // No stops anywhere near
     return [
@@ -110,25 +110,13 @@ const handleBounds = (location, edges, breakpoint) => {
     ];
   }
   const nearestStop = edges[0].node.place;
-  const bounds =
-    breakpoint !== 'large'
-      ? [
-          [
-            nearestStop.lat + (nearestStop.lat - location.lat) * 0.5,
-            nearestStop.lon + (nearestStop.lon - location.lon) * 0.5,
-          ],
-          [
-            location.lat + (location.lat - nearestStop.lat) * 0.5,
-            location.lon + (location.lon - nearestStop.lon) * 0.5,
-          ],
-        ]
-      : [
-          [nearestStop.lat, nearestStop.lon],
-          [
-            location.lat + location.lat - nearestStop.lat,
-            location.lon + location.lon - nearestStop.lon,
-          ],
-        ];
+  const bounds = [
+    [nearestStop.lat, nearestStop.lon],
+    [
+      location.lat + location.lat - nearestStop.lat,
+      location.lon + location.lon - nearestStop.lon,
+    ],
+  ];
   return bounds;
 };
 
@@ -142,7 +130,7 @@ const getLocationMarker = location => {
   );
 };
 
-function StopsNearYouMap(
+function NearYouMap(
   {
     breakpoint,
     stopsNearYou,
@@ -207,22 +195,20 @@ function StopsNearYouMap(
     if (showWalkRoute) {
       if (stopsAndStations.length > 0) {
         const firstStop = stopsAndStations[0];
-        const shouldFetchWalkRoute = () => {
-          return (
-            (mode !== 'BUS' && mode !== 'TRAM') ||
-            favouriteIds.has(firstStop.gtfsId)
-          );
-        };
-        if (!isEqual(firstStop, walk.stop) && shouldFetchWalkRoute()) {
+        const shouldFetch =
+          (mode !== 'BUS' && mode !== 'TRAM') ||
+          favouriteIds.has(firstStop.gtfsId);
+        if (shouldFetch && !isEqual(firstStop, walk.stop)) {
           fetchPlan(firstStop);
-        } else if (!shouldFetchWalkRoute()) {
+        } else if (!shouldFetch) {
           setWalk({ itinerary: null, stop: null });
         }
       }
     } else {
       setWalk({ itinerary: null, stop: null });
     }
   };
+
   useEffect(() => {
     prevPlace.current = match.params.place;
     prevMode.current = match.params.mode;
@@ -232,7 +218,7 @@ function StopsNearYouMap(
   }, []);
 
   useEffect(() => {
-    const newBounds = handleBounds(position, sortedStopEdges, breakpoint);
+    const newBounds = handleBounds(position, sortedStopEdges);
     if (newBounds.length > 0) {
       setBounds(newBounds);
     }
@@ -433,7 +419,7 @@ function StopsNearYouMap(
   );
 }
 
-StopsNearYouMap.propTypes = {
+NearYouMap.propTypes = {
   stopsNearYou: PropTypes.shape({
     nearest: PropTypes.shape({
       // eslint-disable-next-line
@@ -452,18 +438,18 @@ StopsNearYouMap.propTypes = {
   showWalkRoute: PropTypes.bool,
 };
 
-StopsNearYouMap.defaultProps = {
+NearYouMap.defaultProps = {
   stopsNearYou: null,
   showWalkRoute: false,
   loading: false,
   favouriteIds: undefined,
   prioritizedStopsNearYou: [],
 };
 
-StopsNearYouMap.contextTypes = {
+NearYouMap.contextTypes = {
   config: configShape,
   executeAction: PropTypes.func,
   getStore: PropTypes.func,
 };
 
-export default StopsNearYouMap;
+export default NearYouMap;