u-fit/frontend/components/user.js

import { Query, Mutation } from 'react-apollo'
import { adopt } from 'react-adopt'
import Link from 'next/link'

import { CURRENT_USER, USER_LOGOUT } from '../lib/graphql'
import LoginForm from './login'

const UserAdoption = adopt({
  user: ({ render }) => <Query query={CURRENT_USER}>{render}</Query>,
  logout: ({ render }) => <Mutation mutation={USER_LOGOUT} refetchQueries={[{ query: CURRENT_USER }]}>{render}</Mutation>
})

class UserNav extends React.Component {
  state = {
    menu: false
  }

  toggleMenu = ev => {
    ev.preventDefault()
    this.setState({ menu: !this.state.menu })
  }

  logout = async (ev, logout) => {
    ev.preventDefault()
    try {
      const id = await logout()
    } catch (error) {
      console.log(error)
    }
  }

  render() {
    return (
      <UserAdoption>{({ user, logout }) => {
        if (user.loading) return (
          <p>Loading...</p>
        )
        if (user.error) return (
          <LoginForm>
            <style jsx>
              {`
            label {
              display: inline;
            }
          `}
            </style>
          </LoginForm>
        )
        const { name, email, id } = user.data.me
        return (
          <>
            <a href='' onClick={this.toggleMenu}>{name}</a>
            {this.state.menu || (
              <UserNavMenu />
            )}
          </>
        )
      }}
      </UserAdoption>
    )
  }
}

const UserNavMenu = props => (
  <>
    <section className='usermenu'>
      <h2>Welcome, {name}</h2>
      <Link href={{ path: 'user' }}><a>Edit user data</a></Link>
      <a href='' onClick={ev => {
        ev.preventDefault()
        this.logout(ev, logout)
      }}>Logout</a>
    </section>

    <style jsx>
      {`
section.usermenu {
  position: absolute;
  background: rgba(127,0,0,0.5);
}
                `}
    </style>
  </>
)

const User = props => <a />

export { UserNav }
export default User