1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import React, { useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import makeStyles from '@mui/styles/makeStyles';
import { VariableSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
import { devicesActions } from '../store';
import { useEffectAsync } from '../reactHelper';
import DeviceRow from './DeviceRow';
import { useAttributePreference } from '../common/util/preferences';
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());
const positionItems = useAttributePreference('positionItems', 'speed,address,totalDistance,course');
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());
}
}, []);
// RATIONALE: calculate row height to fit position attributes
const getItemSize = (index) => {
const item = devices[index];
return 72 + (item.positionId && (positionItems.split(',').length * 20) || 0);
};
return (
<AutoSizer className={classes.list}>
{({ height, width }) => (
<VariableSizeList
width={width}
height={height}
itemCount={devices.length}
itemData={devices}
itemSize={getItemSize}
overscanCount={10}
innerRef={listInnerEl}
>
{DeviceRow}
</VariableSizeList>
)}
</AutoSizer>
);
};
export default DeviceList;
|
