WIP on final conversion to redux

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);
-
+    this.state = this.initialState;
-    if (typeof this.props.idRoom === "function") {
+    this.setInitialState();
-      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.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({
+    this.props.saveRoom(data, null)
-      name: "Device",
+      .then(() => {
-    });
+        this.setInitialState();
-    this.closeModal();
+        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();
+    // no need to close modal since this room modal instance will be deleted
-    this.closeModal();
+    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 ? (
           <div>
             <Responsive minWidth={768}>
-              {this.props.type === "new" ? (
+              {this.type === "new" ? (
                 <Button
                   icon
                   labelPosition="left"
@@ -122,7 +147,7 @@ export default class ModalWindow extends Component {
               )}
             </Responsive>
             <Responsive maxWidth={768}>
-              {this.props.type === "new" ? (
+              {this.type === "new" ? (
                 <Button
                   icon
                   fluid
@@ -149,7 +174,7 @@ export default class ModalWindow extends Component {
 
         <Modal onClose={this.closeModal} open={this.state.openModal}>
           <Header>
-            {this.props.type === "new" ? "Add new room" : "Modify room"}
+            {this.type === "new" ? "Add new room" : "Modify room"}
           </Header>
           <Modal.Content>
             <Form>
@@ -167,7 +192,7 @@ export default class ModalWindow extends Component {
               <p>Insert an image of the room:</p>
               <Form.Field>
                 <Image
-                  src={this.state.img == null ? NO_IMAGE : this.state.img}
+                  src={this.state.img === null ? NO_IMAGE : this.state.img}
                   size="small"
                   onClick={() => this.fileInputRef.current.click()}
                 />
@@ -182,6 +207,9 @@ export default class ModalWindow extends Component {
                   onChange={this.getBase64.bind(this)}
                 />
               </Form.Field>
+              {this.state.img ?
+                <Button onClick={this.unsetImage}>Remove image</Button>
+                : null }
             </Form>
 
             <div style={spaceDiv}>
@@ -189,12 +217,12 @@ export default class ModalWindow extends Component {
               <SelectIcons
                 updateIcon={this.updateIcon}
                 currentIcon={
-                  this.props.type === "new" ? "home" : this.idRoom.icon
+                  this.type === "new" ? "home" : this.props.room.icon
                 }
               />
             </div>
 
-            {this.props.type === "modify" ? (
+            {this.type === "modify" ? (
               <Button
                 icon
                 labelPosition="left"
@@ -210,19 +238,19 @@ export default class ModalWindow extends Component {
           <Modal.Actions>
             <Button color="red" onClick={this.closeModal}>
               <Icon name="remove" />{" "}
-              {this.props.type === "new" ? "Cancel" : "Discard changes"}
+              {this.type === "new" ? "Cancel" : "Discard changes"}
             </Button>
 
             <Button
               color="green"
               onClick={
-                this.props.type === "new"
+                this.type === "new"
                   ? this.addRoomModal
                   : this.modifyRoomModal
               }
             >
               <Icon name="checkmark" />{" "}
-              {this.props.type === "new" ? "Add room" : "Save changes"}
+              {this.type === "new" ? "Add room" : "Save changes"}
             </Button>
           </Modal.Actions>
         </Modal>
@@ -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;

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 { panelStyle } from "./devices/styleComponents";
-import { checkMaxLength, DEVICE_NAME_MAX_LENGTH } from "./devices/constants";
 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]);

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

@@ -7,9 +7,7 @@
 import React, { Component } from "react";
 import {
   BottomPanel,
-  StyledDiv,
+  StyledDiv
-  editModeIconStyle,
-  editModeStyleLeft,
 } from "./styleComponents";
 import { Image } from "semantic-ui-react";
 import {

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 {

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":

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 {
                           <Grid.Column width={8}>{e.name}</Grid.Column>
                           <Grid.Column floated="right">
                             {this.state.editMode ? (
-                              <ModalWindow type="modify" idRoom={e.id} />
+                              <RoomModal id={e.id} />
                             ) : null}
                           </Grid.Column>
                         </Grid.Row>
@@ -110,7 +109,7 @@ class Navbar extends Component {
                 <Menu.Item name="newM">
                   <Grid>
                     <Grid.Row centered name="new">
-                      <ModalWindow type="new" />
+                      <RoomModal id={null} />
                     </Grid.Row>
                   </Grid>
                 </Menu.Item>
@@ -157,7 +156,7 @@ class Navbar extends Component {
                           <Grid.Column>{e.name}</Grid.Column>
                         </Grid.Row>
                       </Grid>
-                      <ModalWindow type="modify" nicolaStop={true} idRoom={e} />
+                      <RoomModal nicolaStop={true} id={e} />
                     </Dropdown.Item>
                   );
                 })}
@@ -167,7 +166,7 @@ class Navbar extends Component {
           <Grid inverted>
             <Grid.Row>
               <Grid.Column width={8}>
-                <ModalWindow type="new" />
+                <RoomModal id={null} />
               </Grid.Column>
               {this.activeRoom !== -1 ? (
                 <Grid.Column width={8}>

smart-hut/src/views/Signup.js

@@ -34,8 +34,8 @@ export default class Signup extends Component {
       username: this.state.username,
     };
 
-    Forms.
+    Forms
-      submitRegistration(params)
+      .submitRegistration(params)
       .then(() => this.setState({ success: true }))
       .catch((err) => this.setState({ error: { state: true, message: err.messages }}));
   };