client/src/components/Navbar.js
changeset 65 14989b339e5d
parent 62 b2514a9bcd49
child 81 a6bd1aaddc34
--- a/client/src/components/Navbar.js	Tue Jun 20 17:54:02 2017 +0200
+++ b/client/src/components/Navbar.js	Tue Jun 20 19:04:42 2017 +0200
@@ -6,6 +6,37 @@
 import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
 import * as authActions from '../actions/authActions';
 
+const LoginNav = ({isAuthenticated, currentUser, history, authActions}) => {
+
+  const onClickSettings = (e) => {
+    e.preventDefault();
+    history.push('/settings');
+  }
+
+  const onClickLogout = (e) => {
+    e.preventDefault();
+    authActions.logout();
+  }
+
+  const onClickLogin = (e) => {
+    e.preventDefault();
+    history.push('/login');
+  }
+
+
+  if (isAuthenticated) {
+    return (
+      <NavDropdown title={ currentUser.get('username') } id="user-dropdown">
+        <MenuItem onClick={onClickSettings}>Settings</MenuItem>
+        <MenuItem onClick={onClickLogout}>Logout</MenuItem>
+      </NavDropdown>
+    );
+  }
+  return (
+    <NavItem onClick={onClickLogin} href="/login">Login</NavItem>
+  );
+}
+
 class AppNavbar extends Component {
 
   onClickHome = (e) => {
@@ -18,37 +49,6 @@
     this.props.history.push('/sessions');
   }
 
-  onClickLogin = (e) => {
-    e.preventDefault();
-    this.props.history.push('/login');
-  }
-
-  onClickSettings = (e) => {
-    e.preventDefault();
-    this.props.history.push('/settings');
-  }
-
-  onClickLogout = (e) => {
-    e.preventDefault();
-    this.props.authActions.logout();
-  }
-
-  renderLogin() {
-
-    if (this.props.isAuthenticated) {
-      return (
-        <NavDropdown title={ this.props.currentUser.get('username') } id="user-dropdown">
-          <MenuItem onClick={this.onClickSettings}>Settings</MenuItem>
-          <MenuItem onClick={this.onClickLogout}>Logout</MenuItem>
-        </NavDropdown>
-      );
-    }
-
-    return (
-      <NavItem onClick={this.onClickLogin} href="/login">Login</NavItem>
-    );
-  }
-
   render() {
     return (
       <Navbar fluid inverse fixedTop>
@@ -63,7 +63,7 @@
             <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
           </Nav>
           <Nav pullRight>
-            {this.renderLogin()}
+            <LoginNav {...this.props}/>
           </Nav>
         </Navbar.Collapse>
       </Navbar>