Get map refs from state part 2

City-of-Turku · Jun 18, 2024 · a6e33b4 · a6e33b4
1 parent c46849c
commit a6e33b4
Show file tree

Hide file tree

Showing 16 changed files with 35 additions and 46 deletions.
diff --git a/src/components/EcoCounter/TrafficCounters/TrafficCounters.js b/src/components/EcoCounter/TrafficCounters/TrafficCounters.js
@@ -1,8 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useState } from 'react';
-import { useMap } from 'react-leaflet';
+import { useSelector } from 'react-redux';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import { isDataValid } from '../../MobilityPlatform/utils/utils';
+import { selectMapRef } from '../../../redux/selectors/general';
 import { fetchTrafficCounterStationsByType } from '../EcoCounterRequests/ecoCounterRequests';
 import CounterMarkers from '../CounterMarkers';
 import EcoCounterContent from './EcoCounterContent';
@@ -17,6 +18,8 @@ const TrafficCounters = () => {
 
   const { showTrafficCounter } = useMobilityPlatformContext();
 
+  const map = useSelector(selectMapRef);
+
   useEffect(() => {
     if (showTrafficCounter.walking && !pedestrianCounterStations.length) {
       fetchTrafficCounterStationsByType('j', setPedestrianCounterStations);
@@ -35,8 +38,6 @@ const TrafficCounters = () => {
     }
   }, [showTrafficCounter.driving]);
 
-  const map = useMap();
-
   const renderPedestrianCounters = isDataValid(showTrafficCounter.walking, pedestrianCounterStations);
   const renderBicycleCounters = isDataValid(showTrafficCounter.cycling, bicycleCounterStations);
   const renderCarCounters = isDataValid(showTrafficCounter.driving, carCounterStations);

diff --git a/src/components/MobilityPlatform/EnvironmentObservations/AirMonitoring/AirMonitoring.js b/src/components/MobilityPlatform/EnvironmentObservations/AirMonitoring/AirMonitoring.js
@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import airMonitoringIcon from 'servicemap-ui-turku/assets/icons/icons-icon_air_monitoring_station.svg';
 import airMonitoringIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_air_monitoring_station-bw.svg';
 import { useMobilityPlatformContext } from '../../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../../redux/selectors/settings';
+import { selectMapRef } from '../../../../redux/selectors/general';
 import { fetchObservationStations } from '../EnvironmentDataAPI/EnvironmentDataAPI';
 import { isDataValid, createIcon } from '../../utils/utils';
 import AirMonitoringContent from './components/AirMonitoringContent';
@@ -16,8 +16,7 @@ const AirMonitoring = () => {
   const { showAirMonitoringStations } = useMobilityPlatformContext();
 
   const useContrast = useSelector(useAccessibleMap);
-
-  const map = useMap();
+  const map = useSelector(selectMapRef);
 
   const { Marker, Popup } = global.rL;
   const { icon } = global.L;

diff --git a/src/components/MobilityPlatform/LoadingPlaces/LoadingPlaces.js b/src/components/MobilityPlatform/LoadingPlaces/LoadingPlaces.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 loadingPlaceIcon from 'servicemap-ui-turku/assets/icons/icons-icon_loading_place.svg';
 import loadingPlaceIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_loading_place-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 { isDataValid, fitPolygonsToBounds, createIcon } from '../utils/utils';
 import LoadingPlacesContent from './components/LoadingPlacesContent';
@@ -19,8 +19,7 @@ const LoadingPlaces = () => {
 
   const { showLoadingPlaces } = useMobilityPlatformContext();
 
-  const map = useMap();
-
+  const map = useSelector(selectMapRef);
   const useContrast = useSelector(useAccessibleMap);
 
   const { Marker, Popup } = global.rL;

diff --git a/src/components/MobilityPlatform/OutdoorGymDevices/OutdoorGymDevices.js b/src/components/MobilityPlatform/OutdoorGymDevices/OutdoorGymDevices.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 sportIconContrast from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_outdoor_gym-bw.svg';
 import sportIcon from 'servicemap-ui-turku/assets/icons/icons-icon_outdoor_gym.svg';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import { isDataValid, fitToMapBounds, createIcon } from '../utils/utils';
 import useMobilityDataFetch from '../utils/useMobilityDataFetch';
 import MarkerComponent from '../MarkerComponent';
@@ -19,8 +19,7 @@ const OutdoorGymDevices = () => {
   const { showOutdoorGymDevices } = useMobilityPlatformContext();
 
   const useContrast = useSelector(useAccessibleMap);
-
-  const map = useMap();
+  const map = useSelector(selectMapRef);
 
   const { icon } = global.L;
 

diff --git a/src/components/MobilityPlatform/Overpasses/Overpasses.js b/src/components/MobilityPlatform/Overpasses/Overpasses.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, blueOptionsBase, whiteOptionsBase, setRender,
@@ -32,6 +32,7 @@ const Overpasses = () => {
   const { Polyline } = global.rL;
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const url = new URL(window.location);
   const embedded = isEmbed({ url: url.toString() });
@@ -44,8 +45,6 @@ const Overpasses = () => {
   const underPassPathOptions = useContrast ? whiteOptions : blueOptions;
   const overPassPathOptions = useContrast ? whiteOptions : greenOptions;
 
-  const map = useMap();
-
   const { data: overpassData } = useMobilityDataFetch(optionsOverpass, showOverpasses, embedded);
   const { data: underpassData } = useMobilityDataFetch(optionsUnderpass, showUnderpasses, embedded);
   const paramOverpass = url.searchParams.get('overpass') === '1';

diff --git a/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/ParkAndRideBikes.js b/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/ParkAndRideBikes.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 parkAndRideIcon from 'servicemap-ui-turku/assets/icons/icons-icon_park_and_ride_bicycle.svg';
 import parkAndRideIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_park_and_ride_bicycle-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 MarkerComponent from '../../MarkerComponent';
@@ -25,11 +25,10 @@ const ParkAndRideBikes = () => {
   const { icon } = global.L;
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const customIcon = icon(createIcon(useContrast ? parkAndRideIconBw : parkAndRideIcon));
 
-  const map = useMap();
-
   const { data } = useMobilityDataFetch(options, showParkAndRideBikes);
   const renderData = isDataValid(showParkAndRideBikes, data);
 

diff --git a/src/components/MobilityPlatform/Parking/DisabledParking/DisabledParking.js b/src/components/MobilityPlatform/Parking/DisabledParking/DisabledParking.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 disabledParkingIcon from 'servicemap-ui-turku/assets/icons/icons-icon_disabled_parking.svg';
 import disabledParkingIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_disabled_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, fitPolygonsToBounds } from '../../utils/utils';
 import DisabledParkingContent from './components/DisabledParkingContent';
@@ -26,11 +26,10 @@ const DisabledParking = () => {
   const { icon } = global.L;
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const customIcon = icon(createIcon(useContrast ? disabledParkingIconBw : disabledParkingIcon));
 
-  const map = useMap();
-
   const { data } = useMobilityDataFetch(options, showDisabledParking);
   const renderData = isDataValid(showDisabledParking, data);
 

diff --git a/src/components/MobilityPlatform/Parking/ParkingGarages/ParkingGarages.js b/src/components/MobilityPlatform/Parking/ParkingGarages/ParkingGarages.js
@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import parkingSpaceIcon from 'servicemap-ui-turku/assets/icons/icons-icon_parking_space.svg';
 import parkingSpaceIconContrast from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_parking_space-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 MarkerComponent from '../../MarkerComponent';
@@ -20,7 +20,7 @@ const ParkingGarages = () => {
 
   const { showParkingGarages } = useMobilityPlatformContext();
 
-  const map = useMap();
+  const map = useSelector(selectMapRef);
   const useContrast = useSelector(useAccessibleMap);
 
   const { icon } = global.L;

diff --git a/src/components/MobilityPlatform/Parking/PublicParking/PublicParking.js b/src/components/MobilityPlatform/Parking/PublicParking/PublicParking.js
@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
-import { useMap } from 'react-leaflet';
 import { useSelector } from 'react-redux';
 import { useAccessibleMap } from '../../../../redux/selectors/settings';
+import { selectMapRef } from '../../../../redux/selectors/general';
 import { useMobilityPlatformContext } from '../../../../context/MobilityPlatformContext';
 import useMobilityDataFetch from '../../utils/useMobilityDataFetch';
 import {
@@ -24,13 +24,12 @@ const PublicParking = () => {
   const { showPublicParking } = useMobilityPlatformContext();
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const blueOptions = blueOptionsBase({ weight: 5 });
   const whiteOptions = whiteOptionsBase({ fillOpacity: 0.3, weight: 5, dashArray: '2 4 6' });
   const pathOptions = useContrast ? whiteOptions : blueOptions;
 
-  const map = useMap();
-
   const { data } = useMobilityDataFetch(options, showPublicParking);
   const renderData = isDataValid(showPublicParking, data);
 

diff --git a/src/components/MobilityPlatform/Parking/RentalCarParking/RentalCarParking.js b/src/components/MobilityPlatform/Parking/RentalCarParking/RentalCarParking.js
@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
-import { useMap } from 'react-leaflet';
 import { useSelector } from 'react-redux';
 import rentalCarParkingIcon from 'servicemap-ui-turku/assets/icons/icons-icon_rental_car_parking.svg';
 import rentalCarParkingIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_rental_car_parking-bw.svg';
 import { useAccessibleMap } from '../../../../redux/selectors/settings';
+import { selectMapRef } from '../../../../redux/selectors/general';
 import { useMobilityPlatformContext } from '../../../../context/MobilityPlatformContext';
 import useMobilityDataFetch from '../../utils/useMobilityDataFetch';
 import { isDataValid, fitPolygonsToBounds, createIcon } from '../../utils/utils';
@@ -24,14 +24,13 @@ const RentalCarParking = () => {
   const { showRentalCarParking } = useMobilityPlatformContext();
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const { Marker, Popup } = global.rL;
   const { icon } = global.L;
 
   const customIcon = icon(createIcon(useContrast ? rentalCarParkingIconBw : rentalCarParkingIcon));
 
-  const map = useMap();
-
   const { data } = useMobilityDataFetch(options, showRentalCarParking);
   const renderData = isDataValid(showRentalCarParking, data);
 

diff --git a/src/components/MobilityPlatform/ParkingMachines/ParkingMachines.js b/src/components/MobilityPlatform/ParkingMachines/ParkingMachines.js
@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import parkingMachineIcon from 'servicemap-ui-turku/assets/icons/icons-icon_parking_machine.svg';
 import parkingMachineIconContrast from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_parking_machine-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 MarkerComponent from '../MarkerComponent';
@@ -19,7 +19,7 @@ const ParkingMachines = () => {
 
   const { showParkingMachines } = useMobilityPlatformContext();
 
-  const map = useMap();
+  const map = useSelector(selectMapRef);
   const useContrast = useSelector(useAccessibleMap);
 
   const { icon } = global.L;

diff --git a/src/components/MobilityPlatform/ParkingSpaces/ParkingSpaces.js b/src/components/MobilityPlatform/ParkingSpaces/ParkingSpaces.js
@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import { fetchAreaGeometries, fetchParkingAreaStats } from '../mobilityPlatformRequests/mobilityPlatformRequests';
 import { isObjValid } from '../utils/utils';
 import config from '../../../../config';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import ParkingSpacesContent from './components/ParkingSpacesContent';
 
@@ -17,6 +17,7 @@ const ParkingSpaces = () => {
   const { showParkingSpaces } = useMobilityPlatformContext();
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const { Polygon, Popup } = global.rL;
 
@@ -60,8 +61,6 @@ const ParkingSpaces = () => {
     return inputData;
   };
 
-  const map = useMap();
-
   const renderData = isObjValid(showParkingSpaces, parkingSpaces);
 
   useEffect(() => {

diff --git a/src/components/MobilityPlatform/PortInfo/PortInfo.js b/src/components/MobilityPlatform/PortInfo/PortInfo.js
@@ -1,12 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import { subDays, addDays, format } from 'date-fns';
 import ferryIcon from 'servicemap-ui-turku/assets/icons/icons-icon_ferry.svg';
 import ferryIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_ferry-bw.svg';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import { fetchPortNetData } from '../mobilityPlatformRequests/mobilityPlatformRequests';
 import { createIcon, isDataValid, optionsToParams } from '../utils/utils';
 import { StyledPopupWrapper, StyledPopupInner } from '../styled/styled';
@@ -20,12 +20,11 @@ const PortInfo = () => {
 
   const { showPortInfo } = useMobilityPlatformContext();
 
-  const map = useMap();
-
   const { Marker, Popup } = global.rL;
   const { icon } = global.L;
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
   const customIcon = icon(createIcon(useContrast ? ferryIconBw : ferryIcon));
 
   const yesterday = subDays(new Date(), 1);

diff --git a/src/components/MobilityPlatform/PublicToilets/PublicToilets.js b/src/components/MobilityPlatform/PublicToilets/PublicToilets.js
@@ -1,13 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
-import { useMap } from 'react-leaflet';
 import { useSelector } from 'react-redux';
 import publicToiletIcon from 'servicemap-ui-turku/assets/icons/icons-icon_toilet.svg';
 import publicToiletIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_toilet-bw.svg';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import useMobilityDataFetch from '../utils/useMobilityDataFetch';
 import { createIcon, isDataValid, fitToMapBounds } from '../utils/utils';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import MarkerComponent from '../MarkerComponent';
 import PublicToiletsContent from './components/PublicToiletsContent';
 
@@ -20,15 +20,14 @@ const PublicToilets = () => {
   const { showPublicToilets } = useMobilityPlatformContext();
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const { icon } = global.L;
   const customIcon = icon(createIcon(useContrast ? publicToiletIconBw : publicToiletIcon));
 
   const { data } = useMobilityDataFetch(options, showPublicToilets);
   const renderData = isDataValid(showPublicToilets, data);
 
-  const map = useMap();
-
   useEffect(() => {
     fitToMapBounds(renderData, data, map);
   }, [showPublicToilets, data]);

diff --git a/src/components/MobilityPlatform/RailwayStations/RailwayStations.js b/src/components/MobilityPlatform/RailwayStations/RailwayStations.js
@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useMap } from 'react-leaflet';
 import railwayIcon from 'servicemap-ui-turku/assets/icons/icons-icon_railway_station.svg';
 import railwayIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_railway_station-bw.svg';
 import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext';
 import { useAccessibleMap } from '../../../redux/selectors/settings';
+import { selectMapRef } from '../../../redux/selectors/general';
 import { fetchRailwaysData } from '../mobilityPlatformRequests/mobilityPlatformRequests';
 import { createIcon, isDataValid } from '../utils/utils';
 import RailwayStationsContent from './components/RailwayStationsContent';
@@ -16,12 +16,11 @@ const RailwayStations = () => {
 
   const { showRailwayStations } = useMobilityPlatformContext();
 
-  const map = useMap();
-
   const { Marker, Popup } = global.rL;
   const { icon } = global.L;
 
   const useContrast = useSelector(useAccessibleMap);
+  const map = useSelector(selectMapRef);
 
   const customIcon = icon(createIcon(useContrast ? railwayIconBw : railwayIcon));