Header.js 1.87 KB
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import IconButton from '@material-ui/core/IconButton'
import MenuIcon from '@material-ui/icons/Menu'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core'
import { connect } from 'react-redux'

const styles = theme => ({
  root: {
    flexGrow: 1
  },
  flex: {
    flexGrow: 1
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20
  }
})

class Header extends Component {
  constructor (props) {
    super(props)

    this.state = {}
  }
  renderContent () {
    switch (this.props.auth) {
      case null:
        return 'Verificando conexão ...'
      case false:
        return <Button color='inherit' href='/auth/google'>Login with Google</Button>
      default:
        return <Button color='inherit' href="/api/logout">Logout</Button>
    }
  }
  render () {
    const { classes } = this.props
    return (
      <div className={classes.root}>
        <AppBar position='static'>
          <Toolbar>
            <IconButton className={classes.menuButton} color='inherit' aria-label='Menu'>
              <MenuIcon />
            </IconButton>
            <a href='http://www.nexusbr.com' target='_blank' rel='noopener noreferrer'>
              <img src='https://nexusbr.com/images/logo.png' alt='NEXUS' width='100' height='39' />
            </a>
            <Typography variant='title' color='inherit' className={classes.flex} />
            {this.renderContent()}
          </Toolbar>
        </AppBar>
      </div>
    )
  }
}

Header.propTypes = {
  classes: PropTypes.object.isRequired
}

function mapStateToPropos (state) {
  return { auth: state.auth }
}

export default connect(mapStateToPropos)(withStyles(styles)(Header))