Clean up replay page

2 files changed, 17 insertions, 9 deletions

diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 74b58beb..2e152d34 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -1,16 +1,14 @@
 import { useCallback, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { map } from './core/Map';
 import { getStatusColor } from '../common/util/formatter';
-import { devicesActions } from '../store';
 import usePersistedState from '../common/util/usePersistedState';
 
-const PositionsMap = ({ positions }) => {
+const PositionsMap = ({ positions, onClick }) => {
   const id = 'positions';
   const clusters = `${id}-clusters`;
 
-  const dispatch = useDispatch();
   const devices = useSelector((state) => state.devices.items);
 
   const [mapCluster] = usePersistedState('mapCluster', true);
@@ -18,6 +16,7 @@ const PositionsMap = ({ positions }) => {
   const createFeature = (devices, position) => {
     const device = devices[position.deviceId];
     return {
+      id: position.id,
       deviceId: position.deviceId,
       name: device.name,
       category: device.category || 'default',
@@ -30,8 +29,10 @@ const PositionsMap = ({ positions }) => {
 
   const onMarkerClick = useCallback((event) => {
     const feature = event.features[0];
-    dispatch(devicesActions.select(feature.properties.deviceId));
-  }, [dispatch]);
+    if (onClick) {
+      onClick(feature.properties.id, feature.properties.deviceId);
+    }
+  }, [onClick]);
 
   const onClusterClick = useCallback((event) => {
     const features = map.queryRenderedFeatures(event.point, {
diff --git a/modern/src/map/main/CurrentPositionsMap.js b/modern/src/map/main/CurrentPositionsMap.js
index 80795497..76a0a0b9 100644
--- a/modern/src/map/main/CurrentPositionsMap.js
+++ b/modern/src/map/main/CurrentPositionsMap.js
@@ -1,11 +1,18 @@
-import React, { } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { devicesActions } from '../../store';
 import PositionsMap from '../PositionsMap';
 
 const CurrentPositionsMap = () => {
+  const dispatch = useDispatch();
+
+  const onClick = useCallback((_, deviceId) => {
+    dispatch(devicesActions.select(deviceId));
+  }, [dispatch]);
+
   const positions = useSelector((state) => state.positions.items);
-  return (<PositionsMap positions={Object.values(positions)} />);
+  return (<PositionsMap positions={Object.values(positions)} onClick={onClick} />);
 };
 
 export default CurrentPositionsMap;