1 files changed, 60 insertions, 77 deletions
diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
index a97e4fe..64f95a2 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DeviceList.js
@@ -1,96 +1,79 @@
-import t from './common/localization'
-import React, { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
+import React, { Fragment, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import Avatar from '@material-ui/core/Avatar';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
-import Avatar from '@material-ui/core/Avatar';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import Divider from '@material-ui/core/Divider';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import RemoveDialog from './RemoveDialog'
-import { devicesActions } from './store';
 
-const mapStateToProps = state => ({
-  devices: Object.values(state.devices.items)
-});
-
-class DeviceList extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      menuAnchorEl: null,
-      removeDialogOpen: false
-    };
-  }
+import { devicesActions } from './store';
+import t from './common/localization';
+import RemoveDialog from './RemoveDialog';
 
-  handleItemClick(device) {
-    this.props.dispatch(devicesActions.select(device));
-  }
+const DeviceList = () => {
+  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+  const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
+  const devices = useSelector(state => Object.values(state.devices.items));
+  const dispatch = useDispatch();
+  const history = useHistory();
 
-  handleMenuClick(event) {
-    this.setState({ menuAnchorEl: event.currentTarget });
+  const handleMenuClick = (event) => {
+    setMenuAnchorEl(event.currentTarget);
   }
 
-  handleMenuClose() {
-    this.setState({ menuAnchorEl: null });
+  const handleMenuClose = () => {
+    setMenuAnchorEl(null);
   }
 
-  handleMenuEdit() {
-    this.props.history.push('/device');
-    this.handleMenuClose();
+  const handleMenuEdit = () => {
+    history.push('/device');
+    handleMenuClose();
   }
 
-  handleMenuRemove() {
-    this.setState({ removeDialogOpen: true });
-    this.handleMenuClose();
+  const handleMenuRemove = () => {
+    setRemoveDialogOpen(true);
+    handleMenuClose();
   }
 
-  render() {
-    const devices = this.props.devices.map((device, index, list) =>
-      <Fragment key={device.id.toString()}>
-        <ListItem button onClick={() => this.handleItemClick(device)}>
-          <ListItemAvatar>
-            <Avatar>
-              <LocationOnIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={device.name} secondary={device.uniqueId} />
-          <ListItemSecondaryAction>
-            <IconButton onClick={(event) => this.handleMenuClick(event)}>
-              <MoreVertIcon />
-            </IconButton>
-          </ListItemSecondaryAction>
-        </ListItem>
-        {index < list.length - 1 ? <Divider /> : null}
-      </Fragment>
-    );
-
-    return (
-      <Fragment>
-        <List>
-          {devices}
-        </List>
-        <Menu
-          id="device-menu"
-          anchorEl={this.state.menuAnchorEl}
-          keepMounted
-          open={Boolean(this.state.menuAnchorEl)}
-          onClose={() => this.handleMenuClose()}>
-          <MenuItem onClick={() => this.handleMenuEdit()}>{t('sharedEdit')}</MenuItem>
-          <MenuItem onClick={() => this.handleMenuRemove()}>{t('sharedRemove')}</MenuItem>
-        </Menu>
-        <RemoveDialog
-          open={this.state.removeDialogOpen}
-          onClose={() => { this.setState({ removeDialogOpen: false }) }} />
-      </Fragment>
-    );
-  }
+  return (
+    <>
+      <List>
+        {devices.map((device, index, list) => (
+          <Fragment key={device.id}>
+            <ListItem button key={device.id} onClick={() => dispatch(devicesActions.select(device))}>
+              <ListItemAvatar>
+                <Avatar>
+                  <LocationOnIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={device.name} secondary={device.uniqueId} />
+              <ListItemSecondaryAction>
+                <IconButton onClick={handleMenuClick}>
+                  <MoreVertIcon />
+                </IconButton>
+              </ListItemSecondaryAction>
+            </ListItem>
+            {index < list.length - 1 ? <Divider /> : null}
+          </Fragment>
+        ))
+        }
+      </List>
+      <Menu id="device-menu" anchorEl={menuAnchorEl} keepMounted open={Boolean(menuAnchorEl)} onClose={handleMenuClose}>
+        <MenuItem onClick={handleMenuEdit}>{t('sharedEdit')}</MenuItem>
+        <MenuItem onClick={handleMenuRemove}>{t('sharedRemove')}</MenuItem>
+      </Menu>
+      <RemoveDialog open={removeDialogOpen} onClose={() => { setRemoveDialogOpen(false) }} />
+    </>
+  );
 }
 
-export default connect(mapStateToProps)(DeviceList);
+export default DeviceList;
+