import React from 'react'
import {
  Navbar,
  Nav,
  NavItem,
  NavLink,
  Button,
  Container,
} from 'reactstrap'

import NavbarBrand from '../NavbarBrand'

import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

import avatarUrl from '../../utils/avatarUrl.js'
import style from './style.styl'
import radioEmoji from '../../assets/emojis/radio.png'

const currentUser = gql`
  query getMe {
    me {
      id
    }
  }
`

const ProfileButton = ({me}) => (
  <NavItem>
    {
      me ?
        <img className={style.profilePic} src={avatarUrl(me.id)} />
      :
      <NavLink href="/auth/facebook">
        <Button color="primary" size="sm">
          Login
        </Button>
      </NavLink>
    }
  </NavItem>
)

const Navigation = ({data, className}) => (
  <div className={className}>
    <Navbar className={style.nav} style={{borderRadius: 0}}>
      <Container>
        <NavbarBrand className={style.brand} to='/'>
          <img src={radioEmoji} />
          <span>RADIO ZIZI</span>
        </NavbarBrand>
        <Nav className="pull-xs-right" navbar>
          {
            data.loading ?
            <NavItem>Loading....</NavItem>
            :
            <ProfileButton me={data.me} />
          }
        </Nav>
      </Container>
    </Navbar>
  </div>
)

export default graphql(currentUser)(Navigation)

@@ -5,16 +5,31 @@
 rt React
+, %7B Component %7D
  from 'r
@@ -34,16 +34,16 @@
 'react'%0A
-
 import %7B
@@ -105,16 +105,62 @@
 tainer,%0A
+  Dropdown,%0A  DropdownToggle,%0A  DropdownItem,%0A
 %7D from '
@@ -495,20 +495,20 @@
   %7D%0A%60%0A%0Ac
-onst
+lass
  Profile
@@ -518,22 +518,142 @@
 ton 
-= (%7Bme%7D) =%3E (%0A
+extends Component %7B%0A  constructor (...props) %7B%0A    super(...props)%0A  %7D%0A%0A  render() %7B%0A%0A    const %7B me %7D = this.props%0A%0A    return (%0A    
   %3CN
@@ -668,21 +668,31 @@
     
-%7B%0A
+    %7B%0A  
       
+  
 me ?%0A
+  
     
@@ -757,26 +757,34 @@
 )%7D /%3E%0A      
-:%0A
+    :%0A    
       %3CNavLi
@@ -817,16 +817,20 @@
         
+    
 %3CButton 
@@ -866,16 +866,20 @@
         
+    
 Login%0A  
@@ -884,16 +884,20 @@
         
+   
+ 
 %3C/Button
@@ -898,16 +898,20 @@
 Button%3E%0A
+    
       %3C/
@@ -923,18 +923,26 @@
 nk%3E%0A    
+ 
+   
 %7D%0A
+    
   %3C/NavI
@@ -946,17 +946,27 @@
 avItem%3E%0A
-)
+    )%0A  %7D%0A%7D
 %0A%0Aconst 

Move ProfileButton from function to class