stateOrDevice() added in various places

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

@@ -2,30 +2,29 @@ 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);
@@ -55,7 +54,7 @@ class Curtain extends Component {
         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("curtain update error", err));
         }else{
             this.props.updateState({ id: this.props.sceneState.id, intensity: intensity },this.props.sceneState.kind);
@@ -67,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();
         }
     };
@@ -86,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"
@@ -107,7 +106,15 @@ 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{
+            const sceneState = state.sceneStates[ownProps.id];
+            return state.devices[sceneState];
+        }
+    },
+    //device: state.devices[ownProps.id],
 });
 const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
 export default CurtainContainer;

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,14 @@ 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{
+      const sceneState = state.sceneStates[ownProps.id];
+      return state.devices[sceneState];
+    }
+  },
 });
 const conn = connect(mapStateToProps, RemoteService);
 

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

@@ -35,7 +35,7 @@ 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 +44,24 @@ class Light extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (this.props.device.intensity !== prevProps.device.intensity) {
+    if (this.props.stateOrDevice.intensity !== prevProps.stateOrDevice.intensity) {
-      this.setState({ intensity: this.props.device.intensity, timeout: null });
+      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);
@@ -95,7 +95,7 @@ class Light extends Component {
     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("regular light update error", err));
     }else{
       this.props.updateState({ id: this.props.sceneState.id, intensity: intensity }, this.props.sceneState.kind);
@@ -147,7 +147,7 @@ class Light extends Component {
 
     return (
       <div>
-        {this.props.device.kind === "dimmableLight"
+        {this.props.stateOrDevice.kind === "dimmableLight"
           ? intensityLightView
           : normalLightView}
       </div>
@@ -156,7 +156,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{
+      const sceneState = state.sceneStates[ownProps.id];
+      return state.devices[sceneState];
+    }
+  },
+  //device: state.devices[ownProps.id],
 });
 
 const LightContainer = connect(mapStateToProps, RemoteService)(Light);

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,14 @@ 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{
+      const sceneState = state.sceneStates[ownProps.id];
+      return state.devices[sceneState];
+    }
+  },
 });
 const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor);
 export default SensorContainer;

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

@@ -24,18 +24,18 @@ 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);
@@ -68,7 +68,14 @@ 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{
+      const sceneState = state.sceneStates[ownProps.id];
+      return state.devices[sceneState];
+    }
+  },
 });
 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) {
@@ -65,7 +65,7 @@ class Thermostats extends Component {
     const turnOn = mode;
     if(this.props.tab==="Devices"){
       this.props
-          .saveDevice({ ...this.props.device, turnOn })
+          .saveDevice({ ...this.props.stateOrDevice, turnOn })
           .catch((err) => console.error("thermostat update error", err));
     }else{
       this.props.updateState({ id: this.props.sceneState.id, turnOn: turnOn },this.props.sceneState.kind);
@@ -76,7 +76,7 @@ class Thermostats extends Component {
     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("thermostat update error", err));
     }else{
       this.props.updateState({ id: this.props.sceneState.id, on: on },this.props.sceneState.kind);
@@ -87,7 +87,7 @@ class Thermostats extends Component {
   saveTargetTemperature(targetTemperature) {
     if(this.props.tab==="Devices"){
       this.props
-          .saveDevice({ ...this.props.device, targetTemperature })
+          .saveDevice({ ...this.props.stateOrDevice, targetTemperature })
           .catch((err) => console.error("thermostat update error", err));
     }else{
       this.props.updateState({id: this.props.sceneState.id, targetTemperature: targetTemperature},this.props.sceneState.kind);
@@ -153,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
@@ -163,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>
     );
@@ -183,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(