import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'

import { ROUTES } from 'routes'
import NavLink from './NavLink'

import './navbar.scss'


class NavBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      menuOpen: false,
    }
  }

  componentWillReceiveProps() {
    this.setState({ menuOpen: false })
  }

  render() {
    const { isAuthenticated } = this.props
    const { menuOpen } = this.state

    return (
      <nav className={classnames({ 'menu-open': menuOpen })}>
        <div className="container navbar-top">
          <NavLink exact to={ROUTES.Home} className="brand">
            FlaskReact.<span className="tld">SPA</span>
          </NavLink>
          <a href="javascript:void(0);"
             className="burger"
             onClick={this.toggleResponsiveMenu}
          >
            Menu&nbsp;&nbsp;&#9776;
          </a>
          <div className="menu left">
            <NavLink to={ROUTES.Articles} />
            <NavLink to={ROUTES.Series} />
            <NavLink to={ROUTES.Styles} />
            <NavLink to={ROUTES.Contact} />
          </div>
          <div className="menu right">
            {isAuthenticated
              ? this.renderAuthenticatedMenu()
              : this.renderUnauthenticatedMenu()
            }
          </div>
        </div>
      </nav>
    )
  }

  toggleResponsiveMenu = () => {
    this.setState({ menuOpen: !this.state.menuOpen })
  }

  renderAuthenticatedMenu() {
    return (
      <div key="authenticated">
        <NavLink to={ROUTES.Profile} />
        <NavLink to={ROUTES.Logout} />
      </div>
    )
  }

  renderUnauthenticatedMenu() {
    return (
      <div key="unauthenticated">
        <NavLink to={ROUTES.SignUp} />
        <NavLink to={ROUTES.Login} />
      </div>
    )
  }
}

export default connect(
  (state) => ({
    isAuthenticated: state.auth.isAuthenticated,
    routing: state.routing, // required for <NavLink> components to work correctly
  }),
)(NavBar)

@@ -34,33 +34,107 @@
 %7B co
-nnect %7D from 'react-redux
+mpose %7D from 'redux'%0Aimport %7B connect %7D from 'react-redux'%0Aimport %7B withRouter %7D from 'react-router
 '%0Aim
@@ -1923,22 +1923,27 @@
 %0A%7D%0A%0A
-export default
+const withConnect =
  con
@@ -1963,20 +1963,16 @@
 e) =%3E (%7B
-%0A   
  isAuthe
@@ -2011,37 +2011,54 @@
 ated
-,%0A    routing: state.routing,
+ %7D),%0A)%0A%0Aexport default compose(%0A  withRouter, 
  // 
@@ -2074,51 +2074,73 @@
 for 
-%3C
 NavLink
-%3E components to work correctly%0A  %7D)
+s to determine whether they're active or not%0A  withConnect
 ,%0A)(

use withRouter for navbar