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
This commit is contained in:
Claudio Maggioni 2020-03-19 12:14:38 +01:00
commit 4c15df7058
18 changed files with 192 additions and 242 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
import React, { Component } from 'react'; 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 { export default class SelectIcons extends Component {
@ -29,7 +29,6 @@ export default class SelectIcons extends Component {
['trophy', 'wrench', 'image', 'book', 'university', 'medkit'], ['trophy', 'wrench', 'image', 'book', 'university', 'medkit'],
['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']]; ['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
var colums = 0;
return ( return (
<Grid centered> <Grid centered>
{ {

View file

@ -1,6 +1,6 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import { import {
Grid, Grid,
} from "semantic-ui-react"; } from "semantic-ui-react";
import {editButtonStyle, panelStyle} from "./devices/styleComponents"; import {editButtonStyle, panelStyle} from "./devices/styleComponents";
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants"; import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
@ -9,67 +9,76 @@ import NewDevice from "./devices/NewDevice";
export default class DevicePanel extends Component { export default class DevicePanel extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
editMode : false, editMode : false,
devices : this.props.devices, };
};
} this.addDevice = this.addDevice.bind(this);
}
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode })); editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
changeDeviceData = (deviceId, newSettings) => { changeDeviceData = (deviceId, newSettings) => {
console.log(newSettings.name, " <-- new name --> ", deviceId ); console.log(newSettings.name, " <-- new name --> ", deviceId );
this.state.devices.map(device => { this.props.devices.map(device => {
if(device.id === deviceId){ if(device.id === deviceId){
for(let prop in newSettings){ for(let prop in newSettings){
if(device.hasOwnProperty(prop)){ if(device.hasOwnProperty(prop)){
if(prop==="name"){ if(prop==="name"){
if(checkMaxLength(newSettings[prop])){ if(checkMaxLength(newSettings[prop])){
device[prop] = newSettings[prop]; device[prop] = newSettings[prop];
} }
else{ else{
alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters."); alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
} }
}else{ }else{
device[prop] = newSettings[prop]; device[prop] = newSettings[prop];
}
}
}
} }
return null;
});
this.forceUpdate();
};
} addDevice(data) {
} const ds = this.props.addDevice(data);
} this.setState({
return null; devices: ds
}); });
this.forceUpdate(); }
};
render() { render() {
return ( const ds = this.state.devices ? this.state.devices : this.props.devices;
<div style={panelStyle}> return (
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button> <div style={panelStyle}>
<Grid doubling columns={this.state.devices.length > 0 ? this.state.devices.length : 1} divided="vertically"> <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
{ <Grid doubling columns={ds.length > 0 ? ds.length : 1} divided="vertically">
this.state.devices ? {
this.state.devices.map((e, i) => { ds ?
return ( ds.map((e, i) => {
<Grid.Column key={i}> return (
<DeviceType type={e.kind} onChangeData={this.changeDeviceData} device={e} edit={this.state.editMode}/> <Grid.Column key={i}>
</Grid.Column> <DeviceType type={e.kind} onChangeData={this.changeDeviceData} device={e} edit={this.state.editMode}/>
) </Grid.Column>
}) )
: })
null :
} null
<Grid.Column> }
<NewDevice devices={this.state.devices}/> <Grid.Column>
</Grid.Column> <NewDevice addDevice={this.addDevice} devices={ds}/>
</Grid> </Grid.Column>
</div> </Grid>
) </div>
} )
}
} }

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
import React, { Component } from 'react'; 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"; import SelectIcons from "./SelectIcons";
export default class ModalWindow extends Component { export default class ModalWindow extends Component {
@ -39,10 +39,7 @@ export default class ModalWindow extends Component {
} }
deleteRoom = (e) => { deleteRoom = (e) => {
let data = { this.props.deleteRoom();
"id" : this.state.id
}
this.props.deleteRoom(data);
this.closeModal(); this.closeModal();
} }
@ -77,40 +74,39 @@ export default class ModalWindow extends Component {
return ( return (
<div> <div>
{this.props.type == "new" ? {this.props.type === "new" ?
<Button icon labelPosition='left' inverted onClick={this.openModal}> <Button icon labelPosition='left' inverted onClick={this.openModal}>
<Icon name='plus' size='small'/> <Icon name='plus' size='small'/>
ADD ROOM ADD ROOM
</Button> </Button>
: :
<Icon name="pencil" size="small" onClick={this.openModal}/> null
} }
<Modal <Modal
onClose={this.closeModal} onClose={this.closeModal}
open={this.state.openModal}> 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> <Modal.Content>
<Form> <Form>
<p>Insert the name of the room:</p> <p>Insert the name of the room:</p>
<Form.Field> <Form.Field>
<Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething} <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> </Form.Field>
<p>Insert an image of the room:</p> <p>Insert an image of the room:</p>
<Form.Field> <Form.Field>
<Input label='Room image' type='file' name="img" onChange={this.changeSomething} <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.Field>
</Form> </Form>
<div style={spaceDiv}> <div style={spaceDiv}>
<p>Select an icon:</p> <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> </div>
{this.props.type == "modify" ? {this.props.type === "modify" ?
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}> <Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
<Icon name='trash alternate' /> <Icon name='trash alternate' />
Delete room Delete room
@ -119,12 +115,12 @@ export default class ModalWindow extends Component {
</Modal.Content> </Modal.Content>
<Modal.Actions> <Modal.Actions>
<Button color='red' onClick={this.closeModal}> <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>
<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> </Button>
</Modal.Actions> </Modal.Actions>

View file

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

View file

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

View file

@ -25,62 +25,101 @@ export default class Dashboard extends Component{
}; };
this.addRoom = this.addRoom.bind(this); this.addRoom = this.addRoom.bind(this);
this.deleteRoom = this.deleteRoom.bind(this);
this.addDevice = this.addDevice.bind(this);
this.handleItemClick = this.handleItemClick.bind(this); this.handleItemClick = this.handleItemClick.bind(this);
} }
componentDidMount() { componentDidMount() {
call.getAllRooms(this.props.tkn) call.getAllRooms(this.props.tkn)
.then(res => { .then(res => {
this.setState({ if (res.status === 200){
rooms: res.data this.setState({
}); rooms: res.data
});
}
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
}); });
call.getAllDevices(this.props.tkn) call.getAllDevices(this.props.tkn)
.then(res => { .then(res => {
this.setState({ if (res.status === 200) {
devices: res.data this.setState({
}); devices: res.data
});
}
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
}); });
} }
addRoom(data) { addRoom(data) {
call.createRoom(data) call.createRoom(data)
.then(res => { .then(res => {
console.log(res);
if (res.status === 200 && res.data) { if (res.status === 200 && res.data) {
this.setState(state => ({ this.setState(state => ({
rooms: state.rooms.concat([res.data]) rooms: state.rooms.concat([res.data])
})); }));
} }
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
}); });
}; };
deleteRoom(id) { deleteRoom() {
call.deleteRoom(id) let data = {
id : this.state.activeItem
}
call.deleteRoom(data)
.then(res => { .then(res => {
//remove room in state.rooms //remove room in state.rooms
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
}); });
} }
handleItemClick(id) { handleItemClick(id) {
// el -> obj of name and id // el -> obj of name and id
//da fare richiesta get della room e settare activeItem //da fare richiesta get della room e settare activeItem
call.getAllDevicesByRoom(id, this.props.tkn) this.setState({
.then(res => { activeItem: id
this.setState({
devices: res.data
});
}).catch(err => {
console.log(err);
}); });
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 () { render () {
@ -94,11 +133,11 @@ export default class Dashboard extends Component{
</Grid.Row> </Grid.Row>
<Grid.Row color='black'> <Grid.Row color='black'>
<Grid.Column width={3}> <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>
<Grid.Column width={13}> <Grid.Column width={13}>
<DevicePanel devices={this.state.devices} /> <DevicePanel addDevice={this.addDevice} devices={this.state.devices} />
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>

View file

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

View file

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

View file

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

View file

@ -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>
)
}
}

View file

@ -1,15 +1,6 @@
import _ from "lodash"; import _ from "lodash";
import React, { Component } from "react"; import React from "react";
import HeaderController from "./../components/HeaderController"; 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 { export default class TestHeaderController extends React.Component {
render () { render () {