Implement logout.
authorAlexandre Segura <mex.zktk@gmail.com>
Mon, 19 Jun 2017 15:36:52 +0200
changeset 52 96f8a4a59bd9
parent 51 08d46c730397
child 53 d8588379529e
Implement logout.
client/src/actions/authActions.js
client/src/components/Navbar.js
client/src/constants/actionTypes.js
client/src/reducers/authReducer.js
--- a/client/src/actions/authActions.js	Mon Jun 19 15:05:36 2017 +0200
+++ b/client/src/actions/authActions.js	Mon Jun 19 15:36:52 2017 +0200
@@ -7,3 +7,9 @@
     password
   };
 }
+
+export const logout = () => {
+  return {
+    type: types.AUTH_LOGOUT
+  };
+}
--- a/client/src/components/Navbar.js	Mon Jun 19 15:05:36 2017 +0200
+++ b/client/src/components/Navbar.js	Mon Jun 19 15:36:52 2017 +0200
@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 // import logo from './logo.svg';
-import { Navbar, Nav, NavItem } from 'react-bootstrap';
+import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
+import * as authActions from '../actions/authActions';
 
 class AppNavbar extends Component {
 
@@ -21,11 +23,19 @@
     this.props.history.push('/login');
   }
 
+  onClickLogout = (e) => {
+    e.preventDefault();
+    this.props.authActions.logout();
+  }
+
   renderLogin() {
 
     if (this.props.currentUser) {
       return (
-        <NavItem>{ this.props.currentUser.username }</NavItem>
+        <NavDropdown title={ this.props.currentUser.username } id="user-dropdown">
+          <MenuItem>Settings</MenuItem>
+          <MenuItem onClick={this.onClickLogout}>Logout</MenuItem>
+        </NavDropdown>
       );
     }
 
@@ -67,4 +77,10 @@
   };
 }
 
-export default connect(mapStateToProps)(AppNavbar);
+function mapDispatchToProps(dispatch) {
+  return {
+    authActions: bindActionCreators(authActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AppNavbar);
--- a/client/src/constants/actionTypes.js	Mon Jun 19 15:05:36 2017 +0200
+++ b/client/src/constants/actionTypes.js	Mon Jun 19 15:36:52 2017 +0200
@@ -16,3 +16,4 @@
 export const AUTH_LOGIN_ERROR = 'AUTH_LOGIN_ERROR';
 export const AUTH_STORE_TOKEN_ASYNC = 'AUTH_STORE_TOKEN_ASYNC';
 export const AUTH_STORE_TOKEN = 'AUTH_STORE_TOKEN';
+export const AUTH_LOGOUT = 'AUTH_LOGOUT';
--- a/client/src/reducers/authReducer.js	Mon Jun 19 15:05:36 2017 +0200
+++ b/client/src/reducers/authReducer.js	Mon Jun 19 15:36:52 2017 +0200
@@ -9,6 +9,9 @@
 
 export const currentUser = (state = null, action) => {
   switch (action.type) {
+    case types.AUTH_LOGOUT:
+      localStorage.removeItem('currentUser');
+      return null;
     case types.AUTH_LOGIN_SUCCESS:
       return action.user;
     default:
@@ -18,6 +21,9 @@
 
 export const token = (state = null, action) => {
   switch (action.type) {
+    case types.AUTH_LOGOUT:
+      localStorage.removeItem('token');
+      return null;
     case types.AUTH_STORE_TOKEN:
       return action.token;
     default: