client/src/components/Navbar.js
changeset 52 96f8a4a59bd9
parent 44 3b20e2b584fe
child 53 d8588379529e
equal deleted inserted replaced
51:08d46c730397 52:96f8a4a59bd9
     1 import PropTypes from 'prop-types';
     1 import PropTypes from 'prop-types';
     2 import React, { Component } from 'react';
     2 import React, { Component } from 'react';
     3 import { connect } from 'react-redux';
     3 import { connect } from 'react-redux';
       
     4 import { bindActionCreators } from 'redux';
     4 // import logo from './logo.svg';
     5 // import logo from './logo.svg';
     5 import { Navbar, Nav, NavItem } from 'react-bootstrap';
     6 import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
       
     7 import * as authActions from '../actions/authActions';
     6 
     8 
     7 class AppNavbar extends Component {
     9 class AppNavbar extends Component {
     8 
    10 
     9   onClickHome = (e) => {
    11   onClickHome = (e) => {
    10     e.preventDefault();
    12     e.preventDefault();
    19   onClickLogin = (e) => {
    21   onClickLogin = (e) => {
    20     e.preventDefault();
    22     e.preventDefault();
    21     this.props.history.push('/login');
    23     this.props.history.push('/login');
    22   }
    24   }
    23 
    25 
       
    26   onClickLogout = (e) => {
       
    27     e.preventDefault();
       
    28     this.props.authActions.logout();
       
    29   }
       
    30 
    24   renderLogin() {
    31   renderLogin() {
    25 
    32 
    26     if (this.props.currentUser) {
    33     if (this.props.currentUser) {
    27       return (
    34       return (
    28         <NavItem>{ this.props.currentUser.username }</NavItem>
    35         <NavDropdown title={ this.props.currentUser.username } id="user-dropdown">
       
    36           <MenuItem>Settings</MenuItem>
       
    37           <MenuItem onClick={this.onClickLogout}>Logout</MenuItem>
       
    38         </NavDropdown>
    29       );
    39       );
    30     }
    40     }
    31 
    41 
    32     return (
    42     return (
    33       <NavItem onClick={this.onClickLogin} href="/login">Login</NavItem>
    43       <NavItem onClick={this.onClickLogin} href="/login">Login</NavItem>
    65     isAuthenticated: state.get('isAuthenticated'),
    75     isAuthenticated: state.get('isAuthenticated'),
    66     currentUser: state.get('currentUser'),
    76     currentUser: state.get('currentUser'),
    67   };
    77   };
    68 }
    78 }
    69 
    79 
    70 export default connect(mapStateToProps)(AppNavbar);
    80 function mapDispatchToProps(dispatch) {
       
    81   return {
       
    82     authActions: bindActionCreators(authActions, dispatch),
       
    83   }
       
    84 }
       
    85 
       
    86 export default connect(mapStateToProps, mapDispatchToProps)(AppNavbar);