1 import React, { Component } from 'react';

     2 import ReactDOM from 'react-dom';

     3 

     4 export default class LoginNav extends Component {

     5 

     6   state = {

     7     showDropdown: false

     8   }

     9 

    10   componentWillMount() {

    11     document.addEventListener('click', this.handleClickOutside, false);

    12   }

    13 

    14   componentWillUnmount() {

    15     document.removeEventListener('click', this.handleClickOutside, false);

    16   }

    17 

    18   handleClickOutside = (e) => {

    19     if(!ReactDOM.findDOMNode(this).contains(e.target)) {

    20       this.hideDropDown();

    21     }

    22   }

    23 

    24   onClickSettings = (e) => {

    25     e.preventDefault();

    26     this.props.history.push('/settings');

    27   }

    28 

    29   onClickLogin = (e) => {

    30     e.preventDefault();

    31     this.props.history.push('/login');

    32   }

    33 

    34   toggleShowDropdown = () => {

    35     this.setState({showDropdown: !this.state.showDropdown});

    36   }

    37 

    38   hideDropDown = () => {

    39     this.setState({showDropdown: false});

    40   }

    41 

    42   render() {

    43 

    44     const {isAuthenticated, currentUser, onLogout} = this.props;

    45 

    46     if (isAuthenticated) {

    47       return (

    48 

    49         <li className={`nav-item dropdown navs ${this.state.showDropdown?'show':''}`}>

    50           <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>

    51           { currentUser.get('username') }

    52           &nbsp;<span className="caret"></span>

    53           </a>

    54           <ul className={`dropdown-menu ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">

    55             <li><a className="user-dropdown" href="#settings" onClick={this.onClickSettings}>Paramètres</a></li>

    56             <li><a className="user-dropdown" href="#logout" onClick={onLogout}>Se déconnecter</a></li>

    57           </ul>

    58         </li>

    59       );

    60     } else {

    61       return (

    62           <li>

    63           <a className="navs" onClick={this.onClickLogin} href="/login">Se connecter</a>

    64           </li>

    65       );

    66     }

    67   }

    68 }