--- 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>