aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-04-17 11:29:43 -0700
committerAnton Tananaev <anton@traccar.org>2022-04-17 11:29:43 -0700
commit2054cc9d11d77d7883a5858bcbcc3833aed4b874 (patch)
treeb953ff5f18f037c33904a431675686ab579970d2 /modern/src/map
parentde73ecd28f8428c026a25225573c971250723528 (diff)
downloadtrackermap-web-2054cc9d11d77d7883a5858bcbcc3833aed4b874.tar.gz
trackermap-web-2054cc9d11d77d7883a5858bcbcc3833aed4b874.tar.bz2
trackermap-web-2054cc9d11d77d7883a5858bcbcc3833aed4b874.zip
Fix effect dependencies
Diffstat (limited to 'modern/src/map')
-rw-r--r--modern/src/map/GeofenceEditMap.js36
-rw-r--r--modern/src/map/Map.js2
-rw-r--r--modern/src/map/PositionsMap.js6
3 files changed, 29 insertions, 15 deletions
diff --git a/modern/src/map/GeofenceEditMap.js b/modern/src/map/GeofenceEditMap.js
index 3d1822fe..91addd43 100644
--- a/modern/src/map/GeofenceEditMap.js
+++ b/modern/src/map/GeofenceEditMap.js
@@ -2,7 +2,7 @@ import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import theme from '@mapbox/mapbox-gl-draw/src/lib/theme';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
@@ -39,19 +39,22 @@ const GeofenceEditMap = () => {
const geofences = useSelector((state) => Object.values(state.geofences.items));
- const refreshGeofences = async () => {
+ const refreshGeofences = useCallback(async () => {
const response = await fetch('/api/geofences');
if (response.ok) {
dispatch(geofencesActions.refresh(await response.json()));
}
- };
+ }, [dispatch]);
useEffect(() => {
refreshGeofences();
map.addControl(draw, 'top-left');
+ return () => map.removeControl(draw);
+ }, [refreshGeofences]);
- map.on('draw.create', async (event) => {
+ useEffect(() => {
+ const listener = async (event) => {
const feature = event.features[0];
const newItem = { name: '', area: geometryToArea(feature.geometry) };
draw.delete(feature.id);
@@ -64,17 +67,27 @@ const GeofenceEditMap = () => {
const item = await response.json();
history.push(`/geofence/${item.id}`);
}
- });
+ };
- map.on('draw.delete', async (event) => {
+ map.on('draw.create', listener);
+ return () => map.off('draw.create', listener);
+ }, [history]);
+
+ useEffect(() => {
+ const listener = async (event) => {
const feature = event.features[0];
const response = await fetch(`/api/geofences/${feature.id}`, { method: 'DELETE' });
if (response.ok) {
refreshGeofences();
}
- });
+ };
+
+ map.on('draw.delete', listener);
+ return () => map.off('draw.delete', listener);
+ }, [refreshGeofences]);
- map.on('draw.update', async (event) => {
+ useEffect(() => {
+ const listener = async (event) => {
const feature = event.features[0];
const item = geofences.find((i) => i.id === feature.id);
if (item) {
@@ -88,10 +101,11 @@ const GeofenceEditMap = () => {
refreshGeofences();
}
}
- });
+ };
- return () => map.removeControl(draw);
- }, []);
+ map.on('draw.update', listener);
+ return () => map.off('draw.update', listener);
+ }, [geofences, refreshGeofences]);
useEffect(() => {
draw.deleteAll();
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index deb2ec9b..7c87797d 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -110,7 +110,7 @@ const Map = ({ children }) => {
{ id: 'mapTilerBasic', title: t('mapMapTilerBasic'), uri: styleMapTiler('basic', mapTilerKey) },
{ id: 'mapTilerHybrid', title: t('mapMapTilerHybrid'), uri: styleMapTiler('hybrid', mapTilerKey) },
], 'locationIqStreets');
- }, [mapTilerKey]);
+ }, [t, locationIqKey, mapTilerKey]);
useEffect(() => {
const listener = (ready) => setMapReady(ready);
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 791c7abe..cabce3df 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -62,7 +62,7 @@ const PositionsMap = ({ positions }) => {
.addTo(map);
}, [history]);
- const onClusterClick = (event) => {
+ const onClusterClick = useCallback((event) => {
const features = map.queryRenderedFeatures(event.point, {
layers: [clusters],
});
@@ -75,7 +75,7 @@ const PositionsMap = ({ positions }) => {
});
}
});
- };
+ }, [clusters]);
useEffect(() => {
map.addSource(id, {
@@ -148,7 +148,7 @@ const PositionsMap = ({ positions }) => {
map.removeSource(id);
}
};
- }, [onMarkerClick]);
+ }, [clusters, onMarkerClick, onClusterClick]);
useEffect(() => {
map.getSource(id).setData({