logout

src/actions/auth.js

 import ax from 'axios';
-import { GET_USERDATA, PROFILE_CHANGE, GROUP_CHANGE } from './types';
+import { GET_USERDATA, PROFILE_CHANGE, GROUP_CHANGE, LOGOUT } from './types';
 
 const axios = ax.create({
   xsrfCookieName: 'csrftoken',
@@ -45,3 +45,12 @@ export const submitRegistration = ({
     }
   }
 );
+
+export const logout = () => (
+  async (dispatch) => {
+    const response = await axios.get('/api/v1/logout/');
+    if (response) {
+      dispatch({ action: LOGOUT });
+    }
+  }
+);

src/components/Header.js

@@ -9,7 +9,7 @@ import {
   Image,
 } from 'semantic-ui-react';
 import { connect } from 'react-redux';
-import { getUserData } from '../actions';
+import { getUserData, logout } from '../actions';
 import KSZKlogo from './images/kszk_logo.svg';
 
 const FixedMenu = ({ user }) => (
@@ -31,7 +31,10 @@ const FixedMenu = ({ user }) => (
         <Menu.Item className='item'>
           {
             user.id ?
-              <Button as={Link} to='/profile'>Profilom</Button>
+              <div>
+                <Button as={Link} to='/profile'>Profilom</Button>
+                <Button onClick={() => this.props.logout()}>Kijelentkezés</Button>
+              </div>
             :
               <Button href='/api/v1/login/authsch/'>Bejelentkezés</Button>
           }
@@ -114,4 +117,4 @@ const mapStateToProps = ({ user }) => ({
   user,
 });
 
-export default connect(mapStateToProps, { getUserData })(Header);
+export default connect(mapStateToProps, { getUserData, logout })(Header);

src/reducers/UserReducer.js

@@ -2,6 +2,7 @@ import {
   GET_USERDATA,
   PROFILE_CHANGE,
   GROUP_CHANGE,
+  LOGOUT,
 } from '../actions/types';
 
 const INITIAL_STATE = {
@@ -15,6 +16,8 @@ export default (state = INITIAL_STATE, action) => {
       return { ...state, [action.target]: action.payload };
     case GROUP_CHANGE:
       return { ...state, groups: action.payload };
+    case LOGOUT:
+      return INITIAL_STATE;
     default:
       return state;
   }