Merge branch '76-fixed-registration-bug' into 'dev'

Fixed registration bug

Closes #76

See merge request sa4-2020/the-sanmarinoes/frontend!83

smart-hut/src/components/RoomModal.js

@@ -49,7 +49,16 @@ class RoomModal extends Component {
   }
 
   setInitialState() {
-    this.setState(this.initialState);
+    for (let key in this.initialState) {
+      if (this.initialState.hasOwnProperty(key)) {
+        //console.log(key + " -> " + this.initialState[key]);
+        this.setState({
+          key: this.initialState[key],
+        });
+      }
+    }
+    console.log(this.initialState);
+    //this.setState(state);
   }
 
   get type() {

smart-hut/src/components/SceneModal.js

@@ -1,5 +1,14 @@
 import React, { Component } from "react";
-import { Button, Header, Modal, Icon, Responsive } from "semantic-ui-react";
+import {
+  Button,
+  Header,
+  Modal,
+  Icon,
+  Responsive,
+  Form,
+  Input,
+  Dropdown,
+} from "semantic-ui-react";
 import { connect } from "react-redux";
 import { RemoteService } from "../remote";
 import { appActions } from "../storeActions";
@@ -10,6 +19,7 @@ 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);
@@ -18,7 +28,9 @@ class SceneModal extends Component {
 
   get initialState() {
     return {
-      //INITIAL STATE HERE
+      name: this.type === "new" ? "New Scene" : this.props.room.name,
+      sceneDevices: this.type === "new" ? [{}] : [this.props.scene.devices],
+      openModal: false,
     };
   }
 
@@ -30,6 +42,12 @@ 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
@@ -81,7 +99,21 @@ 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 ? (
@@ -132,9 +164,30 @@ class SceneModal extends Component {
             {this.type === "new" ? "Add new scene" : "Modify scene"}
           </Header>
           <Modal.Content>
-            {
-              //TODO FORM TO ADD OR MODIFY SCENE
-            }
+            <Form>
+              <p>Insert the name of the scene:</p>
+              <Form.Field>
+                <Input
+                  label="Scene name"
+                  placeholder="Scene Name"
+                  name="name"
+                  type="text"
+                  onChange={this.changeSomething}
+                  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" ? (
               <Button
@@ -176,6 +229,16 @@ 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

@@ -0,0 +1,87 @@
+import React, { Component } from "react";
+import { Button, Modal, Icon, Image } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { RemoteService } from "../../remote";
+import styled from "styled-components";
+//import { appActions } from "../../storeActions";
+
+const StyledDiv = styled.div`
+  background-color: #505bda;
+  padding: 3rem;
+  width: 10rem;
+  height: 10rem;
+  border-radius: 100%;
+  border: none;
+  position: relative;
+  box-shadow: 3px 2px 10px 5px #ccc;
+  transition: all 0.3s ease-out;
+  :hover {
+    background-color: #4345d9;
+  }
+  :active {
+    transform: translate(0.3px, 0.8px);
+    box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
+  }
+`;
+
+class NewSceneDevice extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      openModal: false,
+    };
+  }
+
+  handleOpen = () => {
+    this.setState({ openModal: true });
+  };
+  handleClose = () => {
+    this.setState({ openModal: false });
+  };
+
+  resetState = () => {
+    this.setState(this.baseState);
+    this.handleClose();
+  };
+
+  render() {
+    return (
+      <Modal
+        closeIcon
+        open={this.state.openModal}
+        onClose={this.resetState}
+        trigger={
+          <StyledDiv onClick={this.handleOpen}>
+            <Image src="/img/add.svg" style={{ filter: "invert()" }} />
+          </StyledDiv>
+        }
+        centered={true}
+      >
+        <Modal.Header>Add a New Scene Device</Modal.Header>
+        <Modal.Content></Modal.Content>
+        <Modal.Actions>
+          <Button
+            onClick={this.createDevice}
+            color="blue"
+            icon
+            labelPosition="right"
+          >
+            <Icon name="up arrow" />
+            Finish
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = (state, _) => ({
+  devices: Object.values(state.devices),
+  activeRoom: state.active.activeRoom,
+});
+const NewSceneDeviceContainer = connect(
+  mapStateToProps,
+  RemoteService
+)(NewSceneDevice);
+export default NewSceneDeviceContainer;

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

@@ -1,21 +1,36 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { RemoteService } from "../../remote";
+import NewSceneDevice from "./NewSceneDevice";
+import { Grid } from "semantic-ui-react";
 
 class ScenesPanel extends Component {
   constructor(props) {
     super(props);
-    console.log(this.props.activeRoom, this.props.activeTab);
+    console.log(this.props.activeScene);
   }
 
   render() {
-    return <h1 color="black">SCENES</h1>;
+    return (
+      <Grid doubling columns={2} divided="vertically">
+        {
+          //TODO DISPLAY DEVICES IN SCENE
+        }
+        {this.props.isActiveDefaultScene ? (
+          <Grid.Column>
+            <NewSceneDevice />
+          </Grid.Column>
+        ) : null}
+      </Grid>
+    );
   }
 }
 
 const mapStateToProps = (state, _) => ({
-  activeRoom: state.active.activeRoom,
-  activeTab: state.active.activeTab,
+  get isActiveDefaultScene() {
+    return state.active.activeScene === -1;
+  },
+  activeScene: state.active.activeScene,
 });
 const ScenesPanelContainer = 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) => {
-    if (!Endpoint.token) {
+  send: (method, route, query = {}, body = null, registration) => {
+    if (!registration && !Endpoint.token) {
       throw new Error("No token while performing authenticated request");
     }
 
@@ -48,9 +48,11 @@ const Endpoint = {
       method: method,
       params: query,
       data: ["put", "post"].indexOf(method) !== -1 ? body : null,
-      headers: {
-        Authorization: `Bearer ${Endpoint.token}`,
-      },
+      headers: !registration
+        ? {
+            Authorization: `Bearer ${Endpoint.token}`,
+          }
+        : {},
     }).then((res) => {
       if (!res.data && method !== "delete") {
         console.error("Response body is empty");
@@ -109,7 +111,7 @@ const Endpoint = {
    * @returns {Promise<*, *>} The Axios-generated promise
    */
   post(route, query, body) {
-    return this.send("post", route, query, body);
+    return this.send("post", route, query, body, true);
   },
 
   /**

smart-hut/src/views/Login.js

@@ -31,7 +31,7 @@ class Login extends Component {
       .login(this.state.user, this.state.password)
       .then(() => this.props.history.push("/dashboard"))
       .catch((err) => {
-        console.log(err);
+        console.log("CIAO", err);
         this.setState({
           error: { state: true, message: err.messages.join(" - ") },
         });