Extract main map

2 files changed, 83 insertions, 45 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;
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index ec941323..14e6ebf8 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -10,33 +10,21 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import ListIcon from '@mui/icons-material/ViewList';
 import { useDispatch, useSelector } from 'react-redux';
 import DevicesList from './DevicesList';
-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 BottomMenu from '../common/components/BottomMenu';
 import { useTranslation } from '../common/components/LocalizationProvider';
-import PoiMap from '../map/main/PoiMap';
-import MapPadding from '../map/MapPadding';
 import StatusCard from '../common/components/StatusCard';
 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 EventsDrawer from './EventsDrawer';
-import useFeatures from '../common/util/useFeatures';
 import useFilter from './useFilter';
 import MainToolbar from './MainToolbar';
+import MainMap from './MainMap';
 
 const useStyles = makeStyles((theme) => ({
   root: {
     height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
   },
   sidebar: {
     display: 'flex',
@@ -62,8 +50,8 @@ const useStyles = makeStyles((theme) => ({
       transform: 'translateX(-100vw)',
     },
   },
-  toolbarContainer: {
-    zIndex: 4,
+  toolbar: {
+    zIndex: 1,
   },
   deviceList: {
     flex: 1,
@@ -109,12 +97,8 @@ const MainPage = () => {
   const desktop = useMediaQuery(theme.breakpoints.up('md'));
   const phone = useMediaQuery(theme.breakpoints.down('sm'));
 
-  const features = useFeatures();
-
   const [mapOnSelect] = usePersistedState('mapOnSelect', false);
 
-  const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
-
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
   const positions = useSelector((state) => state.positions.items);
   const [filteredPositions, setFilteredPositions] = useState([]);
@@ -133,8 +117,7 @@ const MainPage = () => {
   const [devicesOpen, setDevicesOpen] = useState(false);
   const [eventsOpen, setEventsOpen] = useState(false);
 
-  const eventHandler = useCallback(() => setEventsOpen(true), [setEventsOpen]);
-  const eventsAvailable = useSelector((state) => !!state.events.items.length);
+  const onEventsClick = useCallback(() => setEventsOpen(true), [setEventsOpen]);
 
   useEffect(() => setDevicesOpen(desktop), [desktop]);
 
@@ -144,29 +127,15 @@ const MainPage = () => {
     }
   }, [desktop, mapOnSelect, selectedDeviceId]);
 
-  const onClick = useCallback((_, deviceId) => {
-    dispatch(devicesActions.select(deviceId));
-  }, [dispatch]);
-
   useFilter(filter, filterSort, filterMap, positions, setFilteredDevices, setFilteredPositions);
 
   return (
     <div className={classes.root}>
-      <MapView>
-        <MapOverlay />
-        <MapGeofence />
-        <MapAccuracy positions={filteredPositions} />
-        {mapLiveRoutes && <MapLiveRoutes />}
-        <MapPositions positions={filteredPositions} onClick={onClick} selectedPosition={selectedPosition} showStatus />
-        <MapDefaultCamera />
-        <MapSelectedDevice />
-        <PoiMap />
-      </MapView>
-      <MapScale />
-      <MapCurrentLocation />
-      <MapGeocoder />
-      {!features.disableEvents && <MapNotification enabled={eventsAvailable} onClick={eventHandler} />}
-      {desktop && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
+      <MainMap
+        filteredPositions={filteredPositions}
+        selectedPosition={selectedPosition}
+        onEventsClick={onEventsClick}
+      />
       <Button
         variant="contained"
         color={phone ? 'secondary' : 'primary'}
@@ -179,7 +148,7 @@ const MainPage = () => {
         <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div>
       </Button>
       <Paper square elevation={3} className={`${classes.sidebar} ${!devicesOpen && classes.sidebarCollapsed}`}>
-        <Paper square elevation={3} className={classes.toolbarContainer}>
+        <Paper square elevation={3} className={classes.toolbar}>
           <MainToolbar
             filter={filter}
             setFilter={setFilter}
@@ -198,11 +167,11 @@ const MainPage = () => {
           <BottomMenu />
         </div>
       )}
-      {!features.disableEvents && <EventsDrawer open={eventsOpen} onClose={() => setEventsOpen(false)} />}
+      <EventsDrawer open={eventsOpen} onClose={() => setEventsOpen(false)} />
       {selectedDeviceId && (
         <StatusCard
           deviceId={selectedDeviceId}
-          position={positions[selectedDeviceId]}
+          position={selectedPosition}
           onClose={() => dispatch(devicesActions.select(null))}
           desktopPadding={theme.dimensions.drawerWidthDesktop}
         />