Fixed bugs on previous refactors

smart-hut/src/components/dashboard/DevicePanel.js

@@ -25,7 +25,7 @@ class DevicePanel extends Component {
   render() {
     return (
       <div style={panelStyle}>
-        <Grid doubling columns={4} divided="vertically">
+        <Grid doubling columns={2} divided="vertically">
           {this.props.devices.map((e, i) => {
             return (
               <Grid.Column key={i}>

smart-hut/src/components/dashboard/devices/Device.js

@@ -4,7 +4,7 @@ import SmartPlug from "./SmartPlug";
 import Sensor from "./Sensor";
 import { ButtonDimmer, KnobDimmer } from "./Dimmer";
 import Switcher from "./Switch";
-import { Segment } from "semantic-ui-react";
+import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 import DeviceSettingsModal from "./DeviceSettingsModal";
@@ -25,7 +25,7 @@ class Device extends React.Component {
 
   resetSmartPlug() {
     this.props
-      .resetSmartPlug(this.props.id)
+      .smartPlugReset(this.props.id)
       .catch((err) => console.error(`Smart plug reset error`, err));
   }
 
@@ -55,14 +55,26 @@ class Device extends React.Component {
   render() {
     return (
       <Segment>
-        {this.renderDeviceComponent()}
-        <h3>{this.props.device.name}</h3>
-        <button onClick={this.edit}>Edit</button>
-        {this.props.device.type === "smartPlug" ? (
-          <button onClick={this.resetSmartPlug}></button>
-        ) : null}
-
-        <DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
+        <Grid columns={2}>
+          <Grid.Column>
+            {this.renderDeviceComponent()}
+          </Grid.Column>
+          <Grid.Column textAlign='center'>
+            <Header as='h3'>{this.props.device.name}</Header>
+            <Button color='blue' icon onClick={this.edit} labelPosition='left'>
+              <Icon name='pencil' />
+              Edit
+            </Button>
+            {this.props.device.kind === "smartPlug" ? (
+              <Button color='orange' icon onClick={this.resetSmartPlug}
+                      labelPosition='left'>
+                <Icon name='undo' />
+                Reset
+              </Button>
+            ) : null}
+          </Grid.Column>
+          <DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
+        </Grid>
       </Segment>
     );
   }

smart-hut/src/components/dashboard/devices/NewDevice.js

@@ -9,6 +9,8 @@ import {
   Input,
   Modal,
 } from "semantic-ui-react";
+import { RemoteService } from "../../../remote";
+import { connect } from "react-redux";
 
 const StyledDiv = styled.div`
   background-color: #505bda;
@@ -29,7 +31,7 @@ const StyledDiv = styled.div`
   }
 `;
 
-export default class NewDevice extends Component {
+class NewDevice extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -376,3 +378,12 @@ export default class NewDevice extends Component {
     );
   }
 }
+
+const mapStateToProps = (state, _) => ({
+  devices: Object.values(state.devices)
+});
+const NewDeviceContainer = connect(
+  mapStateToProps,
+  RemoteService
+)(NewDevice);
+export default NewDeviceContainer;

smart-hut/src/store.js

@@ -106,6 +106,8 @@ function reducer(previousState, action) {
         change.devices[device.id] = { $set: device };
 
         if (device.roomId in newState.rooms) {
+          change.rooms[device.roomId] = {};
+          change.rooms[device.roomId].devices = {};
           const devices = change.rooms[device.roomId].devices;
           devices.$add = devices.$add || [];
           devices.$add.push(device.id);

smart-hut/src/storeActions.js

@@ -27,6 +27,11 @@ const actions = {
     devices,
     partial,
   }),
+  deviceOperationUpdate: (devices) => ({
+    type: "DEVICES_UPDATE",
+    devices,
+    partial: true,
+  }),
   roomsUpdate: (rooms) => ({
     type: "ROOMS_UPDATE",
     rooms,