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>
})

const UserNav = props => {
  const [menu, setMenu] = React.useState(false)

  return (
    <UserAdoption>{({ user, logout }) => {
      if (user.loading) {
        return (
          <p>Loading...</p>
        )
      }
      if (user.error) {
        return (
          <LoginForm />
        )
      }
      const { name, email, id } = user.data.me
      return (
        <>
          <a href='' onClick={ev => setMenu(!menu)}>{name}</a>
          {menu || (
            <UserNavMenu />
          )}
        </>
      )
    }}
    </UserAdoption>
  )
}

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

  return (
    <>
      <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