Extract device row

3 files changed, 75 insertions, 64 deletions

diff --git a/modern/src/main/DeviceList.js b/modern/src/main/DeviceList.js
new file mode 100644
index 00000000..80104b00
--- /dev/null
+++ b/modern/src/main/DeviceList.js
@@ -0,0 +1,69 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import makeStyles from '@mui/styles/makeStyles';
+import { List } from '@mui/material';
+import { FixedSizeList } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { devicesActions } from '../store';
+import { useEffectAsync } from '../reactHelper';
+import DeviceRow from './DeviceRow';
+
+const useStyles = makeStyles((theme) => ({
+  list: {
+    maxHeight: '100%',
+  },
+  listInner: {
+    position: 'relative',
+    margin: theme.spacing(1.5, 0),
+  },
+}));
+
+const DeviceList = ({ devices }) => {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const listInnerEl = useRef(null);
+
+  if (listInnerEl.current) {
+    listInnerEl.current.className = classes.listInner;
+  }
+
+  const [, setTime] = useState(Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => setTime(Date.now()), 60000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  useEffectAsync(async () => {
+    const response = await fetch('/api/devices');
+    if (response.ok) {
+      dispatch(devicesActions.refresh(await response.json()));
+    } else {
+      throw Error(await response.text());
+    }
+  }, []);
+
+  return (
+    <AutoSizer className={classes.list}>
+      {({ height, width }) => (
+        <List disablePadding>
+          <FixedSizeList
+            width={width}
+            height={height}
+            itemCount={devices.length}
+            itemData={{ items: devices }}
+            itemSize={72}
+            overscanCount={10}
+            innerRef={listInnerEl}
+          >
+            {DeviceRow}
+          </FixedSizeList>
+        </List>
+      )}
+    </AutoSizer>
+  );
+};
+
+export default DeviceList;
diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DeviceRow.js
index 054cf509..440e6f5c 100644
--- a/modern/src/main/DevicesList.js
+++ b/modern/src/main/DeviceRow.js
@@ -1,11 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import makeStyles from '@mui/styles/makeStyles';
 import {
-  IconButton, Tooltip, Avatar, List, ListItemAvatar, ListItemText, ListItemButton,
+  IconButton, Tooltip, Avatar, ListItemAvatar, ListItemText, ListItemButton,
 } from '@mui/material';
-import { FixedSizeList } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
 import BatteryFullIcon from '@mui/icons-material/BatteryFull';
 import BatteryChargingFullIcon from '@mui/icons-material/BatteryChargingFull';
 import Battery60Icon from '@mui/icons-material/Battery60';
@@ -15,7 +13,6 @@ import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
 import ErrorIcon from '@mui/icons-material/Error';
 import moment from 'moment';
 import { devicesActions } from '../store';
-import { useEffectAsync } from '../reactHelper';
 import {
   formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor,
 } from '../common/util/formatter';
@@ -26,13 +23,6 @@ import usePersistedState from '../common/util/usePersistedState';
 import { ReactComponent as EngineIcon } from '../resources/images/data/engine.svg';
 
 const useStyles = makeStyles((theme) => ({
-  list: {
-    maxHeight: '100%',
-  },
-  listInner: {
-    position: 'relative',
-    margin: theme.spacing(1.5, 0),
-  },
   icon: {
     width: '25px',
     height: '25px',
@@ -170,52 +160,4 @@ const DeviceRow = ({ data, index, style }) => {
   );
 };
 
-const DevicesList = ({ devices }) => {
-  const classes = useStyles();
-  const dispatch = useDispatch();
-  const listInnerEl = useRef(null);
-
-  if (listInnerEl.current) {
-    listInnerEl.current.className = classes.listInner;
-  }
-
-  const [, setTime] = useState(Date.now());
-
-  useEffect(() => {
-    const interval = setInterval(() => setTime(Date.now()), 60000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  useEffectAsync(async () => {
-    const response = await fetch('/api/devices');
-    if (response.ok) {
-      dispatch(devicesActions.refresh(await response.json()));
-    } else {
-      throw Error(await response.text());
-    }
-  }, []);
-
-  return (
-    <AutoSizer className={classes.list}>
-      {({ height, width }) => (
-        <List disablePadding>
-          <FixedSizeList
-            width={width}
-            height={height}
-            itemCount={devices.length}
-            itemData={{ items: devices }}
-            itemSize={72}
-            overscanCount={10}
-            innerRef={listInnerEl}
-          >
-            {DeviceRow}
-          </FixedSizeList>
-        </List>
-      )}
-    </AutoSizer>
-  );
-};
-
-export default DevicesList;
+export default DeviceRow;
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 2713c81e..a296d5f6 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -6,7 +6,7 @@ import { makeStyles } from '@mui/styles';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useDispatch, useSelector } from 'react-redux';
-import DevicesList from './DevicesList';
+import DeviceList from './DeviceList';
 import BottomMenu from '../common/components/BottomMenu';
 import StatusCard from '../common/components/StatusCard';
 import { devicesActions } from '../store';
@@ -63,7 +63,7 @@ const MainPage = () => {
 
   const desktop = useMediaQuery(theme.breakpoints.up('md'));
 
-  const [mapOnSelect] = usePersistedState('mapOnSelect', false);
+  const [mapOnSelect] = usePersistedState('mapOnSelect', true);
 
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
   const positions = useSelector((state) => state.positions.items);
@@ -126,7 +126,7 @@ const MainPage = () => {
             </div>
           )}
           <Paper square className={classes.contentList} style={devicesOpen ? {} : { visibility: 'hidden' }}>
-            <DevicesList devices={filteredDevices} />
+            <DeviceList devices={filteredDevices} />
           </Paper>
         </div>
         {desktop && (