From ed68bebe8e0d74aa5dd8a3d343913cb2633b2cc5 Mon Sep 17 00:00:00 2001 From: "Claudio Maggioni (maggicl)" Date: Sat, 11 Apr 2020 13:57:03 +0200 Subject: [PATCH] WIP on final conversion to redux --- .../components/{modalform.js => RoomModal.js} | 113 ++++++++++++------ .../src/components/dashboard/DevicePanel.js | 4 +- .../components/dashboard/devices/SmartPlug.js | 4 +- smart-hut/src/remote.js | 2 +- smart-hut/src/store.js | 9 +- smart-hut/src/views/Navbar.js | 11 +- smart-hut/src/views/Signup.js | 4 +- 7 files changed, 95 insertions(+), 52 deletions(-) rename smart-hut/src/components/{modalform.js => RoomModal.js} (66%) diff --git a/smart-hut/src/components/modalform.js b/smart-hut/src/components/RoomModal.js similarity index 66% rename from smart-hut/src/components/modalform.js rename to smart-hut/src/components/RoomModal.js index 87835a3..350edb1 100644 --- a/smart-hut/src/components/modalform.js +++ b/smart-hut/src/components/RoomModal.js @@ -10,31 +10,48 @@ import { Image, } from "semantic-ui-react"; import SelectIcons from "./SelectIcons"; +import { connect } from "react-redux"; +import { RemoteService } from "../remote"; +import { appActions } from "../storeActions"; +import { update } from "immutability-helper"; const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png"; -export default class ModalWindow extends Component { +class RoomModal extends Component { constructor(props) { super(props); - - if (typeof this.props.idRoom === "function") { - this.idRoom = this.props.idRoom(); - } else { - this.idRoom = this.props.idRoom; - } - - this.state = { - id: "", - selectedIcon: "", - name: this.props.type === "new" ? "New Room" : this.idRoom.name, - img: this.props.type === "new" ? null : this.idRoom.image, - openModal: false, - }; + this.state = this.initialState; + this.setInitialState(); this.fileInputRef = React.createRef(); this.addRoomModal = this.addRoomModal.bind(this); this.updateIcon = this.updateIcon.bind(this); + this.removeImage = this.removeImage.bind(this); + } + + get initialState() { + return { + selectedIcon: "home", + name: this.type === "new" ? "New Room" : this.props.room.name, + img: this.type === "new" ? null : this.props.room.image, + openModal: false, + }; + } + + removeImage(e) { + e.preventDefault(); + this.setState(update(this.state, { + image: {$set: NO_IMAGE} + })); + } + + setInitialState() { + this.setState(this.initialState); + } + + get type() { + return !this.props.id ? "new" : "modify"; } addRoomModal = (e) => { @@ -43,29 +60,37 @@ export default class ModalWindow extends Component { name: this.state.name, image: this.state.img, }; - this.props.addRoom(data); - this.setState({ - name: "Device", - }); - this.closeModal(); + + this.props.saveRoom(data, null) + .then(() => { + this.setInitialState(); + this.closeModal(); + }) + .catch((err) => console.error('error in creating room', err)); }; modifyRoomModal = (e) => { let data = { icon: this.state.selectedIcon === "" - ? this.idRoom.icon + ? this.props.room.icon : this.state.selectedIcon, - name: this.state.name === "" ? this.idRoom.name : this.state.name, + name: this.state.name === "" ? this.props.room.name : this.state.name, image: this.state.img, }; - this.props.updateRoom(data); - this.closeModal(); + + this.props.saveRoom(data, this.props.id) + .then(() => { + this.setInitialState(); + this.closeModal(); + }) + .catch((err) => console.error('error in updating room', err)); }; deleteRoom = (e) => { - this.props.deleteRoom(); - this.closeModal(); + // no need to close modal since this room modal instance will be deleted + this.props.deleteRoom(this.props.id) + .catch((err) => console.error('error in deleting room', err)); }; changeSomething = (event) => { @@ -107,7 +132,7 @@ export default class ModalWindow extends Component { {!this.props.nicolaStop ? (
- {this.props.type === "new" ? ( + {this.type === "new" ? ( + : null }
@@ -189,12 +217,12 @@ export default class ModalWindow extends Component {
- {this.props.type === "modify" ? ( + {this.type === "modify" ? ( @@ -230,3 +258,18 @@ export default class ModalWindow extends Component { ); } } + +const setActiveRoom = (activeRoom) => { + return (dispatch) => dispatch(appActions.setActiveRoom(activeRoom)); +}; + +const mapStateToProps = (state, ownProps) => ({ + room: ownProps.id ? state.rooms[ownProps.id] : null +}); +const RoomModalContainer = connect( + mapStateToProps, + { ...RemoteService, setActiveRoom }, + null, + { forwardRef: true } +)(RoomModal); +export default RoomModalContainer; diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js index bfed5a9..7537b1b 100644 --- a/smart-hut/src/components/dashboard/DevicePanel.js +++ b/smart-hut/src/components/dashboard/DevicePanel.js @@ -2,8 +2,7 @@ import React, { Component } from "react"; import { Grid } from "semantic-ui-react"; -import { editButtonStyle, panelStyle } from "./devices/styleComponents"; -import { checkMaxLength, DEVICE_NAME_MAX_LENGTH } from "./devices/constants"; +import { panelStyle } from "./devices/styleComponents"; import Device from "./devices/Device"; import NewDevice from "./devices/NewDevice"; import { connect } from "react-redux"; @@ -49,6 +48,7 @@ const mapStateToProps = (state, _) => ({ if (state.active.activeRoom === -1) { return Object.values(state.devices); } else { + console.log(state.active.activeRoom); const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort(); console.log(deviceArray); return deviceArray.map((id) => state.devices[id]); diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js index 606c33a..f736d91 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlug.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js @@ -7,9 +7,7 @@ import React, { Component } from "react"; import { BottomPanel, - StyledDiv, - editModeIconStyle, - editModeStyleLeft, + StyledDiv } from "./styleComponents"; import { Image } from "semantic-ui-react"; import { diff --git a/smart-hut/src/remote.js b/smart-hut/src/remote.js index 9eb459e..20ada12 100644 --- a/smart-hut/src/remote.js +++ b/smart-hut/src/remote.js @@ -60,7 +60,7 @@ const Endpoint = { Authorization: `Bearer ${Endpoint.token}`, }, }).then((res) => { - if (!res.data && method != "delete") { + if (!res.data && method !== "delete") { console.error("Response body is empty"); return null; } else { diff --git a/smart-hut/src/store.js b/smart-hut/src/store.js index 24750d7..692cc7b 100644 --- a/smart-hut/src/store.js +++ b/smart-hut/src/store.js @@ -1,6 +1,5 @@ import { createStore, applyMiddleware } from "redux"; import thunk from "redux-thunk"; -import action from "./storeActions"; import update from "immutability-helper"; function reducer(previousState, action) { @@ -97,7 +96,6 @@ function reducer(previousState, action) { } } } - console.log(change, action.devices); newState = update(previousState, change); @@ -130,10 +128,10 @@ function reducer(previousState, action) { } } - console.log(change); newState = update(newState, change); break; case "ROOM_SAVE": + newState = previousState; createOrUpdateRoom(action.room); break; case "DEVICE_SAVE": @@ -157,6 +155,11 @@ function reducer(previousState, action) { } change.rooms = { $unset: [action.roomId] }; + + if (previousState.active.activeRoom === action.roomId) { + change.active = { activeRoom: {$set: -1}}; + } + newState = update(previousState, change); break; case "DEVICE_DELETE": diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js index 1b4f9ca..3a0eeea 100644 --- a/smart-hut/src/views/Navbar.js +++ b/smart-hut/src/views/Navbar.js @@ -8,7 +8,7 @@ import { Dropdown, } from "semantic-ui-react"; import { editButtonStyle } from "../components/dashboard/devices/styleComponents"; -import ModalWindow from "../components/modalform"; +import RoomModal from "../components/RoomModal"; import { RemoteService } from "../remote"; import { connect } from "react-redux"; import { appActions } from "../storeActions"; @@ -39,7 +39,6 @@ class Navbar extends Component { } get activeItemName() { - console.log(this.constructor); if (this.props.activeRoom === -1) return "Home"; return this.props.rooms[this.props.activeRoom]; } @@ -98,7 +97,7 @@ class Navbar extends Component { {e.name} {this.state.editMode ? ( - + ) : null} @@ -110,7 +109,7 @@ class Navbar extends Component { - + @@ -157,7 +156,7 @@ class Navbar extends Component { {e.name} - + ); })} @@ -167,7 +166,7 @@ class Navbar extends Component { - + {this.activeRoom !== -1 ? ( diff --git a/smart-hut/src/views/Signup.js b/smart-hut/src/views/Signup.js index 7c68074..924bd77 100644 --- a/smart-hut/src/views/Signup.js +++ b/smart-hut/src/views/Signup.js @@ -34,8 +34,8 @@ export default class Signup extends Component { username: this.state.username, }; - Forms. - submitRegistration(params) + Forms + .submitRegistration(params) .then(() => this.setState({ success: true })) .catch((err) => this.setState({ error: { state: true, message: err.messages }})); };