From 8bef4f04c2b0b203450fe5753b6109a0b0d04e82 Mon Sep 17 00:00:00 2001
From: ditoaugusta <dt_ap@ymail.com>
Date: Fri, 27 Mar 2020 17:39:49 +0700
Subject: exp: hooks (1)

---
 modern/src/DeviceList.js | 46 +++++++++++++++++++---------------------------
 1 file changed, 19 insertions(+), 27 deletions(-)

(limited to 'modern/src/DeviceList.js')

diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
index 235ba229..8d855a76 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DeviceList.js
@@ -1,30 +1,26 @@
-import React, { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
+import React, { Fragment } from 'react';
+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 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 { devicesActions } from './store';
 
-const mapStateToProps = state => ({
-  devices: Object.values(state.devices.items)
-});
+import { useDispatch, useSelector } from 'react-redux';
+import { devicesActions } from './store';
 
-class DeviceList extends Component {
-  handleClick(device) {
-    this.props.dispatch(devicesActions.select(device));
-  }
+const DeviceList = () => {
+  const devices = useSelector(state => Object.values(state.devices.items));
+  const dispatch = useDispatch();
 
-  render() {
-    const devices = this.props.devices.map((device, index, list) =>
-      <Fragment key={device.id.toString()}>
-        <ListItem button onClick={(e) => this.handleClick(device)}>
+  return (<List>
+    {devices.map((device, index, list) => (
+      <Fragment key={device.id}>
+        <ListItem button key={device.id} onClick={() => dispatch(devicesActions.select(device))}>
           <ListItemAvatar>
             <Avatar>
               <LocationOnIcon />
@@ -39,14 +35,10 @@ class DeviceList extends Component {
         </ListItem>
         {index < list.length - 1 ? <Divider /> : null}
       </Fragment>
-    );
-
-    return (
-      <List>
-        {devices}
-      </List>
-    );
-  }
+    ))
+    }
+  </List>);
 }
 
-export default connect(mapStateToProps)(DeviceList);
+export default DeviceList;
+
-- 
cgit v1.2.3