aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-11-01 20:31:10 -0800
committerAnton Tananaev <anton.tananaev@gmail.com>2020-11-01 20:31:10 -0800
commita20e4b3348285607631630e6dda415a9e29e967d (patch)
treed8c36f75f9372b9c4a592cf5d742ff41e0856e3f
parentbee6677be113e4215d07abd54db32dd4fc37b3b0 (diff)
downloadtrackermap-web-a20e4b3348285607631630e6dda415a9e29e967d.tar.gz
trackermap-web-a20e4b3348285607631630e6dda415a9e29e967d.tar.bz2
trackermap-web-a20e4b3348285607631630e6dda415a9e29e967d.zip
Fix react warnings
-rw-r--r--modern/src/DevicesList.js2
-rw-r--r--modern/src/map/PositionsMap.js19
-rw-r--r--modern/src/map/StatusView.js2
-rw-r--r--modern/src/reactHelper.js2
4 files changed, 14 insertions, 11 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 15badcb9..976fd84a 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -47,7 +47,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
<ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
<ListItemAvatar>
<Avatar>
- <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} />
+ <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
</Avatar>
</ListItemAvatar>
<ListItemText primary={item.name} secondary={item.uniqueId} />
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 6a7a68bb..0ad9a69d 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
import ReactDOM from 'react-dom';
import mapboxgl from 'mapbox-gl';
import { Provider, useSelector } from 'react-redux';
@@ -18,7 +18,7 @@ const PositionsMap = () => {
return {
deviceId: position.deviceId,
name: device ? device.name : '',
- category: device && device.category || 'default',
+ category: device && (device.category || 'default'),
}
};
@@ -37,7 +37,7 @@ const PositionsMap = () => {
const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
const onMouseLeave = () => map.getCanvas().style.cursor = '';
- const onClick = event => {
+ const onClickCallback = useCallback(event => {
const feature = event.features[0];
let coordinates = feature.geometry.coordinates.slice();
while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) {
@@ -59,12 +59,15 @@ const PositionsMap = () => {
.setDOMContent(placeholder)
.setLngLat(coordinates)
.addTo(map);
- };
+ }, [history]);
useEffect(() => {
map.addSource(id, {
'type': 'geojson',
- 'data': positions,
+ 'data': {
+ type: 'FeatureCollection',
+ features: [],
+ }
});
map.addLayer({
'id': id,
@@ -88,19 +91,19 @@ const PositionsMap = () => {
map.on('mouseenter', id, onMouseEnter);
map.on('mouseleave', id, onMouseLeave);
- map.on('click', id, onClick);
+ map.on('click', id, onClickCallback);
return () => {
Array.from(map.getContainer().getElementsByClassName('mapboxgl-popup')).forEach(el => el.remove());
map.off('mouseenter', id, onMouseEnter);
map.off('mouseleave', id, onMouseLeave);
- map.off('click', id, onClick);
+ map.off('click', id, onClickCallback);
map.removeLayer(id);
map.removeSource(id);
};
- }, []);
+ }, [onClickCallback]);
useEffect(() => {
map.getSource(id).setData(positions);
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index 3a304263..ae049af1 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -22,7 +22,7 @@ const StatusView = ({ deviceId, onShowDetails }) => {
{position.attributes.batteryLevel &&
<><b>{t('positionBattery')}:</b> {formatPosition(position.attributes.batteryLevel, 'batteryLevel')}<br /></>
}
- <a href="#" onClick={handleClick}>{t('sharedShowDetails')}</a>
+ <a href="/" onClick={handleClick}>{t('sharedShowDetails')}</a>
</>
);
};
diff --git a/modern/src/reactHelper.js b/modern/src/reactHelper.js
index 9286c577..cd161d46 100644
--- a/modern/src/reactHelper.js
+++ b/modern/src/reactHelper.js
@@ -12,5 +12,5 @@ export const usePrevious = value => {
export const useEffectAsync = (effect, deps) => {
useEffect(() => {
effect();
- }, deps);
+ }, [effect, ...deps]); // eslint-disable-line react-hooks/exhaustive-deps
}