From a6e33b4318b20bcee7b4d1dd0408ddb3cc229445 Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Tue, 18 Jun 2024 16:02:05 +0300 Subject: [PATCH] Get map refs from state part 2 --- .../EcoCounter/TrafficCounters/TrafficCounters.js | 7 ++++--- .../EnvironmentObservations/AirMonitoring/AirMonitoring.js | 5 ++--- .../MobilityPlatform/LoadingPlaces/LoadingPlaces.js | 5 ++--- .../OutdoorGymDevices/OutdoorGymDevices.js | 5 ++--- src/components/MobilityPlatform/Overpasses/Overpasses.js | 5 ++--- .../ParkAndRideStops/ParkAndRideBikes/ParkAndRideBikes.js | 5 ++--- .../Parking/DisabledParking/DisabledParking.js | 5 ++--- .../Parking/ParkingGarages/ParkingGarages.js | 4 ++-- .../Parking/PublicParking/PublicParking.js | 5 ++--- .../Parking/RentalCarParking/RentalCarParking.js | 5 ++--- .../MobilityPlatform/ParkingMachines/ParkingMachines.js | 4 ++-- .../MobilityPlatform/ParkingSpaces/ParkingSpaces.js | 5 ++--- src/components/MobilityPlatform/PortInfo/PortInfo.js | 5 ++--- .../MobilityPlatform/PublicToilets/PublicToilets.js | 5 ++--- .../MobilityPlatform/RailwayStations/RailwayStations.js | 5 ++--- src/components/MobilityPlatform/RentalCars/RentalCars.js | 6 +++--- 16 files changed, 35 insertions(+), 46 deletions(-) diff --git a/src/components/EcoCounter/TrafficCounters/TrafficCounters.js b/src/components/EcoCounter/TrafficCounters/TrafficCounters.js index 0075a340b..55d8dae0a 100644 --- 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 index 948ac04a2..44383eb8b 100644 --- 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 index 6d196544e..b4f91d894 100644 --- 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 index 58069cb44..dd9069cc7 100644 --- 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 index 146339160..f618ec459 100644 --- 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 index 73883d5a9..2fcc86b9d 100644 --- 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 index d3a31d32b..be488f071 100644 --- 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 index be750cdf6..8ae4d3f51 100644 --- 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 index 62614963c..aadc9e843 100644 --- 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 index 734582c0c..4fea2f590 100644 --- 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 index 0f566fef6..bdfd71711 100644 --- 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 index d0ca58af4..8035a0aab 100644 --- 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 index efeb39aeb..e3f7bb83d 100644 --- 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 index 0025a9cfa..86e981fb9 100644 --- a/src/components/MobilityPlatform/PublicToilets/PublicToilets.js +++ b/src/components/MobilityPlatform/PublicToilets/PublicToilets.js @@ -1,6 +1,5 @@ /* 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'; @@ -8,6 +7,7 @@ import { useMobilityPlatformContext } from '../../../context/MobilityPlatformCon 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,6 +20,7 @@ const PublicToilets = () => { const { showPublicToilets } = useMobilityPlatformContext(); const useContrast = useSelector(useAccessibleMap); + const map = useSelector(selectMapRef); const { icon } = global.L; const customIcon = icon(createIcon(useContrast ? publicToiletIconBw : publicToiletIcon)); @@ -27,8 +28,6 @@ const PublicToilets = () => { 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 index 0f79444eb..aa807a80a 100644 --- 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)); diff --git a/src/components/MobilityPlatform/RentalCars/RentalCars.js b/src/components/MobilityPlatform/RentalCars/RentalCars.js index 378d5ae0c..d3ebc812f 100644 --- a/src/components/MobilityPlatform/RentalCars/RentalCars.js +++ b/src/components/MobilityPlatform/RentalCars/RentalCars.js @@ -1,12 +1,13 @@ /* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useState } from 'react'; -import { useMap, useMapEvents } from 'react-leaflet'; +import { useMapEvents } from 'react-leaflet'; import { useSelector } from 'react-redux'; import rentalCarIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_rental_car-bw.svg'; import providerIcon from 'servicemap-ui-turku/assets/icons/icons-icon_24rent.svg'; import rentalCarIcon from 'servicemap-ui-turku/assets/icons/icons-icon_rental_car.svg'; import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext'; import { useAccessibleMap } from '../../../redux/selectors/settings'; +import { selectMapRef } from '../../../redux/selectors/general'; import useIotDataFetch from '../utils/useIotDataFetch'; import { isDataValid, setRender, checkMapType } from '../utils/utils'; import { isEmbed } from '../../../utils/path'; @@ -22,6 +23,7 @@ const RentalCars = () => { const embedded = isEmbed({ url: url.toString() }); const useContrast = useSelector(useAccessibleMap); + const map = useSelector(selectMapRef); const { Marker, Popup } = global.rL; const { icon } = global.L; @@ -41,8 +43,6 @@ const RentalCars = () => { const { iotData: rentalCarsData } = useIotDataFetch('R24', showRentalCars, embedded); - const map = useMap(); - const paramValue = url.searchParams.get('rental_cars') === '1'; const renderData = setRender(paramValue, embedded, showRentalCars, rentalCarsData, isDataValid);