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 }) => {
        console.log(user, logout)
        if (user.error) return <LoginForm />
        if (user.loading) return <p>Loading...</p>
        const { name, email, id } = user.data.me
        return (
          <>
            <a href='' onClick={this.toggleMenu}>{name}</a>
            {
              this.state.menu ? (
                <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>
              ) : null
            }

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

const User = props => <a />

export { UserNav }
export default User