fixed major bug

smart-hut/src/components/SceneModal.js

@@ -7,7 +7,6 @@ import {
   Responsive,
   Form,
   Input,
-  Dropdown,
 } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { RemoteService } from "../remote";
@@ -19,7 +18,6 @@ class SceneModal extends Component {
     super(props);
     this.state = this.initialState;
     this.setInitialState();
-    this.getDevices();
 
     this.addSceneModal = this.addSceneModal.bind(this);
     this.modifySceneModal = this.modifySceneModal.bind(this);
@@ -29,7 +27,6 @@ class SceneModal extends Component {
   get initialState() {
     return {
       name: this.type === "new" ? "New Scene" : this.props.room.name,
-      sceneDevices: this.type === "new" ? [{}] : [this.props.scene.devices],
       openModal: false,
     };
   }
@@ -42,12 +39,6 @@ class SceneModal extends Component {
     return !this.props.id ? "new" : "modify";
   }
 
-  getDevices() {
-    this.props
-      .fetchDevices()
-      .catch((err) => console.error(`error fetching devices:`, err));
-  }
-
   addSceneModal = (e) => {
     /*let data = {
       // DATA HERE
@@ -99,21 +90,7 @@ class SceneModal extends Component {
     this.setState({ openModal: true });
   };
 
-  setSceneDevice(e, d) {
-    this.setState({ sceneDevices: d.value });
-  }
-
   render() {
-    const availableDevices = [];
-    this.props.devices.forEach((e) => {
-      if (!this.state.sceneDevices.includes(e)) {
-        availableDevices.push({
-          key: e.id,
-          text: e.name,
-          id: e.id,
-        });
-      }
-    });
     return (
       <div>
         {!this.props.nicolaStop ? (
@@ -176,17 +153,6 @@ class SceneModal extends Component {
                   value={this.state.name}
                 />
               </Form.Field>
-              <Form.Field>
-                <label>Select devices you want to attach: </label>
-                <Dropdown
-                  name="scene devices"
-                  placeholder="Select Devices"
-                  fluid
-                  multiple
-                  onChange={this.setSceneDevice}
-                  options={availableDevices}
-                />
-              </Form.Field>
             </Form>
 
             {this.type === "modify" ? (
@@ -229,16 +195,6 @@ const setActiveScene = (activeScene) => {
 };
 
 const mapStateToProps = (state, ownProps) => ({
-  get devices() {
-    if (state.active.activeRoom === -1) {
-      return Object.values(state.devices);
-    } else {
-      const deviceArray = [
-        ...state.rooms[state.active.activeRoom].devices,
-      ].sort();
-      return deviceArray.map((id) => state.devices[id]);
-    }
-  },
   scene: ownProps.id ? state.scenes[ownProps.id] : null,
 });
 const SceneModalContainer = connect(

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

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button, Modal, Icon, Image } from "semantic-ui-react";
+import { Button, Modal, Icon, Image, Form, Dropdown } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { RemoteService } from "../../remote";
 import styled from "styled-components";
@@ -30,7 +30,18 @@ class NewSceneDevice extends Component {
 
     this.state = {
       openModal: false,
+      sceneDevices: this.props.scene ? this.props.scene.devices : {},
+      deviceName: "",
     };
+    this.getDevices();
+
+    this.setSceneDevice = this.setSceneDevice.bind(this);
+  }
+
+  getDevices() {
+    this.props
+      .fetchDevices()
+      .catch((err) => console.error(`error fetching devices:`, err));
   }
 
   handleOpen = () => {
@@ -45,7 +56,21 @@ class NewSceneDevice extends Component {
     this.handleClose();
   };
 
+  setSceneDevice(e, d) {
+    this.setState({ devicesAttached: d.value });
+  }
+
   render() {
+    const availableDevices = [];
+    this.props.devices.forEach((e) => {
+      if (!Object.keys(this.state.sceneDevices).find((d) => e.id === d)) {
+        availableDevices.push({
+          key: e.id,
+          text: e.name,
+          value: e.id,
+        });
+      }
+    });
     return (
       <Modal
         closeIcon
@@ -59,7 +84,21 @@ class NewSceneDevice extends Component {
         centered={true}
       >
         <Modal.Header>Add a New Scene Device</Modal.Header>
-        <Modal.Content></Modal.Content>
+        <Modal.Content>
+          <Form>
+            <Form.Field style={{ marginTop: "1rem" }}>
+              <label>Select devices you want to attach: </label>
+              <Dropdown
+                name="scene devices"
+                placeholder="Select Devices"
+                fluid
+                multiple
+                onChange={this.setSceneDevice}
+                options={availableDevices}
+              />
+            </Form.Field>
+          </Form>
+        </Modal.Content>
         <Modal.Actions>
           <Button
             onClick={this.createDevice}
@@ -78,7 +117,7 @@ class NewSceneDevice extends Component {
 
 const mapStateToProps = (state, _) => ({
   devices: Object.values(state.devices),
-  activeRoom: state.active.activeRoom,
+  activeScene: state.active.activeScene,
 });
 const NewSceneDeviceContainer = connect(
   mapStateToProps,

smart-hut/src/remote.js

@@ -39,8 +39,8 @@ const Endpoint = {
    * @param {[String]String} query query ('?') parameters (no params by default)
    * @param {any} body the JSON request body
    */
-  send: (method, route, query = {}, body = null, registration) => {
-    if (!registration && !Endpoint.token) {
+  send: (method, route, query = {}, body = null) => {
+    if (!Endpoint.token) {
       throw new Error("No token while performing authenticated request");
     }
 
@@ -48,11 +48,9 @@ const Endpoint = {
       method: method,
       params: query,
       data: ["put", "post"].indexOf(method) !== -1 ? body : null,
-      headers: !registration
-        ? {
+      headers: {
         Authorization: `Bearer ${Endpoint.token}`,
-          }
-        : {},
+      },
     }).then((res) => {
       if (!res.data && method !== "delete") {
         console.error("Response body is empty");
@@ -63,6 +61,28 @@ const Endpoint = {
     });
   },
 
+  /**
+   * Performs a non-authenticated post and put request for registration, reset-password
+   * @param {post} the desired method
+   * @param {String} route the desired route (e.g. "/rooms/1/devices")
+   * @param {[String]String} query query ('?') parameters (no params by default)
+   * @param {any} body the JSON request body
+   */
+  sendNA: (method, route, query = {}, body = null) => {
+    return Endpoint.axiosInstance(route, {
+      method: method,
+      params: query,
+      data: ["put", "post"].indexOf(method) !== -1 ? body : null,
+    }).then((res) => {
+      if (!res.data) {
+        console.error("Response body is empty");
+        return null;
+      } else {
+        return res;
+      }
+    });
+  },
+
   /**
    * Performs login
    * @param {String} usernameOrEmail
@@ -111,7 +131,18 @@ const Endpoint = {
    * @returns {Promise<*, *>} The Axios-generated promise
    */
   post(route, query, body) {
-    return this.send("post", route, query, body, true);
+    return this.send("post", route, query, body);
+  },
+
+  /**
+   * Performs a non-authenticated POST request
+   * @param {String} route the desired route (e.g. "/rooms/1/devices")
+   * @param {[String]String} query query ('?') parameters (no params by default)
+   * @param {any} body the JSON request body
+   * @returns {Promise<*, *>} The Axios-generated promise
+   */
+  postNA(route, query, body) {
+    return this.sendNA("post", route, query, body);
   },
 
   /**
@@ -125,6 +156,17 @@ const Endpoint = {
     return this.send("put", route, query, body);
   },
 
+  /**
+   * Performs a non-authenticated PUT request
+   * @param {String} route the desired route (e.g. "/rooms/1/devices")
+   * @param {[String]String} query query ('?') parameters (no params by default)
+   * @param {any} body the JSON request body
+   * @returns {Promise<*, *>} The Axios-generated promise
+   */
+  putNA(route, query = {}, body = {}) {
+    return this.sendNA("put", route, query, body);
+  },
+
   /**
    * Performs an authenticated DELETE request
    * @param {get|post|put|delete} the desired method
@@ -489,7 +531,7 @@ export class Forms {
    *  with validation errors as a String array
    */
   static submitRegistration(data) {
-    return Endpoint.post(
+    return Endpoint.postNA(
       "/register",
       {},
       {
@@ -512,7 +554,7 @@ export class Forms {
    *  with validation errors as a String array
    */
   static submitInitResetPassword(email) {
-    return Endpoint.post(
+    return Endpoint.postNA(
       "/register/init-reset-password",
       {},
       {
@@ -537,7 +579,7 @@ export class Forms {
    *  with validation errors as a String array
    */
   static submitResetPassword(confirmationToken, password) {
-    return Endpoint.post(
+    return Endpoint.putNA(
       "/register/reset-password",
       {},
       {