103 lines
2.9 KiB
JavaScript
103 lines
2.9 KiB
JavaScript
import React from "react";
|
|
import { Grid, Divider, Button, Label, Responsive } from "semantic-ui-react";
|
|
import { Segment, Image } from "semantic-ui-react";
|
|
import { RemoteService } from "../remote";
|
|
import { withRouter } from "react-router-dom";
|
|
import { connect } from "react-redux";
|
|
|
|
const IconHomeImage = () => (
|
|
<Image
|
|
src="smart-home.png"
|
|
style={{ width: "50px", height: "auto" }}
|
|
centered
|
|
as="a"
|
|
href="/"
|
|
/>
|
|
);
|
|
|
|
const TitleImage = () => <Image src="sm_logo.png" size="medium" centered />;
|
|
|
|
export class MyHeader extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.getInfo();
|
|
this.logout = this.logout.bind(this);
|
|
}
|
|
|
|
logout() {
|
|
this.props.logout().then(() => this.props.history.push("/"));
|
|
}
|
|
|
|
getInfo() {
|
|
this.props
|
|
.fetchUserInfo()
|
|
.catch((err) => console.error("MyHeader fetch user info error", err));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<Responsive minWidth={768}>
|
|
<Grid columns="equal" divided inverted padded>
|
|
<Grid.Row color="black" textAlign="center">
|
|
<Grid.Column width={3} height={0.5}>
|
|
<Segment color="black" inverted>
|
|
<IconHomeImage />
|
|
</Segment>
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Segment color="black" inverted>
|
|
<TitleImage />
|
|
</Segment>
|
|
</Grid.Column>
|
|
<Grid.Column width={2} heigth={1}>
|
|
<Label as="a" image color="black">
|
|
<img alt="SmartHut logo" src="smart-home.png" />
|
|
{this.props.username}
|
|
</Label>
|
|
<Divider />
|
|
<Button basic inverted onClick={this.logout}>
|
|
Logout
|
|
</Button>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
<Responsive maxWidth={768}>
|
|
<Grid columns="equal" divided inverted padded>
|
|
<Grid.Row color="black" textAlign="center">
|
|
<Segment color="black" inverted>
|
|
<TitleImage />
|
|
</Segment>
|
|
</Grid.Row>
|
|
<Grid.Row color="black" textAlign="center">
|
|
<Grid.Column>
|
|
<IconHomeImage />
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Label as="a" image color="black">
|
|
<img alt="SmartHut logo" src="smart-home.png" />
|
|
{this.props.username}
|
|
</Label>
|
|
<Divider />
|
|
<Button onClick={this.logout}>Logout</Button>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, _) => ({
|
|
username:
|
|
state.userInfo && state.userInfo.username ? state.userInfo.username : "",
|
|
});
|
|
const LoginContainer = connect(
|
|
mapStateToProps,
|
|
RemoteService
|
|
)(withRouter(MyHeader));
|
|
export default LoginContainer;
|