auth.js

import React from 'react';
import { withStyles } from 'material-ui/styles';
import { browserHistory } from 'react-router';
import { compose } from 'recompose';
import Grid from 'material-ui/Grid';
import Menu, { MenuItem } from 'material-ui/Menu';

import User from './User';
import { withState, withAuth } from '../helpers';

const styles = theme => ({
  wrapper: {
    marginTop: theme.spacing.unit
  },
  right: {
    display: 'flex',
    justifyContent: 'flex-end',
    marginRight: theme.spacing.unit * 2
  }
})

const enhance = compose(withStyles(styles), withState('menu'), withAuth)

const Auth = enhance(({ classes, menu, handleChangeMenu, session, logout, children }) => {
  const handleClick = event => handleChangeMenu('anchorEl', event.currentTarget)
  const handleClose = () => handleChangeMenu('anchorEl', null)
  const handleLogout = () => {
    logout()
    handleClose()
    window.location.reload()
  }
  const handleAdmin = () => {
    handleClose()
    browserHistory.push('/admin')
  }
  const handleMain = () => {
    handleClose()
    browserHistory.push('/')
  }

  if (!session) {
    return null
  }

  const mapped = React.Children.map(children, child => React.cloneElement(child, { session, logout }))

  return (
    <div>
      <Grid container className={classes.wrapper} spacing={0}>
        <Grid item xs>
        </Grid>

        <Grid item xs={3} className={classes.right}>
          <User picture={session.picture} name={session.nickname} onClick={handleClick} />
          <Menu
            id="simple-menu"
            anchorEl={menu.anchorEl}
            open={Boolean(menu.anchorEl)}
            onClose={handleClose}
          >
            <MenuItem onClick={handleMain}>Main</MenuItem>
            <MenuItem onClick={handleAdmin}>Admin</MenuItem>
            <MenuItem onClick={handleLogout}>Logout</MenuItem>
          </Menu>
        </Grid>
      </Grid>

      {mapped}
    </div>
  )
})

export default Auth