auth changes => logOut is done

src/actions/auth/signIn.js

@@ -12,5 +12,8 @@ export const signInFailure = error => ({
     type: actionTypes.SIGN_IN_REQUEST_FAILURE,
     error
 });
+export const signInStateZeroing = () => ({
+    type: actionTypes.SIGN_IN_STATE_ZEROING
+})
 
 export default signIn;

src/components/common/protectedRoute.js

@@ -15,9 +15,9 @@ const protectedRoute = ({ component: Component, activeToken, inactiveToken, acce
             try {
                 const user = decode(localStorage.getItem(storageKey));
                 activeToken(user.role);
-                if (user.exp < Date.now()*1000) {
+                {/* if (user.exp < Date.now()*1000) {
                     throw new Error('Date expired');
-                }
+                } */}
 
                 if (access === 'admin-only' && !user.role) {
                     throw new Error('Permission Denied')

src/components/public/Header.js

@@ -1,19 +1,33 @@
 import React, { PureComponent } from 'react';
 import { Link, withRouter, Redirect } from "react-router-dom";
 import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import axios from 'axios';
+
 import storageKey from './../../utils/storageKey';
+import { signInStateZeroing } from './../../actions/auth/signIn';
+import { LOG_OUT_URL } from './../../constants/auth';
 
 import * as routes from '../../constants/routes';
-import logOut from '../../actions/auth/logOut';
 
 //pure component + make storage check an action -> connect router
 class Header extends PureComponent {
     handleLogOut = () => {
-        const { history: { push } } = this.props;
+        console.log(this.props)
+        const { history, zeroState } = this.props;
+
+        axios.get(LOG_OUT_URL, {})
+            .then(() => {
+                console.log('request was succesfull')
+                localStorage.removeItem(storageKey);
+                zeroState();
+                history.push('/sign-in');
+            })
+            .catch(e => alert('Sorry, something bad happened, try log out later \n' + e.message));
     }
 
     render() {
-        const { role, logOutStatus } = this.props;
+        const { role } = this.props;
 
         return (
             <nav className="navbar navbar-expand-lg navbar-dark bg-dark p-3">
@@ -87,5 +101,8 @@ class Header extends PureComponent {
 const mapStateToProps = state => ({
     role: state.tokenCheckout.role,
 });
+const mapDispatchToProps = dispatch => bindActionCreators({
+    zeroState: signInStateZeroing
+}, dispatch)
 
-export default withRouter(connect(mapStateToProps, null)(Header));
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header));

src/components/public/signIn/index.js

@@ -7,32 +7,32 @@ import { Redirect } from 'react-router-dom'
 import Spinner from './../../common/spinner';
 import signIn from './../../../actions/auth/signIn';
 
+
+
 const SignIn = ({ signIn, user }) => {
-    const someShit = user.isFetching
-        ?
-        <Spinner />
-        : user.data
+    return (
+        user.isFetching
             ?
-            <Redirect to='/' />
-            : user.error
+            <Spinner />
+            : user.data
                 ?
-                (
-                    <React.Fragment>
-                        <Form signIn={signIn} requestError={user.error} />
-                    </React.Fragment>
-
-                )
-                :
-                <Form signIn={signIn} />
-
-    return someShit
-
+                <Redirect to='/' />
+                : user.error
+                    ?
+                    (
+                        <React.Fragment>
+                            <Form signIn={signIn} requestError={user.error} />
+                        </React.Fragment>
+                    )
+                    :
+                    <Form signIn={signIn} />
+    )
 }
 
 
 
 const mapStateToProps = state => ({
-    user: state.signIn
+    user: state.signIn,
 });
 const mapDispatchToProps = dispatch => bindActionCreators({
     signIn

src/constants/auth.js

@@ -2,6 +2,7 @@ export const SIGN_IN_URL = 'https://test-app-a-level.herokuapp.com/auth/login';
 export const SIGN_IN_REQUEST = 'SIGN_IN_REQUEST';
 export const SIGN_IN_REQUEST_SUCCESS = 'SIGN_IN_REQUEST_SUCCESS';
 export const SIGN_IN_REQUEST_FAILURE = 'SIGN_IN_REQUEST_FAILURE';
+export const SIGN_IN_STATE_ZEROING = 'SIGN_IN_STATE_ZEROING';
 
 export const SIGN_UP_URL = 'https://test-app-a-level.herokuapp.com/auth/register';
 export const SIGN_UP_REQUEST = 'SIGN_UP_REQUEST';

src/reducers/auth/signIn.js

@@ -11,23 +11,24 @@ export default function signInReducer(state = initialState.signIn, {payload, typ
             }
         }
         case actionTypes.SIGN_IN_REQUEST_SUCCESS: {
-            const { user, token } = payload;
+            const { user } = payload;
 
             return {
                 ...state,
                 isFetching: false,
                 data: user,
-                token
             }
         }
         case actionTypes.SIGN_IN_REQUEST_FAILURE: {
-
             return {
                 ...state,
                 isFetching: false,
                 error
             }
         }
+        case actionTypes.SIGN_IN_STATE_ZEROING: {
+            return initialState.signIn
+        }
         default: {
             return state;
         }

src/router.js

@@ -1,6 +1,5 @@
 import React, { Suspense } from "react";
-import { Switch, withRouter } from "react-router-dom";
-import { connect } from 'react-redux';
+import { Switch } from "react-router-dom";
 
 import ProtectedRoute from './components/common/protectedRoute';
 import config from './configs/routerConfig';
@@ -8,35 +7,23 @@ import config from './configs/routerConfig';
 import Header from './components/public/Header';
 import Spinner from './components/common/spinner';
 
-class Router extends React.Component {
-    render() {
-        const { user } = this.props;
-        // TODO: add footer
-        return (
-            <div className="app">
-                <Header />
-                <Suspense fallback={<Spinner />}>
-                    <Switch>
-                        {config.map(route =>
-                            <ProtectedRoute
-                                path={route.path}
-                                component={route.component}
-                                access={route.access}
-                                user={user}
-                                key={route.path}
-                                exact
-                            />
-                        )}
-                    </Switch>
-                </Suspense>
-            </div>
-        )
-    }
-}
+const router = props => (
+    <div className="app">
+        <Header />
+        <Suspense fallback={<Spinner />}>
+            <Switch>
+                {config.map(route =>
+                    <ProtectedRoute
+                        path={route.path}
+                        component={route.component}
+                        access={route.access}
+                        key={route.path}
+                        exact
+                    />
+                )}
+            </Switch>
+        </Suspense>
+    </div>
+)
 
-const mapStateToProps = state => ({
-    user: state.signIn
-})
-// const mapDispatchToProps = dispatch => bindActionCreators({ tokenAuth }, dispatch);
-
-export default withRouter(connect(mapStateToProps, null)(Router));
+export default router;