Merge branch '82-scene-states-update' into 'dev'

Resolve "scene-states-update"

Closes #82

See merge request sa4-2020/the-sanmarinoes/frontend!94

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

@@ -15,9 +15,10 @@ class ScenesPanel extends Component {
       <Grid doubling columns={2} divided="vertically">
         {!this.props.isActiveDefaultScene
           ? this.props.sceneStates.map((e, i) => {
+              console.log(this.props.sceneStates);
               return (
                 <Grid.Column key={i}>
-                  <Device tab={this.props.tab} id={e} />
+                  <Device tab={this.props.tab} id={e.id} />
                 </Grid.Column>
               );
             })
@@ -40,7 +41,8 @@ const mapStateToProps = (state, _) => ({
       const stateArray = [
         ...state.scenes[state.active.activeScene].sceneStates,
       ].sort();
-      return stateArray.map((id) => state.sceneStates[id]);
+      console.log(stateArray);
+      return stateArray;
     } else {
       return [];
     }

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

@@ -2,30 +2,33 @@ import React, { Component } from "react";
 import "./Curtains.css";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
-import { Slider } from "@material-ui/core";
 
 class Curtain extends Component {
     constructor(props) {
         super(props);
-        this.state = { intensity: this.props.device.intensity, timeout: null };
+        this.state = { intensity: this.props.stateOrDevice.intensity, timeout: null };
 
         this.setIntensity = this.setIntensity.bind(this);
     }
 
     //getters
     get turnedOn() {
-        return this.props.device.on;
+        return this.props.stateOrDevice.on;
     }
 
     get intensity() {
-        return this.props.device.intensity || 0;
+        return this.props.stateOrDevice.intensity || 0;
     }
 
     onClickDevice = () => {
         const on = !this.turnedOn;
+        if(this.props.tab==="Devices"){
             this.props
-            .saveDevice({ ...this.props.device, on })
+                .saveDevice({ ...this.props.stateOrDevice, on })
                 .catch((err) => console.error("curtains update error", err));
+        }else{
+            this.props.updateState({ id: this.props.sceneState.id, on: on },this.props.sceneState.kind);
+        }
     };
 
     setIntensity(intensity) {
@@ -49,9 +52,13 @@ class Curtain extends Component {
 
     saveIntensity = () => {
         const intensity = Math.round(this.state.intensity);
+        if(this.props.tab==="Devices"){
             this.props
-            .saveDevice({ ...this.props.device, intensity })
+                .saveDevice({ ...this.props.stateOrDevice, intensity })
-            .catch((err) => console.error("curtains update error", err));
+                .catch((err) => console.error("curtain update error", err));
+        }else{
+            this.props.updateState({ id: this.props.sceneState.id, intensity: intensity },this.props.sceneState.kind);
+        }
     };
 
     helper = () => {
@@ -59,7 +66,7 @@ class Curtain extends Component {
             this.setIntensity(1);
             this.saveIntensity();
         } else {
-            this.setIntensity(this.props.device.intensity / 100 + 0.1);
+            this.setIntensity(this.props.stateOrDevice.intensity / 100 + 0.1);
             this.saveIntensity();
         }
     };
@@ -78,15 +85,15 @@ class Curtain extends Component {
                 <div
                     className="open-container"
                     style={{
-                        height: (9 * this.props.device.intensity) / 100 + "rem",
+                        height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
                     }}
                 ></div>{" "}
                 <span className="span-open">
-                    {Math.round(this.props.device.intensity)}%
+                    {Math.round(this.props.stateOrDevice.intensity)}%
                 </span>
                 <input
                     onChange={this.handleChange}
-                    value={this.props.device.intensity}
+                    value={this.props.stateOrDevice.intensity}
                     className="slider"
                     type="range"
                     min="0"
@@ -99,7 +106,14 @@ class Curtain extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-    device: state.devices[ownProps.id],
+    get stateOrDevice(){
+        if(state.active.activeTab==="Devices"){
+            return state.devices[ownProps.id];
+        }else{
+            return state.sceneStates[ownProps.id];
+        }
+    },
+    //device: state.devices[ownProps.id],
 });
 const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
 export default CurtainContainer;

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

@@ -19,6 +19,7 @@ class Device extends React.Component {
     this.modalRef = React.createRef();
     this.edit = this.edit.bind(this);
     this.resetSmartPlug = this.resetSmartPlug.bind(this);
+    this.deleteState=this.deleteState.bind(this);
   }
 
   edit() {
@@ -32,47 +33,121 @@ class Device extends React.Component {
       .catch((err) => console.error(`Smart plug reset error`, err));
   }
 
+  deleteState() {
+    //console.log("alpaca "+this.props);
+    this.props.deleteState(this.props.id, this.props.type);
+  }
+
   renderDeviceComponent() {
-        console.log("check here")
+    switch (
-        console.log(this.props.stateOrDevice.kind)
+      this.props.tab === "Devices"
-        switch (this.props.stateOrDevice.kind) {
+        ? this.props.stateOrDevice.kind
+        : this.props.type
+    ) {
       case "curtains":
-                return <Curtains tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Curtains
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.id}
+          />
+        );
       case "thermostat":
-                return <Thermostat tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Thermostat
+            tab={this.props.tab}
+            sceneState={this.props.sceneStat}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "regularLight":
-                return <Light tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Light
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "sensor":
-                return <Sensor tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Sensor
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "motionSensor":
-                return <Sensor tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Sensor
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "buttonDimmer":
-                return <ButtonDimmer tab={this.props.tab} id={this.props.id} />;
+        return (
+          <ButtonDimmer
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "knobDimmer":
-                return <KnobDimmer tab={this.props.tab} id={this.props.id} />;
+        return (
+          <KnobDimmer
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "smartPlug":
-                return <SmartPlug tab={this.props.tab} id={this.props.id} />;
+        return (
+          <SmartPlug
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "switch":
-                return <Switcher tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Switcher
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "dimmableLight":
-                return <Light id={this.props.id} />;
+        return (
+          <Light
+            id={this.props.stateOrDevice.id}
+            sceneState={this.props.sceneState}
+            tab={this.props.tab}
+          />
+        );
       case "securityCamera":
-                return <Videocam id={this.props.id} />;
+        return (
+          <Videocam
+            id={this.props.stateOrDevice.id}
+            sceneState={this.props.sceneState}
+            tab={this.props.tab}
+          />
+        );
       default:
-                throw new Error("Device type unknown");
+        //throw new Error("Device type unknown");
+        return undefined;
     }
   }
 
   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">
+                  <Header as="h3">{this.props.stateOrDevice.name}</Header>
-                                {this.props.stateOrDevice.name}
-                            </Header>
                   <Button
                     color="blue"
                     icon
@@ -97,28 +172,76 @@ class Device extends React.Component {
               ) : (
                 <Grid.Column textAlign="center">
                   <Header as="h3">
-                                {this.props.stateOrDevice.name}
+                    {this.props.stateOrDevice
+                      ? this.props.stateOrDevice.name
+                      : ""}
                   </Header>
+                  <Button
+                    color="red"
+                    icon
+                    onClick={this.deleteState}
+                    labelPosition="left"
+                  >
+                    <Icon name="undo" />
+                    Delete
+                  </Button>
                 </Grid.Column>
               )}
-
-                    <DeviceSettingsModal
-                        ref={this.modalRef}
-                        id={this.props.id}
-                    />
             </Grid>
           </Segment>
         );
+      } else {
+        return null;
+      }
+    }
   }
 }
+/*
 
+{this.props.stateOrDevice ? 
+                        <DeviceSettingsModal
+                        ref={this.modalRef}
+                        id={this.props.stateOrDevice.id}
+                        /> :
+                        ""
+                    }
+*/
 const mapStateToProps = (state, ownProps) => ({
   get stateOrDevice() {
     if (state.active.activeTab === "Devices") {
       return state.devices[ownProps.id];
     } else {
-            const sceneState = state.sceneStates[ownProps.id];
+      console.log(
-            return state.devices[sceneState];
+        state.sceneStates,
+        ownProps.id,
+        state.sceneStates[ownProps.id]
+      );
+      return state.sceneStates[ownProps.id];
+    }
+  },
+  get sceneState() {
+    if (state.active.activeTab === "Scenes") {
+      const array = [
+        ...state.scenes[state.active.activeScene].sceneStates,
+      ].sort();
+      const deviceState = array.filter((e) => e.id === ownProps.id)[0];
+      return deviceState;
+    } else {
+      return null;
+    }
+  },
+  get type() {
+    if (state.active.activeTab === "Scenes") {
+      if (state.sceneStates[ownProps.id]) {
+        console.log(state.sceneStates[ownProps.id], ownProps.id);
+        const id = state.sceneStates[ownProps.id].deviceId;
+        console.log(id, state.devices[id].kind);
+        return state.devices[id].kind;
+      } else {
+        return "";
+      }
+    } else {
+      return null;
     }
   },
 });

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

@@ -64,7 +64,7 @@ export class KnobDimmerComponent extends Component {
     super(props);
 
     this.state = {
-      intensity: this.props.device.intensity || 0,
+      intensity: this.props.stateOrDevice.intensity || 0,
       timeout: null,
     };
 
@@ -129,7 +129,13 @@ export class KnobDimmerComponent extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  device: state.devices[ownProps.id],
+  get stateOrDevice(){
+    if(state.active.activeTab==="Devices"){
+      return state.devices[ownProps.id];
+    }else{
+      return state.sceneStates[ownProps.id];
+    }
+  },
 });
 const conn = connect(mapStateToProps, RemoteService);
 

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

@@ -35,7 +35,10 @@ import { connect } from "react-redux";
 class Light extends Component {
   constructor(props) {
     super(props);
-    this.state = { intensity: this.props.device.intensity, timeout: null };
+    this.state = {
+      intensity: this.props.stateOrDevice.intensity,
+      timeout: null,
+    };
 
     this.iconOn = "/img/lightOn.svg";
     this.iconOff = "/img/lightOff.svg";
@@ -44,24 +47,36 @@ class Light extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (this.props.device.intensity !== prevProps.device.intensity) {
+    if (
-      this.setState({ intensity: this.props.device.intensity, timeout: null });
+      this.props.stateOrDevice.intensity !== prevProps.stateOrDevice.intensity
+    ) {
+      this.setState({
+        intensity: this.props.stateOrDevice.intensity,
+        timeout: null,
+      });
     }
   }
 
   get turnedOn() {
-    return this.props.device.on;
+    return this.props.stateOrDevice.on;
   }
 
   get intensity() {
-    return this.props.device.intensity || 0;
+    return this.props.stateOrDevice.intensity || 0;
   }
 
   onClickDevice = () => {
     const on = !this.turnedOn;
+    if (this.props.tab === "Devices") {
       this.props
-      .saveDevice({ ...this.props.device, on })
+        .saveDevice({ ...this.props.stateOrDevice, on })
         .catch((err) => console.error("regular light update error", err));
+    } else {
+      this.props.updateState(
+        { id: this.props.sceneState.id, on: on },
+        this.props.sceneState.kind
+      );
+    }
   };
 
   getIcon = () => {
@@ -89,9 +104,16 @@ class Light extends Component {
 
   saveIntensity = () => {
     const intensity = Math.round(this.state.intensity);
+    if (this.props.tab === "Devices") {
       this.props
-      .saveDevice({ ...this.props.device, intensity })
+        .saveDevice({ ...this.props.stateOrDevice, intensity })
-      .catch((err) => console.error("intensity light update error", err));
+        .catch((err) => console.error("regular light update error", err));
+    } else {
+      this.props.updateState(
+        { id: this.props.sceneState.id, intensity: intensity },
+        this.props.sceneState.kind
+      );
+    }
   };
 
   render() {
@@ -139,7 +161,7 @@ class Light extends Component {
 
     return (
       <div>
-        {this.props.device.kind === "dimmableLight"
+        {this.props.stateOrDevice.kind === "dimmableLight"
           ? intensityLightView
           : normalLightView}
       </div>
@@ -148,7 +170,15 @@ class Light extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  device: state.devices[ownProps.id],
+  get stateOrDevice() {
+    if (state.active.activeTab === "Devices") {
+      return state.devices[ownProps.id];
+    } else {
+      return state.sceneStates[ownProps.id];
+    }
+  },
+  //device: state.devices[ownProps.id],
 });
+
 const LightContainer = connect(mapStateToProps, RemoteService)(Light);
 export default LightContainer;

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

@@ -65,20 +65,20 @@ class Sensor extends Component {
 
   componentDidUpdate(prevProps) {
     if (
-      this.props.device.kind === "sensor" &&
+      this.props.stateOrDevice.kind === "sensor" &&
-      this.props.device.value !== prevProps.device.value
+      this.props.stateOrDevice.value !== prevProps.stateOrDevice.value
     ) {
-      this.setState({ value: this.props.device.value });
+      this.setState({ value: this.props.stateOrDevice.value });
     } else if (
-      this.props.device.kind === "motionSensor" &&
+      this.props.stateOrDevice.kind === "motionSensor" &&
-      this.props.device.detected !== prevProps.device.detected
+      this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
     ) {
-      this.setState({ motion: true, detected: this.props.device.detected });
+      this.setState({ motion: true, detected: this.props.stateOrDevice.detected });
     }
   }
 
   componentDidMount() {
-    if (this.props.device.kind === "sensor") {
+    if (this.props.stateOrDevice.kind === "sensor") {
       switch (this.props.device.sensor) {
         case "TEMPERATURE":
           this.units = "ºC";
@@ -102,11 +102,11 @@ class Sensor extends Component {
           this.units = "";
       }
       this.setState({
-        value: this.props.device.value,
+        value: this.props.stateOrDevice.value,
       });
     } else {
       this.setState({
-        detected: this.props.device.detected,
+        detected: this.props.stateOrDevice.detected,
         motion: true,
       });
     }
@@ -149,7 +149,7 @@ class Sensor extends Component {
           <React.Fragment>
             <CircularInput
               value={
-                this.props.device.sensor === "LIGHT"
+                this.props.stateOrDevice.sensor === "LIGHT"
                   ? this.state.value / 2000
                   : this.state.value / 100
               }
@@ -192,7 +192,13 @@ class Sensor extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  device: state.devices[ownProps.id],
+  get stateOrDevice(){
+    if(state.active.activeTab==="Devices"){
+      return state.devices[ownProps.id];
+    }else{
+      return state.sceneStates[ownProps.id];
+    }
+  },
 });
 const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor);
 export default SensorContainer;

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

@@ -24,18 +24,22 @@ class SmartPlug extends Component {
   }
 
   get turnedOn() {
-    return this.props.device.on;
+    return this.props.stateOrDevice.on;
   }
 
   get energyConsumed() {
-    return (this.props.device.totalConsumption / 1000).toFixed(3);
+    return (this.props.stateOrDevice.totalConsumption / 1000).toFixed(3);
   }
 
   onClickDevice = () => {
     const on = !this.turnedOn;
+    if(this.props.tab==="Devices"){
       this.props
-      .saveDevice({ ...this.props.device, on })
+          .saveDevice({ ...this.props.stateOrDevice, on })
           .catch((err) => console.error("smart plug update error", err));
+    }else{
+      this.props.updateState({ id: this.props.sceneState.id, on: on},this.props.sceneState.kind);
+    }
   };
 
   getIcon = () => {
@@ -64,7 +68,13 @@ class SmartPlug extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  device: state.devices[ownProps.id],
+  get stateOrDevice(){
+    if(state.active.activeTab==="Devices"){
+      return state.devices[ownProps.id];
+    }else{
+      return state.sceneStates[ownProps.id];
+    }
+  },
 });
 const SmartPlugContainer = connect(mapStateToProps, RemoteService)(SmartPlug);
 export default SmartPlugContainer;

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

@@ -19,11 +19,11 @@ class Thermostats extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      targetTemperature: this.props.device.targetTemperature,
+      targetTemperature: this.props.stateOrDevice.targetTemperature,
-      internalSensorTemperature: this.props.device.internalSensorTemperature,
+      internalSensorTemperature: this.props.stateOrDevice.internalSensorTemperature,
-      mode: this.props.device.mode,
+      mode: this.props.stateOrDevice.mode,
-      measuredTemperature: this.props.device.measuredTemperature,
+      measuredTemperature: this.props.stateOrDevice.measuredTemperature,
-      useExternalSensors: this.props.device.useExternalSensors,
+      useExternalSensors: this.props.stateOrDevice.useExternalSensors,
       timeout: null,
     };
     this.setMode = this.setMode.bind(this);
@@ -35,23 +35,23 @@ class Thermostats extends Component {
 
   //getters
   get getMode() {
-    return this.props.device.mode;
+    return this.props.stateOrDevice.mode;
   }
 
   get getTargetTemperature() {
-    return this.props.device.targetTemperature;
+    return this.props.stateOrDevice.targetTemperature;
   }
 
   get getInternalSensorTemperature() {
-    return this.props.device.internalSensorTemperature;
+    return this.props.stateOrDevice.internalSensorTemperature;
   }
 
   get getMeasuredTemperature() {
-    return this.props.device.measuredTemperature;
+    return this.props.stateOrDevice.measuredTemperature;
   }
 
   get getUseExternalSensors() {
-    return this.props.device.useExternalSensors;
+    return this.props.stateOrDevice.useExternalSensors;
   }
 
   setMode(mode) {
@@ -63,23 +63,35 @@ class Thermostats extends Component {
     //i came to the conclusion that is not possible to set mode.
     //this.mode = "HEATING";
     const turnOn = mode;
+    if(this.props.tab==="Devices"){
       this.props
-      .saveDevice({ ...this.props.device, turnOn })
+          .saveDevice({ ...this.props.stateOrDevice, turnOn })
-      .catch((err) => console.error("regular light update error", err));
+          .catch((err) => console.error("thermostat update error", err));
+    }else{
+      this.props.updateState({ id: this.props.sceneState.id, turnOn: turnOn },this.props.sceneState.kind);
+    }
   }
 
   onClickDevice = () => {
     const on = !this.turnedOn;
+    if(this.props.tab==="Devices"){
       this.props
-      .saveDevice({ ...this.props.device, on })
+          .saveDevice({ ...this.props.stateOrDevice, on })
-      .catch((err) => console.error("regular light update error", err));
+          .catch((err) => console.error("thermostat update error", err));
+    }else{
+      this.props.updateState({ id: this.props.sceneState.id, on: on },this.props.sceneState.kind);
+    }
   };
 
   //It seems to work
   saveTargetTemperature(targetTemperature) {
+    if(this.props.tab==="Devices"){
       this.props
-      .saveDevice({ ...this.props.device, targetTemperature })
+          .saveDevice({ ...this.props.stateOrDevice, targetTemperature })
-      .catch((err) => console.error(" update error", err));
+          .catch((err) => console.error("thermostat update error", err));
+    }else{
+      this.props.updateState({id: this.props.sceneState.id, targetTemperature: targetTemperature},this.props.sceneState.kind);
+    }
   }
 
   setTargetTemperature(newTemp) {
@@ -101,9 +113,13 @@ class Thermostats extends Component {
 
   //I have no idea why it doesn't want to update the temperature
   saveInternalSensorTemperature(internalSensorTemperature) {
+    if(this.props.tab==="Devices"){
       this.props
           .saveDevice({ ...this.props.device, internalSensorTemperature })
-      .catch((err) => console.error(" update error", err));
+          .catch((err) => console.error("thermostat update error", err));
+    }else{
+      this.props.updateState({ id: this.props.sceneState.id, internalSensorTemperature:internalSensorTemperature },this.props.sceneState.kind);
+    }
   }
 
   setInternalSensorTemperature(newTemp) {
@@ -137,7 +153,7 @@ class Thermostats extends Component {
     return (
 
       <div style={container}>
-        <h3 style={deviceName}>{this.props.device.name}</h3>
+        <h3 style={deviceName}>{this.props.stateOrDevice.name}</h3>
         <div style={line}></div>
         <Checkbox
           slider
@@ -147,19 +163,19 @@ class Thermostats extends Component {
         />
 
         <span style={targetTemperature}>
-          {this.props.device.targetTemperature}ºC
+          {this.props.stateOrDevice.targetTemperature}ºC
         </span>
         <input
           type="range"
           min="0"
           max="40"
           className="slider-css"
-          value={this.props.device.targetTemperature}
+          value={this.props.stateOrDevice.targetTemperature}
           onChange={(event) => this.handleChange(event.target.value)}
           id="targetTemperature"
         />
         <div style={stateTagContainer}>
-          <span style={stateTag}>{this.props.device.mode}</span>
+          <span style={stateTag}>{this.props.stateOrDevice.mode}</span>
         </div>
       </div>
     );
@@ -167,7 +183,14 @@ class Thermostats extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  device: state.devices[ownProps.id],
+  get stateOrDevice(){
+    if(state.active.activeTab==="Devices"){
+      return state.devices[ownProps.id];
+    }else{
+      const sceneState = state.sceneStates[ownProps.id];
+      return state.devices[sceneState];
+    }
+  },
 });
 
 const ThermostatContainer = connect(

smart-hut/src/remote.js

@@ -374,6 +374,45 @@ export const RemoteService = {
     };
   },
 
+  //
+  updateState: (data, type) => {
+    return (dispatch) => {
+      let url;
+      if (type === "dimmableState") {
+        url = "/dimmableState";
+      } else {
+        url = "/switchableState";
+      }
+
+      return Endpoint.put(url, {}, data)
+        .then((res) => {
+          dispatch(actions.stateSave(res.data));
+          return res.data;
+        })
+        .catch((err) => {
+          console.warn("Update device: ", data, "error: ", err);
+          throw new RemoteError(["Network error"]);
+        });
+    };
+  },
+
+  deleteState: (id, type)=>{
+    return (dispatch)=>{
+      let url;
+      if (type === "dimmableState") {
+        url = "/dimmableState";
+      } else {
+        url = "/switchableState";
+      }
+      return Endpoint.delete(url+`/${id}`)
+          .then((_) => dispatch(actions.stateDelete(id)))
+          .catch((err) => {
+            console.warn("state delete error", err);
+            throw new RemoteError(["Network error"]);
+          });
+    };
+  },
+
   /**
    * Creates/Updates a device with the given data. If
    * data.id is truthy, then a update call is performed,

smart-hut/src/store.js

@@ -80,8 +80,10 @@ function reducer(previousState, action) {
   };
 
   const updateSceneStateProps = (state) => {
-    change.sceneStates[state.deviceId] = {};
+    change.sceneStates[state.id] = {};
-    change.sceneStates[state.deviceId] = { $set: state.deviceId };
+    for (const key in state) {
+      change.sceneStates[state.id][key] = { $set: state[key] };
+    }
   };
 
   switch (action.type) {
@@ -104,6 +106,7 @@ function reducer(previousState, action) {
       }
       break;
     case "STATE_UPDATE":
+      //console.log(action.sceneStates);
       newState = previousState;
       change = null;
 
@@ -129,9 +132,9 @@ function reducer(previousState, action) {
       };
 
       for (const sceneState of action.sceneStates) {
-        if (!newState.sceneStates[sceneState.deviceId]) {
+        if (!newState.sceneStates[sceneState.id]) {
-          change.sceneStates[sceneState.deviceId] = {
+          change.sceneStates[sceneState.id] = {
-            $set: sceneState.deviceId,
+            $set: sceneState,
           };
         } else {
           updateSceneStateProps(sceneState);
@@ -144,19 +147,17 @@ function reducer(previousState, action) {
             change.scenes[sceneState.sceneId].sceneStates || {};
           const sceneStates = change.scenes[sceneState.sceneId].sceneStates;
           sceneStates.$add = sceneStates.$add || [];
-          sceneStates.$add.push(sceneState.deviceId);
+          sceneStates.$add.push(sceneState);
         } else {
           // room does not exist yet, so add to the list of pending
           // joins
 
           if (!change.pendingJoins.scenes[sceneState.sceneId]) {
             change.pendingJoins.scenes[sceneState.sceneId] = {
-              $set: new Set([sceneState.deviceId]),
+              $set: new Set([sceneState]),
             };
           } else {
-            change.pendingJoins.scenes[sceneState.sceneId].$set.add(
+            change.pendingJoins.scenes[sceneState.sceneId].$set.add(sceneState);
-              sceneState.deviceId
-            );
           }
         }
       }
@@ -295,7 +296,7 @@ function reducer(previousState, action) {
         change.scenes = {
           [action.sceneState.sceneId]: {
             sceneStates: {
-              $add: [action.sceneState.id],
+              $add: [action.sceneState],
             },
           },
         };
@@ -303,7 +304,7 @@ function reducer(previousState, action) {
         change.pendingJoins = {
           scenes: {
             [action.sceneState.sceneId]: {
-              $add: [action.sceneState.id],
+              $add: [action.sceneState],
             },
           },
         };
@@ -355,6 +356,26 @@ function reducer(previousState, action) {
         change.active = { activeScene: { $set: -1 } };
       }
 
+      newState = update(previousState, change);
+      break;
+    case "STATE_DELETE":
+      if (!(action.stateId in previousState.sceneStates)) {
+        console.warn(`State to delete ${action.stateId} does not exist`);
+        break;
+      }
+
+      change = {
+        sceneStates: { $unset: [action.stateId] },
+      };
+
+      if (previousState.scenes[previousState.sceneStates[action.stateId].sceneId]) {
+        change.scenes = {
+          [previousState.sceneStates[action.stateId].sceneId]: {
+            sceneStates: { $remove: [action.stateId] },
+          },
+        };
+      }
+
       newState = update(previousState, change);
       break;
     case "DEVICE_DELETE":

smart-hut/src/storeActions.js

@@ -40,6 +40,10 @@ const actions = {
     devices,
     partial,
   }),
+  stateDelete: (stateId)=>({
+    type: "STATE_DELETE",
+    stateId,
+  }),
   deviceOperationUpdate: (devices) => ({
     type: "DEVICES_UPDATE",
     devices,