Merge branch '41-fix-all-warnings-and-clean-code' into 'dev'

fix all warnings and cleaned code

Closes #41

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

smart-hut/src/App.js

@@ -44,18 +44,22 @@ class App extends Component {
   }
 
   componentDidMount() {
-    if (this.props.location) {
+    if (window.location) {
-      const values = queryString.parse(this.props.location.search);
+      const values = queryString.parse(window.location.search);
+      console.log(values);
       this.setState({
           query : values
       });
+    } else {
+      this.setState({
+          query : "ciao"
+      });
     }
   }
 
   auth(data) {
     return call.login(data.params)
       .then(res => {
-        console.log(res);
         if (res.data && res.status === 200) {
           localStorage.setItem("token", res.data.jwttoken);
           this.setState(
@@ -80,7 +84,6 @@ class App extends Component {
   };
 
   logout() {
-    console.log("logout")
     this.setState({
       loggedIn : false,
     });
@@ -109,7 +112,7 @@ class App extends Component {
           <Route path="/sent-email-reg" >
               <ConfirmRegistration />
           </Route>
-          <Route path="/forgot-pass-reset" >
+          <Route path="/password-reset" >
               <ChangePass query={this.state.query}/>
           </Route>
           <Route component={FourOhFour} />

smart-hut/src/client_server.js

@@ -17,132 +17,56 @@ const tkn = localStorage.getItem("token");
 export var call  = {
     login: function(data, headers) {
         return axios.post(config +'auth/login', data)
-                .then(res => {
-                    return res;
-                }).catch(err => {
-                    return {status : "Errore"};
-                });
     },
     register: function(data, headers) {
         return axios.post(config + 'register', data)
-                .then(res => {
-                    return res;
-                }).catch(err => {
-                    //console.error(err);
-                    return {status : "Errore"};
-                });
     },
     initResetPassword: function(data, headers) {
         return axios.post(config + 'register/init-reset-password', data)
-                .then(res => {
-                    return res;
-                }).catch(err => {
-                    return {status : "Errore"};
-                });
     },
     resetPassword: function(data, headers) {
         return axios.put(config + 'register/reset-password', data)
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return {status : "Errore"};
-            });
     },
     getAllRooms: function(token) {
         if (!token){
             token = tkn;
         }
         return axios.get(config + 'room', { headers: { Authorization : "Bearer " + token } }) 
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     },
     getAllDevices: function(token) {
         if (!token){
             token = tkn;
         }
-        return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } })
+        return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } });
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     },
     getAllDevicesByRoom: function(id, token) {
         if (!token){
             token = tkn;
         }
-        return axios.get(config + 'room/' + id + '/devices' , { headers: { Authorization : "Bearer " + token } })
+        return axios.get(config + 'room/' + id + '/devices' , { headers: { Authorization : "Bearer " + token } });
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     },
     createRoom: function(data, headers) {
         return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } }) 
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     },
     updateRoom: function(data, headers) {
         return axios.put(config + 'room/'+data.id)
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     },
     deleteRoom: function(data, headers) {
-        return axios.delete(config + 'room/'+data.id)
+        return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } });
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     }, 
     devicePost: function(data, headers) {
-        return axios.post(config + data.device, data.params)
+        return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } })
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     },
     deviceUpdate: function(data, headers) {
         return axios.put(config + data.device, data.params)
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     },
     deviceDelete: function(data, headers) {
         return axios.delete(config + data.device + '/' + data.id, data.params)
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     },
     deviceGetById: function(data, headers) {
         return axios.get(config + data.device + '/' + data.id)
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     },
     deviceGetAll: function(data, headers) {
         return axios.get(config + data.device)
-            .then(res => {
-                return res;
-            }).catch(err => {
-                return err;
-            });
     }
 };

smart-hut/src/components/HeaderController.js

@@ -1,6 +1,5 @@
-import React, { Component } from "react";
+import React from "react";
-import { render } from "react-dom";
+import { Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
-import { Button, Menu, Header, Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
 import { Segment, Image } from 'semantic-ui-react'
 
 const ImageExampleWrapped = () => (
@@ -23,10 +22,6 @@ const ImageExampleWrapped3 = () => (
     <Image src='title2.png' size='medium' centered/>
   ) 
 
-const HeaderExampleIconProp = () => (
-    <Header as='h2' icon='plug' color="white" content='Smart Hut' />
-)
-
 
 
 const GridExampleInverted = (props) => (
@@ -67,7 +62,6 @@ const GridExampleInverted = (props) => (
 
 export default class MyHeader extends React.Component {
     render() {
-      console.log(this.props)
         return (
           <div>
             <GridExampleInverted logout={this.props.logout} />

smart-hut/src/components/HomeNavbar.js

@@ -1,6 +1,5 @@
 import _ from "lodash";
 import React, { Component } from "react";
-import { render } from "react-dom";
 import {
   Container,
   Icon,

smart-hut/src/components/SelectIcons.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react'
+import { Button, Grid } from 'semantic-ui-react'
 
 export default class SelectIcons extends Component {
 
@@ -29,7 +29,6 @@ export default class SelectIcons extends Component {
                     ['trophy', 'wrench', 'image', 'book', 'university', 'medkit'],
                     ['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
 
-    var colums = 0;
     return (
       <Grid centered>
       {

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

@@ -13,8 +13,9 @@ export default class DevicePanel extends Component {
         super(props);
         this.state = {
             editMode : false,
-      devices : this.props.devices,
         };
+        
+        this.addDevice = this.addDevice.bind(this);
     }
 
     editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
@@ -22,7 +23,7 @@ export default class DevicePanel extends Component {
     changeDeviceData = (deviceId, newSettings) => {
 
         console.log(newSettings.name, " <-- new name --> ", deviceId );
-    this.state.devices.map(device => {
+        this.props.devices.map(device => {
             if(device.id === deviceId){
                 for(let prop in newSettings){
                     if(device.hasOwnProperty(prop)){
@@ -45,15 +46,23 @@ export default class DevicePanel extends Component {
         this.forceUpdate();
     };
 
+    addDevice(data) {
+        const ds = this.props.addDevice(data);
+        this.setState({
+            devices: ds
+        });
+    }
+
 
     render() {
+        const ds = this.state.devices ? this.state.devices : this.props.devices;
         return (
             <div style={panelStyle}>
                 <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
-        <Grid doubling columns={this.state.devices.length > 0 ? this.state.devices.length : 1} divided="vertically">
+                <Grid doubling columns={ds.length > 0 ? ds.length : 1} divided="vertically">
                     {
-            this.state.devices ?
+                        ds ?
-              this.state.devices.map((e, i) => {
+                            ds.map((e, i) => {
                                 return (
                                     <Grid.Column key={i}>
                                         <DeviceType type={e.kind} onChangeData={this.changeDeviceData}  device={e} edit={this.state.editMode}/>
@@ -64,7 +73,7 @@ export default class DevicePanel extends Component {
                             null
                     }
                     <Grid.Column>
-            <NewDevice devices={this.state.devices}/>
+                        <NewDevice addDevice={this.addDevice} devices={ds}/>
                     </Grid.Column>
                 </Grid>
             </div>

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Light from "./Light";
 import SmartPlug from "./SmartPlug";
 import Sensor from "./Sensor";
@@ -9,8 +9,8 @@ import Switcher from "./Switch";
 
 const DeviceType = (props) => {
   switch(props.type) {
-    case "light":
+    case "regular-light":
-      return <Light onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
+      return (<Light onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />)
     case "sensor":
       return <Sensor onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
     case "dimmer":
@@ -19,6 +19,10 @@ const DeviceType = (props) => {
       return <SmartPlug onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
     case "switch":
       return <Switcher onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
+    case "light":
+        return <Light onChangeData={props.changeDeviceData}  device={props.device} edit={props.edit} />
+    default:
+        return ""
   }
 }
 

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

@@ -25,6 +25,7 @@ export default class NewDevice extends Component {
       openModal : false
     };
     this.baseState = this.state
+    this.createDevice = this.createDevice.bind(this);
   }
 
   handleOpen = () => {this.setState({openModal : true})};
@@ -59,8 +60,16 @@ export default class NewDevice extends Component {
     this.setState({lightsAttached : d.value});
   };
 
-  createDevice = () => {
+  createDevice() {
     // Connect to the backend and create device here.
+    const data = {
+      params: {
+        "name": this.state.deviceName,
+      },
+      device: this.state.typeOfDevice
+
+    }
+    this.props.addDevice(data);
     this.resetState();
   };
 
@@ -70,7 +79,7 @@ export default class NewDevice extends Component {
       {
         key: 'light',
         text: 'Normal Light',
-        value: 'light',
+        value: 'regularLight',
         image: {avatar: true, src: '/img/lightOn.svg'},
       },
       {

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

@@ -1,4 +1,3 @@
-import {iconStyle} from "./styleComponents";
 
 export const energyConsumedStyle = {
     color : "black",

smart-hut/src/components/modalform.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react'
+import { Button, Header, Modal, Form, Input, Icon } from 'semantic-ui-react'
 import SelectIcons from "./SelectIcons";
 
 export default class ModalWindow extends Component {
@@ -39,10 +39,7 @@ export default class ModalWindow extends Component {
   }
 
   deleteRoom = (e) => {
-    let data = {
+    this.props.deleteRoom();
-      "id" : this.state.id
-    }
-    this.props.deleteRoom(data);
     this.closeModal();
   }
 
@@ -77,40 +74,39 @@ export default class ModalWindow extends Component {
       return (
         <div>
 
-        {this.props.type == "new" ?
+        {this.props.type === "new" ?
         <Button icon labelPosition='left' inverted onClick={this.openModal}>
           <Icon name='plus' size='small'/>
           ADD ROOM
         </Button>
          :
-         <Icon name="pencil" size="small" onClick={this.openModal}/>
+         null
         }
 
         <Modal
         onClose={this.closeModal}
         open={this.state.openModal}>
-        <Header>{this.props.type == "new" ? "Add new room" : "Modify room" }</Header>
+        <Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header>
         <Modal.Content>
           <Form>
           <p>Insert the name of the room:</p>
             <Form.Field>
               <Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}
-              value={this.props.type == "new" ? null : this.props.idRoom.name }/>
+              value={this.props.type === "new" ? null : this.props.idRoom.name }/>
             </Form.Field>
             <p>Insert an image of the room:</p>
             <Form.Field>
               <Input label='Room image' type='file' name="img" onChange={this.changeSomething}
-              value={this.props.type == "new" ? null : this.props.idRoom.images }/>
+              value={this.props.type === "new" ? null : this.props.idRoom.images }/>
             </Form.Field>
           </Form>
 
           <div style={spaceDiv}>
           <p>Select an icon:</p>
-          {this.props.type == "new" ? "home" : this.props.idRoom.icon }
+          <SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
-          <SelectIcons updateIcon={this.updateIcon} currentIcon={this.state.selectedIcon}/>
           </div>
 
-          {this.props.type == "modify" ?
+          {this.props.type === "modify" ?
           <Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
             <Icon name='trash alternate' />
             Delete room
@@ -119,12 +115,12 @@ export default class ModalWindow extends Component {
         </Modal.Content>
         <Modal.Actions>
           <Button color='red' onClick={this.closeModal}>
-            <Icon name='remove' /> {this.props.type == "new" ? "Cancel" : "Discard changes" }
+            <Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" }
           </Button>
 
 
-          <Button color='green' onClick={this.props.type == "new" ? this.addRoomModal : this.modifyRoomModal}>
+          <Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
-            <Icon name='checkmark' /> {this.props.type == "new" ? "Add room" : "Save changes"}
+            <Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
           </Button>
 
         </Modal.Actions>

smart-hut/src/views/ConfirmForgotPassword.js

@@ -1,14 +1,7 @@
 import React, { Component } from "react";
-import { render } from "react-dom";
 import HomeNavbar from "./../components/HomeNavbar";
 import {
-  Container,
-  Icon,
   Image,
-  Menu,
-  Sidebar,
-  Responsive,
-  Header,
   Divider,
   Message,
   Grid

smart-hut/src/views/ConfirmRegistration.js

@@ -1,14 +1,7 @@
 import React, { Component } from "react";
-import { render } from "react-dom";
 import HomeNavbar from "./../components/HomeNavbar";
 import {
-  Container,
-  Icon,
   Image,
-  Menu,
-  Sidebar,
-  Responsive,
-  Header,
   Divider,
   Message,
   Grid

smart-hut/src/views/Dashboard.js

@@ -25,23 +25,29 @@ export default class Dashboard extends Component{
     };
 
     this.addRoom = this.addRoom.bind(this);
+    this.deleteRoom = this.deleteRoom.bind(this);
+    this.addDevice = this.addDevice.bind(this);
     this.handleItemClick = this.handleItemClick.bind(this);
   }
 
   componentDidMount() {
     call.getAllRooms(this.props.tkn)
       .then(res => {
+        if (res.status === 200){
           this.setState({
             rooms: res.data
           });
+        }
       }).catch(err => {
         console.log(err);
       });
     call.getAllDevices(this.props.tkn)
       .then(res => {
+        if (res.status === 200) {
           this.setState({
             devices: res.data
           });
+        }
       }).catch(err => {
         console.log(err);
       });
@@ -50,7 +56,6 @@ export default class Dashboard extends Component{
   addRoom(data) {
     call.createRoom(data)
       .then(res => {
-        console.log(res);
         if (res.status === 200 && res.data) {
           this.setState(state => ({
             rooms: state.rooms.concat([res.data])
@@ -61,8 +66,11 @@ export default class Dashboard extends Component{
       });
   };
 
-  deleteRoom(id) {
+  deleteRoom() {
-    call.deleteRoom(id)
+    let data = {
+      id : this.state.activeItem
+    }
+    call.deleteRoom(data)
       .then(res => {
         //remove room in state.rooms
       }).catch(err => {
@@ -73,14 +81,45 @@ export default class Dashboard extends Component{
   handleItemClick(id) {
     // el -> obj of name and id
     //da fare richiesta get della room e settare activeItem
-    call.getAllDevicesByRoom(id, this.props.tkn)
+    this.setState({
+      activeItem: id
+    });
+    if ( id === -1) {
+      call.getAllDevices(this.props.tkn) 
         .then(res => {
+          if ( res.status === 200) {
             this.setState({
               devices: res.data
             });
+          }
         }).catch(err => {
           console.log(err);
         });
+    } else {
+      call.getAllDevicesByRoom(id, this.props.tkn)
+        .then(res => {
+          if (res.status === 200) {
+            this.setState({
+              devices: res.data
+            });
+          }
+        }).catch(err => {
+          console.log(err);
+        });
+    }
+  }
+
+  addDevice(data) {
+    data.params["roomId"] = this.state.activeItem;
+    call.devicePost(data, this.props.tkn)
+            .then(res => {
+                this.setState(state => ({
+                  devices: state.devices.concat([res.data])
+                }));
+            }).catch(err => {
+
+            });
+    return this.state.devices;
   }
 
   render () {
@@ -94,11 +133,11 @@ export default class Dashboard extends Component{
           </Grid.Row>
           <Grid.Row color='black'>
             <Grid.Column width={3}>
-              <Navbar addRoom={this.addRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
+              <Navbar addRoom={this.addRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
             </Grid.Column>
 
             <Grid.Column width={13}>
-              <DevicePanel devices={this.state.devices} />
+              <DevicePanel addDevice={this.addDevice} devices={this.state.devices} />
             </Grid.Column>
           </Grid.Row>
         </Grid>

smart-hut/src/views/Forgot-pass-reset.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
 import { call } from '../client_server';
+import { Redirect } from "react-router-dom";
 
 
 export default class ChangePass  extends Component {
@@ -13,6 +14,7 @@ export default class ChangePass  extends Component {
                 message: "",
             }
         }
+        this.handleChangePassword = this.handleChangePassword.bind(this);
     }
 
     onChangeHandler = (event) => {
@@ -32,14 +34,16 @@ export default class ChangePass  extends Component {
 
     handleChangePassword = (e) => {
       const params = {
-        "confirmationToken" : this.props.query.confirmationToken ,
+        "confirmationToken" : this.props.query.token ,
         "password" : this.state.password
       }
       call.resetPassword(params)
         .then(res => {
-          if (res.status === "Errore") {
+          if (res.status !== 200){
             this.setState({ error: { state: true,
                             message: "Errore"}});
+          } else {
+            return <Redirect to="/" />
           }
           // else set a message that an email has been sent
         }).catch(err => {

smart-hut/src/views/Home.js

@@ -4,7 +4,6 @@ import HomeNavbar from './../components/HomeNavbar';
 import {
     Button,
     Container,
-    Divider,
     Grid,
     Header,
     Icon,
@@ -70,7 +69,6 @@ class DesktopContainer extends Component {
 
     render() {
         const { children } = this.props
-        const { fixed } = this.state
 
         return (
             <Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>

smart-hut/src/views/Navbar.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } from "semantic-ui-react";
+import { Menu, Grid, Icon, Responsive, Segment } from "semantic-ui-react";
 import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
 import ModalWindow from "../components/modalform";
 
@@ -19,7 +19,14 @@ class Navbar extends Component {
 
   handleClick = (e, {id}) => {
     console.log(id);
+    let obj = undefined;
+    this.props.rooms.forEach((e) => {
+      if (e.id === id) {
+        obj = e;
+      }
+    });
     this.setState({ activeItem: id,
+                    activeRoom: obj
      });
     this.props.handleItemClick(id)
   }
@@ -38,6 +45,7 @@ class Navbar extends Component {
                 <Menu inverted fluid vertical>
                   <Menu.Item
                     key={-1}
+                    id={-1}
                     name='Home'
                     active={this.state.activeItem === 'Home'}
                     onClick={this.handleClick}
@@ -103,7 +111,7 @@ class Navbar extends Component {
               </Grid>
             </Responsive>
             <Responsive as={Segment} maxWidth={768}>
-            //dropdown menu
+            
             </Responsive>
           </Segment.Group>
        </div>

smart-hut/src/views/NavbarTest.js

@@ -1,12 +0,0 @@
-import React, {Component} from 'react';
-import {Button } from 'semantic-ui-react';
-
-
-export default class NavbarTest extends Component {
-
-    render() {
-        return (
-            <h1>Ciao</h1>
-        )
-    }
-}

smart-hut/src/views/TestHeaderController.js

@@ -1,15 +1,6 @@
 import _ from "lodash";
-import React, { Component } from "react";
+import React from "react";
 import HeaderController from "./../components/HeaderController";
-import { render } from "react-dom";
-import {
-  Container,
-  Icon,
-  Image,
-  Menu,
-  Sidebar,
-  Responsive
-} from "semantic-ui-react";
 
 export default class TestHeaderController extends React.Component {
   render () {