Get map refs from state part 3

City-of-Turku · Jun 19, 2024 · 9af54a0 · 9af54a0
1 parent a6e33b4
commit 9af54a0
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 49 deletions.
diff --git a/src/components/MobilityPlatform/AirportFlights/AirportFlights.js b/src/components/MobilityPlatform/AirportFlights/AirportFlights.js
@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
-import { useMap } from 'react-leaflet';
 import { useSelector } from 'react-redux';
 import airPlaneIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_airplane-bw.svg';
 import airPlaneIcon from 'servicemap-ui-turku/assets/icons/icons-icon_airplane.svg';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import { createIcon } from '../utils/utils';
 import useIotDataFetch from '../utils/useIotDataFetch';
 import { StyledPopupWrapper, StyledPopupInner } from '../styled/styled';
@@ -14,8 +14,7 @@ import AirportFlightsContent from './components/AirportFlightsContent';
 const AirportFlights = () => {
   const { showAirports } = useMobilityPlatformContext();
 
-  const map = useMap();
-
+  const map = useSelector(selectMapRef);
   const useContrast = useSelector(useAccessibleMap);
 
   const { Marker, Popup } = global.rL;

diff --git a/...mponents/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/CultureRouteUnits.js b/...mponents/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/CultureRouteUnits.js
@@ -3,13 +3,13 @@ import { Close } from '@mui/icons-material';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { useMap } from 'react-leaflet';
 import { useSelector } from 'react-redux';
 import styled from '@emotion/styled';
 import routeUnitIcon from 'servicemap-ui-turku/assets/icons/icons-icon_culture_route.svg';
 import routeUnitIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_culture_route-bw.svg';
 import { useMobilityPlatformContext } from '../../../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../../../redux/selectors/settings';
+import { selectMapRef } from '../../../../../redux/selectors/general';
 import { createIcon } from '../../../utils/utils';
 import useLocaleText from '../../../../../utils/useLocaleText';
 
@@ -20,11 +20,11 @@ const CultureRouteUnits = ({ cultureRouteUnits }) => {
 
   const locale = useSelector(state => state.user.locale);
   const getLocaleText = useLocaleText();
-  const map = useMap();
 
   const { Marker, Popup } = global.rL;
   const { icon } = global.L;
 
+  const map = useSelector(selectMapRef);
   const useContrast = useSelector(useAccessibleMap);
 
   const customIcon = icon(createIcon(useContrast ? routeUnitIconBw : routeUnitIcon));

diff --git a/src/components/MobilityPlatform/MobilityProfiles/MobilityProfiles.js b/src/components/MobilityPlatform/MobilityProfiles/MobilityProfiles.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import moose from 'servicemap-ui-turku/assets/icons/icons-icon_moose.svg';
 import fox from 'servicemap-ui-turku/assets/icons/icons-icon_fox.svg';
 import deer from 'servicemap-ui-turku/assets/icons/icons-icon_deer.svg';
@@ -15,6 +14,7 @@ import martenContrast from 'servicemap-ui-turku/assets/icons/contrast/icons-icon
 import capercaillieContrast from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_capercaillie-bw.svg';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import {
   isDataValid, createIcon, blueOptionsBase, whiteOptionsBase,
 } from '../utils/utils';
@@ -31,7 +31,7 @@ const MobilityProfiles = () => {
   const { Marker, Polygon, Popup } = global.rL;
   const { icon, polygon } = global.L;
 
-  const map = useMap();
+  const map = useSelector(selectMapRef);
   const useContrast = useSelector(useAccessibleMap);
 
   useEffect(() => {

diff --git a/src/components/MobilityPlatform/ParkingChargeZones/ParkingChargeZones.js b/src/components/MobilityPlatform/ParkingChargeZones/ParkingChargeZones.js
@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import { isObjValid, blackOptionsBase, whiteOptionsBase } from '../utils/utils';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import ParkingChargeZoneContent from './components/ParkingChargeZoneContent';
 import PolygonComponent from '../PolygonComponent';
@@ -16,32 +16,28 @@ const ParkingChargeZones = () => {
   const renderOneParkingChargeZone = isObjValid(showParkingChargeZones, parkingChargeZone);
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const blackOptions = blackOptionsBase({ fillOpacity: 0.2, weight: 5 });
   const whiteOptions = whiteOptionsBase({ fillOpacity: 0.3, weight: 5, dashArray: '2 10 10 10' });
   const pathOptions = useContrast ? whiteOptions : blackOptions;
 
-  const map = useMap();
-
   useEffect(() => {
     if (showParkingChargeZones && parkingChargeZone) {
       const bounds = parkingChargeZone.geometry_coords;
       map.fitBounds(bounds);
     }
   }, [showParkingChargeZones, parkingChargeZone]);
 
-  return (
-    <>
-      {renderOneParkingChargeZone ? (
-        <PolygonComponent
-          item={parkingChargeZone}
-          useContrast={useContrast}
-          pathOptions={pathOptions}
-        >
-          <ParkingChargeZoneContent parkingChargeZone={parkingChargeZone} />
-        </PolygonComponent>
-      ) : null}
-    </>
+  return (renderOneParkingChargeZone ? (
+    <PolygonComponent
+      item={parkingChargeZone}
+      useContrast={useContrast}
+      pathOptions={pathOptions}
+    >
+      <ParkingChargeZoneContent parkingChargeZone={parkingChargeZone} />
+    </PolygonComponent>
+  ) : null
   );
 };
 

diff --git a/src/components/MobilityPlatform/Roadworks/Roadworks.js b/src/components/MobilityPlatform/Roadworks/Roadworks.js
@@ -1,14 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import roadworksIcon from 'servicemap-ui-turku/assets/icons/icons-icon_roadworks.svg';
 import roadworksIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_roadworks-bw.svg';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import {
   createIcon, isDataValid, grayOptionsBase, whiteOptionsBase,
 } from '../utils/utils';
 import { useAccessibleMap, getCitySettings } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import config from '../../../../config';
 import useRoadworksDataFetch from '../utils/useRoadworksDataFetch';
 import { StyledPopupWrapper, StyledPopupInner } from '../styled/styled';
@@ -29,8 +29,7 @@ const Roadworks = () => {
   const { icon } = global.L;
   const { Marker, Polyline, Popup } = global.rL;
 
-  const map = useMap();
-
+  const map = useSelector(selectMapRef);
   const useContrast = useSelector(useAccessibleMap);
   const citySettings = useSelector(getCitySettings);
 

diff --git a/src/components/MobilityPlatform/Scooters/components/NoParking/NoParking.js b/src/components/MobilityPlatform/Scooters/components/NoParking/NoParking.js
@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
-import { useMap } from 'react-leaflet';
 import { useSelector } from 'react-redux';
 import { useMobilityPlatformContext } from '../../../../../context/MobilityPlatformContext';
 import useMobilityDataFetch from '../../../utils/useMobilityDataFetch';
 import { isDataValid, whiteOptionsBase, redOptionsBase } from '../../../utils/utils';
 import { useAccessibleMap } from '../../../../../redux/selectors/settings';
+import { selectMapRef } from '../../../../../redux/selectors/general';
 import PolygonComponent from '../../../PolygonComponent';
 import TextContent from '../../../TextContent';
 
@@ -20,6 +20,7 @@ const NoParking = () => {
 
   const { showScooterNoParking } = useMobilityPlatformContext();
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const redOptions = redOptionsBase({ weight: 5 });
   const whiteOptions = whiteOptionsBase({
@@ -28,7 +29,6 @@ const NoParking = () => {
     dashArray: '11 2 11',
   });
   const pathOptions = useContrast ? whiteOptions : redOptions;
-  const map = useMap();
 
   const { data } = useMobilityDataFetch(options, showScooterNoParking);
 

diff --git a/src/components/MobilityPlatform/Scooters/components/ParkingAreas/ParkingAreas.js b/src/components/MobilityPlatform/Scooters/components/ParkingAreas/ParkingAreas.js
@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
-import { useMap } from 'react-leaflet';
 import { useSelector } from 'react-redux';
 import scooterParkingIcon from 'servicemap-ui-turku/assets/icons/icons-icon_scooter_parking.svg';
 import scooterParkingIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_scooter_parking-bw.svg';
 import { useMobilityPlatformContext } from '../../../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../../../redux/selectors/settings';
+import { selectMapRef } from '../../../../../redux/selectors/general';
 import useMobilityDataFetch from '../../../utils/useMobilityDataFetch';
 import { createIcon, isDataValid, fitToMapBounds } from '../../../utils/utils';
 import TextContent from '../../../TextContent';
@@ -16,8 +16,7 @@ const ParkingAreas = () => {
   };
   const { showScooterParkingAreas } = useMobilityPlatformContext();
 
-  const map = useMap();
-
+  const map = useSelector(selectMapRef);
   const useContrast = useSelector(useAccessibleMap);
 
   const { Marker, Popup } = global.rL;

diff --git a/src/components/MobilityPlatform/Scooters/components/SpeedLimitAreas/SpeedLimitAreas.js b/src/components/MobilityPlatform/Scooters/components/SpeedLimitAreas/SpeedLimitAreas.js
@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import { useMobilityPlatformContext } from '../../../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../../../redux/selectors/settings';
+import { selectMapRef } from '../../../../../redux/selectors/general';
 import useMobilityDataFetch from '../../../utils/useMobilityDataFetch';
 import {
   isDataValid, fitPolygonsToBounds, blueOptionsBase, whiteOptionsBase,
@@ -25,6 +25,7 @@ const SpeedLimitAreas = () => {
   const { showScooterSpeedLimitAreas } = useMobilityPlatformContext();
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const blueOptions = blueOptionsBase();
   const whiteOptions = whiteOptionsBase({ fillOpacity: 0.3, dashArray: '10 2 10' });
@@ -33,8 +34,6 @@ const SpeedLimitAreas = () => {
   const { data } = useMobilityDataFetch(options, showScooterSpeedLimitAreas);
   const renderData = isDataValid(showScooterSpeedLimitAreas, data);
 
-  const map = useMap();
-
   useEffect(() => {
     fitPolygonsToBounds(renderData, data, map);
   }, [showScooterSpeedLimitAreas, data]);

diff --git a/...mponents/MobilityPlatform/SnowPlows/components/BrushedBicycleRoads/BrushedBicycleRoads.js b/...mponents/MobilityPlatform/SnowPlows/components/BrushedBicycleRoads/BrushedBicycleRoads.js
@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
-import { useMap } from 'react-leaflet';
 import { useSelector } from 'react-redux';
 import { useMobilityPlatformContext } from '../../../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../../../redux/selectors/settings';
+import { selectMapRef } from '../../../../../redux/selectors/general';
 import useMobilityDataFetch from '../../../utils/useMobilityDataFetch';
 import { isDataValid, fitPolygonsToBounds } from '../../../utils/utils';
 
@@ -24,6 +24,7 @@ const BrushedBicycleRoads = () => {
   const { Polyline } = global.rL;
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const white = 'rgba(255, 255, 255, 255)';
   const black = 'rgba(0, 0, 0, 255)';
@@ -54,8 +55,6 @@ const BrushedBicycleRoads = () => {
     weight: 4,
   };
 
-  const map = useMap();
-
   const { data: brushSaltedRoutes } = useMobilityDataFetch(optionsBrushSalted, showBrushSaltedRoute);
   const { data: brushSandedRoutes } = useMobilityDataFetch(optionsBrushSanded, showBrushSandedRoute);
   const renderBrushSandedData = isDataValid(showBrushSandedRoute, brushSandedRoutes);

diff --git a/src/components/MobilityPlatform/TrailsComponent/TrailsComponent.js b/src/components/MobilityPlatform/TrailsComponent/TrailsComponent.js
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import { isObjValid, whiteOptionsBase, blackOptionsBase } from '../utils/utils';
 
 /* Show selected trail on the map */
@@ -13,6 +13,7 @@ const TrailsComponent = ({
   const { Polyline } = global.rL;
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const pathOptions = { color };
   const blackOptions = blackOptionsBase({ dashArray: pattern });
@@ -24,31 +25,30 @@ const TrailsComponent = ({
 
   const renderData = isObjValid(showTrail, trailsObj);
 
-  const map = useMap();
-
   useEffect(() => {
     if (renderData) {
       const bounds = [];
       bounds.push(trailsObj.geometry_coords);
       map.fitBounds([bounds]);
     }
-  }, [showTrail, trailsObj]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [renderData, trailsObj]);
 
-  return (
+  return renderData ? (
     <>
-      {renderData ? (
-        <>
-          <Polyline weight={8} pathOptions={finalPathOptions.first} positions={trailsObj.geometry_coords} />
-          <Polyline weight={4} pathOptions={finalPathOptions.second} positions={trailsObj.geometry_coords} />
-        </>
-      ) : null}
+      <Polyline weight={8} pathOptions={finalPathOptions.first} positions={trailsObj.geometry_coords} />
+      <Polyline weight={4} pathOptions={finalPathOptions.second} positions={trailsObj.geometry_coords} />
     </>
-  );
+  ) : null;
 };
 
 TrailsComponent.propTypes = {
   showTrail: PropTypes.bool,
-  trailsObj: PropTypes.objectOf(PropTypes.any),
+  trailsObj: PropTypes.shape({
+    geometry_coords: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.arrayOf(
+      PropTypes.number,
+    ))),
+  }),
   color: PropTypes.string,
   pattern: PropTypes.string,
 };