Merge branch '39-fix-navbar-and-devicepanel' into 'dev'

fix navbar and devicePanel

Closes #39

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

smart-hut/src/App.js

@@ -80,12 +80,12 @@ class App extends Component {
   };
 
   logout() {
+    console.log("logout")
     this.setState({
       loggedIn : false,
     });
 
     localStorage.removeItem("token");
-    this.props.history.push("/");
   };
 
   render() {

smart-hut/src/client_server.js

@@ -74,7 +74,7 @@ export var call  = {
         if (!token){
             token = tkn;
         }
-        return axios.get(config + 'room/' + id + '/device' , { headers: { Authorization : "Bearer " + token } })
+        return axios.get(config + 'room/' + id + '/devices' , { headers: { Authorization : "Bearer " + token } })
             .then(res => {
                 return res;
             }).catch(err => {

smart-hut/src/components/HeaderController.js

@@ -29,7 +29,7 @@ const HeaderExampleIconProp = () => (
 
 
 
-const GridExampleInverted = () => (
+const GridExampleInverted = (props) => (
     <Grid columns='equal' divided inverted padded >
       <Grid.Row color='black' textAlign='center'>
         <Grid.Column width={2}>
@@ -57,7 +57,7 @@ const GridExampleInverted = () => (
           </Dropdown.Item>
           <Dropdown.Item>See profile...</Dropdown.Item>
           <Dropdown.Divider />
-          <Dropdown.Item>Logout</Dropdown.Item>
+          <Dropdown.Item onClick={props.logout }>Logout</Dropdown.Item>
         </Dropdown.Menu>
       </Dropdown>
         </Grid.Column>
@@ -67,9 +67,10 @@ const GridExampleInverted = () => (
 
 export default class MyHeader extends React.Component {
     render() {
+      console.log(this.props)
         return (
           <div>
-            <GridExampleInverted />
+            <GridExampleInverted logout={this.props.logout} />
           </div>
         );
       }

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

@@ -7,47 +7,6 @@ import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
 import DeviceType from './devices/DeviceTypeController';
 import NewDevice from "./devices/NewDevice";
 
-
-/* const devices = [
-    {
-        "id" : 1,
-        "name": "Bedroom Light",
-        "type" : "light",
-        "hasIntensity" : true,
-        "intensityLevel" : 0.20,
-        ...LightDevice
-    },
-    {
-        "id" : 2,
-        "name": "Bathroom Light",
-        "type" : "light",
-        ...LightDevice
-    },
-    {
-        "id" : 3,
-        "name": "Desktop Light",
-        "type" : "light",
-        ...LightDevice
-    },
-    {
-        "id" : 4,
-        "name": "Entrance Light",
-        "type" : "light",
-        ...LightDevice
-    },
-    {
-        "id" : 5,
-        "name": "Smart Plug",
-        "type" : "smartplug",
-        ...SmartPlugDevice
-    },
-    {
-        "id" : 6,
-        "name": "Bedroom Thermometer",
-        "type" : "temperature-sensor",
-    },
-];*/
-
 export default class DevicePanel extends Component {
 
     constructor(props) {
@@ -61,6 +20,7 @@ export default class DevicePanel extends Component {
     editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
 
     changeDeviceData = (deviceId, newSettings) => {
+
         console.log(newSettings.name, " <-- new name --> ", deviceId );
         this.state.devices.map(device => {
             if(device.id === deviceId){
@@ -90,13 +50,13 @@ export default class DevicePanel extends Component {
         return (
             <div style={panelStyle}>
                 <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
-                <Grid doubling divided="vertically">
+                <Grid doubling columns={this.props.devices.length > 0 ? this.props.devices.length : 1} divided="vertically">
                     {
                         this.props.devices ?
                             this.props.devices.map((e, i) => {
                                 return (
-                                    <Grid.Column>
-                                        <DeviceType type={e.type} onChangeData={this.changeDeviceData}  device={e} edit={this.state.editMode}/>
+                                    <Grid.Column key={i}>
+                                        <DeviceType type={e.kind} onChangeData={this.changeDeviceData}  device={e} edit={this.state.editMode}/>
                                     </Grid.Column>
                                 )
                             })

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

@@ -25,6 +25,7 @@ export default class Light extends Component {
     }
 
     onClickDevice = () => {
+        
         this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
     };
 

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

@@ -19,6 +19,7 @@ export const panelStyle = {
   height: "100%",
   width: "auto",
   padding: "3rem",
+  color: "#000"
 };
 
 export const editModeStyle = {

smart-hut/src/components/modalform.js

@@ -106,7 +106,7 @@ export default class ModalWindow extends Component {
 
           <div style={spaceDiv}>
           <p>Select an icon:</p>
-          {this.props.selectedIcon == "new" ? "home" : this.props.idRoom.icon }
+          {this.props.type == "new" ? "home" : this.props.idRoom.icon }
           <SelectIcons updateIcon={this.updateIcon} currentIcon={this.state.selectedIcon}/>
           </div>
 

smart-hut/src/views/Dashboard.js

@@ -31,10 +31,11 @@ export default class Dashboard extends Component{
   componentDidMount() {
     call.getAllRooms(this.props.tkn)
       .then(res => {
+        console.log(res.data.length);
         res.data.forEach((e) => {
-          this.setState(state => ({
-            rooms: state.rooms.concat([e])
-          }));
+          this.setState({
+            rooms: res.data
+          });
         });
       }).catch(err => {
         console.log(err);
@@ -42,10 +43,8 @@ export default class Dashboard extends Component{
     call.getAllDevices(this.props.tkn) 
       .then(res => {
         console.log(res);
-        res.data.forEach((e) => {
-          this.setState(state => ({
-            devices: state.devices.concat([e])
-          }));
+        this.setState({
+          devices : res.data
         });
       }).catch(err => {
         console.log(err);
@@ -75,15 +74,15 @@ export default class Dashboard extends Component{
       });
   }
 
-  handleItemClick(el) {
+  handleItemClick(id) {
     // el -> obj of name and id
     //da fare richiesta get della room e settare activeItem
-    call.getAllDevicesByRoom(el.id, this.props.tkn)
+    call.getAllDevicesByRoom(id, this.props.tkn)
       .then(res => {
         res.data.forEach((e) => {
-          this.setState(state => ({
-            devices: state.devices.concat([e])
-          }));
+          this.setState({
+            devices: res.data
+          });
         });
       }).catch(err => {
         console.log(err);
@@ -96,7 +95,7 @@ export default class Dashboard extends Component{
         <Grid >
         <Grid.Row color='black'>
           <Grid.Column>
-            <MyHeader />
+            <MyHeader logout={this.props.logout} />
           </Grid.Column>
         </Grid.Row>
         <Grid.Row color='black'>

smart-hut/src/views/Navbar.js

@@ -17,15 +17,15 @@ class Navbar extends Component {
     this.setState((prevState) => ({ editMode: !prevState.editMode }));
   };
 
-  handleClick = (e, { i }) => {
-    this.setState({ activeItem: e.name,
-                    edited: i
+  handleClick = (e, {id}) => {
+    console.log(id);
+    this.setState({ activeItem: id,
      });
-    this.props.handleItemClick(e)
+    this.props.handleItemClick(id)
   }
 
   render(){
-    const { activeItem } = this.state
+    //const { activeItem } = this.state
     return (
       <div>
       <Segment.Group>
@@ -37,8 +37,9 @@ class Navbar extends Component {
             <Grid.Row color='black'>
                 <Menu inverted fluid vertical>
                   <Menu.Item
+                    key={-1}
                     name='Home'
-                    active={activeItem === 'Home'}
+                    active={this.state.activeItem === 'Home'}
                     onClick={this.handleClick}
                   >
                   <Grid>
@@ -61,7 +62,7 @@ class Navbar extends Component {
                        id={e.id}
                        key={i}
                        name={e.name}
-                       active={activeItem === e.name}
+                       active={this.state.activeItem === e.id}
                        onClick={this.handleClick}
                       >
                       <Grid>
@@ -87,7 +88,7 @@ class Navbar extends Component {
 
                   <Menu.Item
                     name='newM'
-                    active={activeItem === 'Plus'}
+                    active={this.state.activeItem === 'newM'}
                   >
 
                   <Grid>