Fixed updates from @christiancp

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

@@ -26,7 +26,7 @@ class DevicePanel extends Component {
     return (
       <Grid
         doubling
-        columns={2}
+        columns={3}
         divided="vertically"
         style={{ paddingTop: "3rem" }}
       >

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

@@ -7,11 +7,18 @@ import Switcher from "./Switch";
 import Videocam from "./Videocam";
 import Curtains from "./Curtain";
 import Thermostat from "./Thermostats";
-import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
+import { Segment, Grid, Header, Button, Icon, Card } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 import DeviceSettingsModal from "./DeviceSettingsModal";
 
+const centerComponent = {
+  marginLeft: "50%",
+  transform: "translateX(-50%)",
+  marginTop: "10%",
+  marginBottom: "10%",
+};
+
 class Device extends React.Component {
   constructor(props) {
     super(props);
@@ -101,75 +108,83 @@ class Device extends React.Component {
           <Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} />
         );
       default:
-        //throw new Error("Device type unknown");
-        return undefined;
+        throw new Error("Device type unknown");
     }
   }
 
+  deviceDescription() {
+    return (
+      <div className="ui two buttons">
+        <Button color="blue" icon onClick={this.edit} labelPosition="left">
+          <Icon name="pencil" />
+          Edit
+        </Button>
+        {this.props.stateOrDevice.kind === "smartPlug" ? (
+          <Button
+            color="orange"
+            icon
+            onClick={this.resetSmartPlug}
+            labelPosition="left"
+          >
+            <Icon name="undo" />
+            Reset
+          </Button>
+        ) : null}
+      </div>
+    );
+  }
+
+  stateDescription() {
+    return (
+      <div class="ui one button">
+        <Button
+          color="red"
+          icon
+          onClick={this.deleteState}
+          labelPosition="left"
+        >
+          <Icon name="undo" />
+          Delete
+        </Button>
+      </div>
+    );
+  }
+
+  get deviceName() {
+    return this.props.tab === "Devices"
+      ? this.props.stateOrDevice.name
+      : this.props.device.name;
+  }
+
   render() {
     {
-      if (this.props.type !== "") {
-        return (
-          <Segment>
-            <Grid columns={2}>
-              <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
-              {this.props.tab === "Devices" ? (
-                <Grid.Column textAlign="center">
-                  <Header as="h3">{this.props.stateOrDevice.name}</Header>
-                  <Button
-                    color="blue"
-                    icon
-                    onClick={this.edit}
-                    labelPosition="left"
-                  >
-                    <Icon name="pencil" />
-                    Edit
-                  </Button>
-                  {this.props.stateOrDevice.kind === "smartPlug" ? (
-                    <Button
-                      color="orange"
-                      icon
-                      onClick={this.resetSmartPlug}
-                      labelPosition="left"
-                    >
-                      <Icon name="undo" />
-                      Reset
-                    </Button>
-                  ) : null}
-                </Grid.Column>
+      return (
+        <Card>
+          <Card.Content>
+            <Card.Header textAlign="center">
+              <Header as="h3">{this.deviceName}</Header>
+              {this.props.tab === "Scenes" ? (
+                <Header as="h4">{this.props.roomName}</Header>
               ) : (
-                <Grid.Column textAlign="center">
-                  <Header as="h3">{this.props.device.name}</Header>
-                  {this.props.tab === "Scenes" ? (
-                    <Header as="h4">{this.props.roomName}</Header>
-                  ) : (
-                    ""
-                  )}
-                  <Button
-                    color="red"
-                    icon
-                    onClick={this.deleteState}
-                    labelPosition="left"
-                  >
-                    <Icon name="undo" />
-                    Delete
-                  </Button>
-                </Grid.Column>
+                ""
               )}
-            </Grid>
-            {this.props.stateOrDevice && this.props.tab === "Devices" ? (
-              <DeviceSettingsModal
-                ref={this.modalRef}
-                id={this.props.stateOrDevice.id}
-              />
-            ) : (
-              ""
-            )}
-          </Segment>
-        );
-      } else {
-        return null;
-      }
+            </Card.Header>
+
+            <Card.Description style={centerComponent}>
+              {this.renderDeviceComponent()}
+            </Card.Description>
+          </Card.Content>
+          <Card.Content extra>
+            {this.props.tab === "Devices"
+              ? this.deviceDescription()
+              : this.stateDescription()}
+          </Card.Content>
+          <DeviceSettingsModal
+            ref={this.modalRef}
+            id={this.props.stateOrDevice.id}
+          />
+        </Card>
+      );
     }
   }
 }
@@ -198,7 +213,6 @@ const mapStateToProps = (state, ownProps) => ({
     }
   },
   get type() {
-    console.log("ALPACA", state, ownProps);
     if (state.active.activeTab === "Scenes") {
       if (state.sceneStates[ownProps.id]) {
         //console.log(state.sceneStates[ownProps.id], ownProps.id);

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

@@ -26,26 +26,24 @@ const DeleteModal = (props) => (
 );
 
 const SettingsForm = (props) => {
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setValues({ ...values, [name]: value });
+  };
+
   const [values, setValues] = useState({ name: "" });
 
-  const handleInputChange = (e) => {
-    const { name, value } = e.target.value;
-    setValues({ ...values, [name]: value });
-    console.log("EDDDDITING!!", e.target.value);
-    console.log(props);
-  };
+  console.log(props);
 
   return (
     <Form>
       <Form.Field>
-        <label>Edit Name:</label>
-        <input
+        <label>Edit Name: </label>
+        <Input
           autoComplete="off"
           name="name"
           onChange={handleInputChange}
-          value={props.name}
-          autoFocus="on"
-          placeholder="Device name"
+          placeholder={props.name}
         />
       </Form.Field>
 
@@ -109,20 +107,25 @@ class DeviceSettingsModal extends Component {
       );
   }
 
+  _editForm = null;
+  get editForm() {
+    this._editForm = this._editForm || (
+      <SettingsForm
+        name={this.state.name}
+        removeDevice={this.deleteDevice}
+        saveFunction={this.updateDevice}
+      />
+    );
+    return this._editForm;
+  }
+
   render() {
-    const SettingsModal = () => (
+    return (
       <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
         <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
-        <Modal.Content>
-          <SettingsForm
-            name={this.state.name}
-            removeDevice={this.deleteDevice}
-            saveFunction={this.updateDevice}
-          />
-        </Modal.Content>
+        <Modal.Content>{this.editForm}</Modal.Content>
       </Modal>
     );
-    return <SettingsModal />;
   }
 }
 

smart-hut/src/store.js

@@ -499,7 +499,6 @@ function reducer(previousState, action) {
       console.warn(`Action type ${action.type} unknown`, action);
       return previousState;
   }
-  console.log("THETRUEALPACA", newState, action.type, action);
   return newState;
 }