frontend/smart-hut/src/components/HeaderController.js

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.state = {
      username: "",
    };

    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.state.username}
                </Label>
                <Divider />
                <Button 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.state.username}
                </Label>
                <Divider />
                <Button onClick={this.props.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;