Extract main map

1 files changed, 69 insertions, 0 deletions

diff --git a/modern/src/main/MainMap.js b/modern/src/main/MainMap.js
new file mode 100644
index 00000000..81d214f9
--- /dev/null
+++ b/modern/src/main/MainMap.js
@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useDispatch, useSelector } from 'react-redux';
+import MapView from '../map/core/MapView';
+import MapSelectedDevice from '../map/main/MapSelectedDevice';
+import MapAccuracy from '../map/main/MapAccuracy';
+import MapGeofence from '../map/MapGeofence';
+import MapCurrentLocation from '../map/MapCurrentLocation';
+import PoiMap from '../map/main/PoiMap';
+import MapPadding from '../map/MapPadding';
+import { devicesActions } from '../store';
+import MapDefaultCamera from '../map/main/MapDefaultCamera';
+import usePersistedState from '../common/util/usePersistedState';
+import MapLiveRoutes from '../map/main/MapLiveRoutes';
+import MapPositions from '../map/MapPositions';
+import MapOverlay from '../map/overlay/MapOverlay';
+import MapGeocoder from '../map/geocoder/MapGeocoder';
+import MapScale from '../map/MapScale';
+import MapNotification from '../map/notification/MapNotification';
+import useFeatures from '../common/util/useFeatures';
+
+const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+
+  const desktop = useMediaQuery(theme.breakpoints.up('md'));
+
+  const eventsAvailable = useSelector((state) => !!state.events.items.length);
+
+  const features = useFeatures();
+
+  const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
+
+  const onMarkerClick = useCallback((_, deviceId) => {
+    dispatch(devicesActions.select(deviceId));
+  }, [dispatch]);
+
+  return (
+    <>
+      <MapView>
+        <MapOverlay />
+        <MapGeofence />
+        <MapAccuracy positions={filteredPositions} />
+        {mapLiveRoutes && <MapLiveRoutes />}
+        <MapPositions
+          positions={filteredPositions}
+          onClick={onMarkerClick}
+          selectedPosition={selectedPosition}
+          showStatus
+        />
+        <MapDefaultCamera />
+        <MapSelectedDevice />
+        <PoiMap />
+      </MapView>
+      <MapScale />
+      <MapCurrentLocation />
+      <MapGeocoder />
+      {!features.disableEvents && (
+        <MapNotification enabled={eventsAvailable} onClick={onEventsClick} />
+      )}
+      {desktop && (
+        <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />
+      )}
+    </>
+  );
+};
+
+export default MainMap;