diff --git a/smart-hut/src/components/AutomationModal.js b/smart-hut/src/components/AutomationModal.js deleted file mode 100644 index 5f8fbd5..0000000 --- a/smart-hut/src/components/AutomationModal.js +++ /dev/null @@ -1,189 +0,0 @@ -import React, { Component } from "react"; -import { connect } from "react-redux"; -import { RemoteService } from "../remote"; -import { appActions } from "../storeActions"; - -class AutomationModal extends Component { - constructor(props) { - super(props); - this.state = this.initialState; - this.setInitialState(); - - this.addAutomationModal = this.addAutomationModal.bind(this); - this.modifyAutomationModal = this.modifyAutomationModal.bind(this); - this.deleteAutomation = this.deleteAutomation.bind(this); - } - - get initialState() { - return { - //INITIAL STATE HERE - }; - } - - setInitialState() { - this.setState(this.initialState); - } - - get type() { - return !this.props.id ? "new" : "modify"; - } - - addAutomationModal = (e) => { - /*let data = { - // DATA HERE - };*/ - // TODO CALL TO REMOTE SERVER TO ADD SCENE - /*this.props - .saveRoom(data, null) - .then(() => { - this.setInitialState(); - this.closeModal(); - }) - .catch((err) => console.error("error in creating room", err));*/ - }; - - modifyAutomationModal = (e) => { - /* let data = { - // DATA HERE - };*/ - // TODO CALL TO REMOTE SERVER TO MODIFY SCENE - /*this.props - .saveRoom(data, this.props.id) - .then(() => { - this.setInitialState(); - this.closeModal(); - }) - .catch((err) => console.error("error in updating room", err));*/ - }; - - deleteAutomation = (e) => { - // TODO CALL TO REMOTE SERVER TO DELETE SCENE - /* - this.props - .deleteRoom(this.props.id) - .then(() => this.closeModal()) - .catch((err) => console.error("error in deleting room", err));*/ - }; - - changeSomething = (event) => { - let nam = event.target.name; - let val = event.target.value; - this.setState({ [nam]: val }); - }; - - closeModal = (e) => { - this.setState({ openModal: false }); - }; - - openModal = (e) => { - this.setState({ openModal: true }); - }; - - render() { - return ( -
- {/* - {!this.props.nicolaStop ? ( -
- - {this.type === "new" ? ( - - ) : ( - - )} - - - {this.type === "new" ? ( - - ) : ( - - )} - -
- ) : null} - - -
- {this.type === "new" ? "Add new automation" : "Modify automation"} -
- - { - //TODO FORM TO ADD OR MODIFY SCENE - } - - {this.type === "modify" ? ( - - ) : null} - - - - - - -
*/} -
- ); - } -} - -const setActiveAutomation = (activeAutomation) => { - return (dispatch) => - dispatch(appActions.setActiveAutomation(activeAutomation)); -}; - -const mapStateToProps = (state, ownProps) => ({ - automations: ownProps.id ? state.automations[ownProps.id] : null, -}); -const AutomationModalContainer = connect( - mapStateToProps, - { ...RemoteService, setActiveAutomation }, - null, - { forwardRef: true } -)(AutomationModal); -export default AutomationModalContainer; diff --git a/smart-hut/src/components/RoomModal.js b/smart-hut/src/components/RoomModal.js index eabdb89..2054b8a 100644 --- a/smart-hut/src/components/RoomModal.js +++ b/smart-hut/src/components/RoomModal.js @@ -21,7 +21,6 @@ class RoomModal extends Component { constructor(props) { super(props); this.state = this.initialState; - this.setInitialState(); this.fileInputRef = React.createRef(); diff --git a/smart-hut/src/components/dashboard/HostsPanel.js b/smart-hut/src/components/dashboard/HostsPanel.js index 538cb89..a9199c8 100644 --- a/smart-hut/src/components/dashboard/HostsPanel.js +++ b/smart-hut/src/components/dashboard/HostsPanel.js @@ -7,13 +7,19 @@ import Device from "../../components/dashboard/devices/Device"; class HostsPanel extends Component { constructor(props) { super(props); - if (this.props.activeHost !== -1) { + } + + componentDidUpdate(oldProps) { + if ( + oldProps.activeHost !== this.props.activeHost && + this.props.activeHost !== -1 + ) { this.props.fetchDevices(null, this.props.activeHost).catch(console.error); } } render() { - console.log(this.props); + console.log(this.props.hostDevices); return ( {this.props.isActiveDefaultHost && ( @@ -42,7 +48,8 @@ class HostsPanel extends Component { const mapStateToProps = (state, _) => ({ isActiveDefaultHost: state.active.activeHost === -1, activeHost: state.active.activeHost, - hostDeviceIds: Object.keys(state.hostDevices[state.activeHost] || {}), + hostDevices: state.hostDevices, + hostDeviceIds: Object.keys(state.hostDevices[state.active.activeHost] || {}), }); const HostsPanelContainer = connect(mapStateToProps, RemoteService)(HostsPanel); export default HostsPanelContainer; diff --git a/smart-hut/src/components/dashboard/devices/Curtain.js b/smart-hut/src/components/dashboard/devices/Curtain.js index d475455..e055b34 100644 --- a/smart-hut/src/components/dashboard/devices/Curtain.js +++ b/smart-hut/src/components/dashboard/devices/Curtain.js @@ -2,6 +2,7 @@ import React, { Component } from "react"; import "./Curtains.css"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; +import mapStateToProps from "../../../deviceProps"; class Curtain extends Component { constructor(props) { @@ -112,15 +113,5 @@ class Curtain extends Component { } } -const mapStateToProps = (state, ownProps) => ({ - 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; diff --git a/smart-hut/src/components/dashboard/devices/Device.js b/smart-hut/src/components/dashboard/devices/Device.js index 61ee18b..d153cdf 100644 --- a/smart-hut/src/components/dashboard/devices/Device.js +++ b/smart-hut/src/components/dashboard/devices/Device.js @@ -11,6 +11,7 @@ import { Header, Button, Icon, Card } from "semantic-ui-react"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; import DeviceSettingsModal from "./DeviceSettingsModal"; +import mapStateToProps from "../../../deviceProps"; const centerComponent = { marginLeft: "50%", @@ -45,66 +46,33 @@ class Device extends React.Component { } renderDeviceComponent() { - switch (this.props.type) { - case "curtains": - return ( - - ); - case "thermostat": - return ( - - ); - case "regularLight": - return ( - - ); - case "sensor": - return ( - - ); - case "motionSensor": - return ; - case "buttonDimmer": - return ( - - ); - case "knobDimmer": - return ( - - ); - case "smartPlug": - return ( - - ); - case "switch": - return ( - - ); - case "dimmableLight": - return ; - case "securityCamera": - return ( - - ); - default: - throw new Error("Device type unknown"); + const mapKindToComponent = { + curtains: Curtains, + thermostat: Thermostat, + regularLight: Light, + sensor: Sensor, + motionSensor: Sensor, + buttonDimmer: ButtonDimmer, + knobDimmer: KnobDimmer, + smartPlug: SmartPlug, + switch: Switcher, + dimmableLight: Light, + securityCamera: Videocam, + }; + + if (!(this.props.type in mapKindToComponent)) { + throw new Error(`device kind ${this.props.type} not known`); } + + return React.createElement( + mapKindToComponent[this.props.type], + { + tab: this.props.tab, + id: this.props.id, + hostId: this.props.hostId, + }, + "" + ); } deviceDescription() { @@ -165,7 +133,7 @@ class Device extends React.Component { {this.props.tab === "Devices" ? this.deviceDescription() - : this.stateDescription()} + : this.props.tab === "Scenes" && this.stateDescription()} {this.props.tab === "Devices" ? ( ({ - get stateOrDevice() { - return getStateOrDevice(state, ownProps); - }, - get device() { - return getDevice(state, ownProps); - }, - get roomName() { - return (state.rooms[getDevice(state, ownProps).roomId] || {}).name; - }, - get type() { - return getDevice(state, ownProps).kind; - }, -}); const DeviceContainer = connect(mapStateToProps, RemoteService)(Device); export default DeviceContainer; diff --git a/smart-hut/src/components/dashboard/devices/Dimmer.js b/smart-hut/src/components/dashboard/devices/Dimmer.js index d4762fd..ccec658 100644 --- a/smart-hut/src/components/dashboard/devices/Dimmer.js +++ b/smart-hut/src/components/dashboard/devices/Dimmer.js @@ -29,6 +29,7 @@ import { } from "./DimmerStyle"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; +import mapStateToProps from "../../../deviceProps"; export class ButtonDimmerComponent extends Component { increaseIntensity = () => { @@ -128,15 +129,6 @@ export class KnobDimmerComponent extends Component { } } -const mapStateToProps = (state, ownProps) => ({ - get stateOrDevice() { - if (state.active.activeTab === "Devices") { - return state.devices[ownProps.id]; - } else { - return state.sceneStates[ownProps.id]; - } - }, -}); const conn = connect(mapStateToProps, RemoteService); export const KnobDimmer = conn(KnobDimmerComponent); diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index ebf0565..def795e 100644 --- a/smart-hut/src/components/dashboard/devices/Light.js +++ b/smart-hut/src/components/dashboard/devices/Light.js @@ -31,6 +31,7 @@ import { } from "./LightStyle"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; +import mapStateToProps from "../../../deviceProps"; class Light extends Component { constructor(props) { @@ -62,7 +63,7 @@ class Light extends Component { } get intensity() { - return this.props.stateOrDevice.intensity || 0; + return this.state.intensity || 0; } onClickDevice = () => { @@ -119,7 +120,6 @@ class Light extends Component { .saveDevice({ ...this.props.stateOrDevice, intensity }) .catch((err) => console.error("regular light update error", err)); } else { - console.log("CIAOOOOOOOOO", this.props.stateOrDevice); this.props .updateState( { id: this.props.stateOrDevice.id, intensity: intensity }, @@ -153,7 +153,7 @@ class Light extends Component { @@ -184,22 +184,5 @@ class Light extends Component { } } -const mapStateToProps = (state, ownProps) => ({ - get stateOrDevice() { - if (state.active.activeTab === "Devices") { - return state.devices[ownProps.id]; - } else { - return state.sceneStates[ownProps.id]; - } - }, - get device() { - if (state.active.activeTab === "Devices") { - return state.devices[ownProps.id]; - } else { - return state.devices[state.sceneStates[ownProps.id].deviceId]; - } - }, -}); - const LightContainer = connect(mapStateToProps, RemoteService)(Light); export default LightContainer; diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js index ad80a4c..f171b6a 100644 --- a/smart-hut/src/components/dashboard/devices/Sensor.js +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -38,6 +38,7 @@ import { import { Image } from "semantic-ui-react"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; +import mapStateToProps from "../../../deviceProps"; class Sensor extends Component { constructor(props) { @@ -194,14 +195,5 @@ class Sensor extends Component { } } -const mapStateToProps = (state, ownProps) => ({ - 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; diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js index 5074429..3e93749 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlug.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js @@ -15,6 +15,7 @@ import { } from "./SmartPlugStyle"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; +import mapStateToProps from "../../../deviceProps"; class SmartPlug extends Component { constructor(props) { @@ -70,21 +71,5 @@ class SmartPlug extends Component { } } -const mapStateToProps = (state, ownProps) => ({ - get stateOrDevice() { - if (state.active.activeTab === "Devices") { - return state.devices[ownProps.id]; - } else { - return state.sceneStates[ownProps.id]; - } - }, - get device() { - if (state.active.activeTab === "Devices") { - return state.devices[ownProps.id]; - } else { - return state.devices[state.sceneStates[ownProps.id].deviceId]; - } - }, -}); const SmartPlugContainer = connect(mapStateToProps, RemoteService)(SmartPlug); export default SmartPlugContainer; diff --git a/smart-hut/src/components/dashboard/devices/Switch.js b/smart-hut/src/components/dashboard/devices/Switch.js index 113c1f1..62e9c84 100644 --- a/smart-hut/src/components/dashboard/devices/Switch.js +++ b/smart-hut/src/components/dashboard/devices/Switch.js @@ -11,6 +11,7 @@ import { Image } from "semantic-ui-react"; import { imageStyle, nameStyle, turnedOnStyle } from "./SwitchStyle"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; +import mapStateToProps from "../../../deviceProps"; class Switch extends Component { constructor(props) { @@ -55,8 +56,5 @@ class Switch extends Component { } } -const mapStateToProps = (state, ownProps) => ({ - device: state.devices[ownProps.id], -}); const SwitchContainer = connect(mapStateToProps, RemoteService)(Switch); export default SwitchContainer; diff --git a/smart-hut/src/components/dashboard/devices/Thermostats.js b/smart-hut/src/components/dashboard/devices/Thermostats.js index c2012bd..17f33f2 100644 --- a/smart-hut/src/components/dashboard/devices/Thermostats.js +++ b/smart-hut/src/components/dashboard/devices/Thermostats.js @@ -5,6 +5,7 @@ import { connect } from "react-redux"; import "./Thermostat.css"; import Slider from "react-rangeslider"; import "react-rangeslider/lib/index.css"; +import mapStateToProps from "../../../deviceProps"; import { stateTag, @@ -144,24 +145,6 @@ class Thermostats extends Component { } } -const mapStateToProps = (state, ownProps) => ({ - get stateOrDevice() { - if (state.active.activeTab === "Devices") { - return state.devices[ownProps.id]; - } else { - return state.sceneStates[ownProps.id]; - } - }, - get device() { - if (state.active.activeTab === "Devices") { - return state.devices[ownProps.id]; - } else { - return state.devices[state.sceneStates[ownProps.id].deviceId]; - } - }, - activeTab: state.activeTab, -}); - const ThermostatContainer = connect( mapStateToProps, RemoteService diff --git a/smart-hut/src/components/dashboard/devices/Videocam.js b/smart-hut/src/components/dashboard/devices/Videocam.js index c434be0..ee52409 100644 --- a/smart-hut/src/components/dashboard/devices/Videocam.js +++ b/smart-hut/src/components/dashboard/devices/Videocam.js @@ -7,6 +7,7 @@ import { RemoteService } from "../../../remote"; import { endpointURL } from "../../../endpoint"; import { connect } from "react-redux"; import VideocamModal from "./VideocamModal"; +import mapStateToProps from "../../../deviceProps"; class Videocam extends Component { constructor(props) { @@ -58,12 +59,5 @@ class Videocam extends Component { } } -const mapStateToProps = (state, ownProps) => ({ - device: - ownProps.tab === "Devices" - ? state.devices[ownProps.id] - : state.devices[state.sceneStates[ownProps.id].deviceId], - state: state.sceneStates[ownProps.id], -}); const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam); export default VideocamContainer; diff --git a/smart-hut/src/deviceProps.js b/smart-hut/src/deviceProps.js new file mode 100644 index 0000000..9f5f4ae --- /dev/null +++ b/smart-hut/src/deviceProps.js @@ -0,0 +1,51 @@ +function getStateOrDevice(state, ownProps) { + switch (state.active.activeTab) { + case "Devices": + return state.devices[ownProps.id]; + case "Scenes": + return state.sceneStates[ownProps.id]; + case "Hosts": + return state.hostDevices[ownProps.hostId][ownProps.id]; + default: + throw new Error( + `stateOrDevice has no value in tab "${state.active.activeTab}"` + ); + } +} + +function getDevice(state, ownProps) { + switch (state.active.activeTab) { + case "Scenes": + return state.devices[getStateOrDevice(state, ownProps).deviceId]; + case "Devices": + case "Hosts": + return getStateOrDevice(state, ownProps); + default: + throw new Error(`device has no value in tab "${state.active.activeTab}"`); + } +} + +function getRoomName(state, ownProps) { + switch (state.active.activeTab) { + case "Scenes": + case "Devices": + return (state.rooms[getDevice(state, ownProps).roomId] || {}).name; + case "Hosts": + return "Room Name not implemented yet"; + } +} + +export default function mapStateToProps(state, ownProps) { + return { + get stateOrDevice() { + return getStateOrDevice(state, ownProps); + }, + get device() { + return getDevice(state, ownProps); + }, + get roomName() {}, + get type() { + return getDevice(state, ownProps).kind; + }, + }; +} diff --git a/smart-hut/src/store.js b/smart-hut/src/store.js index 33b0bef..6d1ae28 100644 --- a/smart-hut/src/store.js +++ b/smart-hut/src/store.js @@ -3,7 +3,6 @@ import thunk from "redux-thunk"; import update from "immutability-helper"; import reduxWebSocket, { connect } from "@giantmachines/redux-websocket"; import { socketURL } from "./endpoint"; -import actions from "./storeActions"; function reducer(previousState, action) { let newState, change; diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js index e8c58c3..ab2c952 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -21,7 +21,6 @@ class Dashboard extends Component { constructor(props) { super(props); this.state = this.initialState; - this.setInitialState(); this.activeTab = "Devices"; this.selectTab = this.selectTab.bind(this); }