Implement device list

5 files changed, 70 insertions, 2 deletions

diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
new file mode 100644
index 00000000..602a6d9d
--- /dev/null
+++ b/modern/src/DeviceList.js
@@ -0,0 +1,57 @@
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { updateDevices } from './actions';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+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';
+
+const mapStateToProps = state => ({
+  devices: state.devices
+});
+
+class DeviceList extends Component {
+  componentDidMount() {
+    fetch('/api/devices').then(response => {
+      if (response.ok) {
+        response.json().then(devices => {
+          this.props.dispatch(updateDevices(devices));
+        });
+      }
+    });
+  }
+
+  render() {
+    const devices = this.props.devices.map(device =>
+      <Fragment key={device.id.toString()}>
+        <ListItem button>
+          <Avatar>
+            <LocationOnIcon />
+          </Avatar>
+          <ListItemText primary={device.name} secondary={device.uniqueId} />
+          <ListItemSecondaryAction>
+            <IconButton>
+              <MoreVertIcon />
+            </IconButton>
+          </ListItemSecondaryAction>
+        </ListItem>
+        <li>
+          <Divider inset />
+        </li>
+      </Fragment>
+    );
+
+    return (
+      <List>
+        {devices}
+      </List>
+    );
+  }
+}
+
+export default connect(mapStateToProps)(DeviceList);
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 0e93ddba..7655aee8 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -16,7 +16,7 @@ class MainMap extends Component {
   render() {
     const position = [this.state.lat, this.state.lng]
 
-    const markers = this.props.positions.map((position) =>
+    const markers = this.props.positions.map(position =>
       <Marker key={position.id.toString()} position={{ lat: position.latitude, lng: position.longitude }}>
         <Popup>
           A pretty CSS3 popup. <br /> Easily customizable.
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index ce4c5771..c64665b5 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -6,6 +6,7 @@ import Drawer from '@material-ui/core/Drawer';
 import withStyles from '@material-ui/core/styles/withStyles';
 import SocketController from './SocketContoller';
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
+import DeviceList from './DeviceList';
 
 const styles = theme => ({
   root: {
@@ -73,6 +74,7 @@ class MainPage extends Component {
               anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"}
               variant="permanent"
               classes={{ paper: classes.drawerPaper }}>
+              <DeviceList />
             </Drawer>
             <div className={classes.mapContainer}>
               <ContainerDimensions>
diff --git a/modern/src/SocketContoller.js b/modern/src/SocketContoller.js
index 3cf7feb7..f65fc6c1 100644
--- a/modern/src/SocketContoller.js
+++ b/modern/src/SocketContoller.js
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { connect } from 'react-redux';
-import { updatePositions } from './actions';
+import { updateDevices, updatePositions } from './actions';
 
 const displayNotifications = events => {
   if ("Notification" in window) {
@@ -30,6 +30,9 @@ class SocketController extends Component {
 
     socket.onmessage = (event) => {
       const data = JSON.parse(event.data);
+      if (data.devices) {
+        this.props.dispatch(updateDevices(data.devices));
+      }
       if (data.positions) {
         this.props.dispatch(updatePositions(data.positions));
       }
diff --git a/modern/src/reducers/index.js b/modern/src/reducers/index.js
index b9c94771..962d83c2 100644
--- a/modern/src/reducers/index.js
+++ b/modern/src/reducers/index.js
@@ -6,8 +6,14 @@ const initialState = {
 
 function rootReducer(state = initialState, action) {
   switch (action.type) {
+    case 'UPDATE_DEVICES':
+      return Object.assign({}, {
+        ...state,
+        devices: [...state.devices, ...action.devices]
+      });
     case 'UPDATE_POSITIONS':
       return Object.assign({}, {
+        ...state,
         positions: [...state.positions, ...action.positions]
       });
     default: