client/src/components/Navbar.js
changeset 65 14989b339e5d
parent 62 b2514a9bcd49
child 81 a6bd1aaddc34
equal deleted inserted replaced
64:aecde527900a 65:14989b339e5d
     3 import { connect } from 'react-redux';
     3 import { connect } from 'react-redux';
     4 import { bindActionCreators } from 'redux';
     4 import { bindActionCreators } from 'redux';
     5 // import logo from './logo.svg';
     5 // import logo from './logo.svg';
     6 import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
     6 import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
     7 import * as authActions from '../actions/authActions';
     7 import * as authActions from '../actions/authActions';
       
     8 
       
     9 const LoginNav = ({isAuthenticated, currentUser, history, authActions}) => {
       
    10 
       
    11   const onClickSettings = (e) => {
       
    12     e.preventDefault();
       
    13     history.push('/settings');
       
    14   }
       
    15 
       
    16   const onClickLogout = (e) => {
       
    17     e.preventDefault();
       
    18     authActions.logout();
       
    19   }
       
    20 
       
    21   const onClickLogin = (e) => {
       
    22     e.preventDefault();
       
    23     history.push('/login');
       
    24   }
       
    25 
       
    26 
       
    27   if (isAuthenticated) {
       
    28     return (
       
    29       <NavDropdown title={ currentUser.get('username') } id="user-dropdown">
       
    30         <MenuItem onClick={onClickSettings}>Settings</MenuItem>
       
    31         <MenuItem onClick={onClickLogout}>Logout</MenuItem>
       
    32       </NavDropdown>
       
    33     );
       
    34   }
       
    35   return (
       
    36     <NavItem onClick={onClickLogin} href="/login">Login</NavItem>
       
    37   );
       
    38 }
     8 
    39 
     9 class AppNavbar extends Component {
    40 class AppNavbar extends Component {
    10 
    41 
    11   onClickHome = (e) => {
    42   onClickHome = (e) => {
    12     e.preventDefault();
    43     e.preventDefault();
    14   }
    45   }
    15 
    46 
    16   onClickSessions = (e) => {
    47   onClickSessions = (e) => {
    17     e.preventDefault();
    48     e.preventDefault();
    18     this.props.history.push('/sessions');
    49     this.props.history.push('/sessions');
    19   }
       
    20 
       
    21   onClickLogin = (e) => {
       
    22     e.preventDefault();
       
    23     this.props.history.push('/login');
       
    24   }
       
    25 
       
    26   onClickSettings = (e) => {
       
    27     e.preventDefault();
       
    28     this.props.history.push('/settings');
       
    29   }
       
    30 
       
    31   onClickLogout = (e) => {
       
    32     e.preventDefault();
       
    33     this.props.authActions.logout();
       
    34   }
       
    35 
       
    36   renderLogin() {
       
    37 
       
    38     if (this.props.isAuthenticated) {
       
    39       return (
       
    40         <NavDropdown title={ this.props.currentUser.get('username') } id="user-dropdown">
       
    41           <MenuItem onClick={this.onClickSettings}>Settings</MenuItem>
       
    42           <MenuItem onClick={this.onClickLogout}>Logout</MenuItem>
       
    43         </NavDropdown>
       
    44       );
       
    45     }
       
    46 
       
    47     return (
       
    48       <NavItem onClick={this.onClickLogin} href="/login">Login</NavItem>
       
    49     );
       
    50   }
    50   }
    51 
    51 
    52   render() {
    52   render() {
    53     return (
    53     return (
    54       <Navbar fluid inverse fixedTop>
    54       <Navbar fluid inverse fixedTop>
    61         <Navbar.Collapse>
    61         <Navbar.Collapse>
    62           <Nav>
    62           <Nav>
    63             <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
    63             <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
    64           </Nav>
    64           </Nav>
    65           <Nav pullRight>
    65           <Nav pullRight>
    66             {this.renderLogin()}
    66             <LoginNav {...this.props}/>
    67           </Nav>
    67           </Nav>
    68         </Navbar.Collapse>
    68         </Navbar.Collapse>
    69       </Navbar>
    69       </Navbar>
    70     );
    70     );
    71   }
    71   }