Browse Source

created logout for user

Tanya Sashyna 5 years ago
parent
commit
208c0ac547

+ 4 - 0
src/actionTypes/actionTypes.js

@@ -46,5 +46,9 @@ export const POST_REGISTRATION_EVENT = "POST_REGISTRATION_EVENT";
 export const POST_REGISTRATION_EVENT_SUCCESS = "POST_REGISTRATION_EVENT_SUCCESS";
 export const POST_REGISTRATION_EVENT_ERROR = "POST_REGISTRATION_EVENT_ERROR";
 
+export const GET_LOGOUT_USER = "GET_LOGOUT_USER";
+export const GET_LOGOUT_USER_SUCCESS = "GET_LOGOUT_USER_SUCCESS";
+export const GET_LOGOUT_USER_ERROR = "GET_LOGOUT_USER_ERROR";
+
 
 // export const PHOTOGALARY_ONCHAGE = "PHOTOGALARY_ONCHAGE";

+ 7 - 0
src/actions/login.js

@@ -34,4 +34,11 @@ export const postLoginSubmit = payload => {
             error => dispatch(postLoginError(error))
         )
     }
+}
+
+export const writeLocalStorage = user => {
+    localStorage.setItem(
+        "user",
+        JSON.stringify(user)
+    )
 }

+ 35 - 0
src/actions/logout.js

@@ -0,0 +1,35 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const getLogoutUser = payload => ({
+    type: types.GET_LOGOUT_USER,
+    payload
+});
+
+export const getLogoutUserSuccess = payload => ({
+    type: types.GET_LOGOUT_USER_SUCCESS,
+    payload
+});
+
+export const getLogoutUserError = payload => ({
+    type: types.GET_LOGOUT_USER_ERROR,
+    payload
+});
+
+export const getLogoutUserSubmit = () => {
+    return dispatch => {
+        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/auth/logout")
+        console.log('getLogoutUserSubmit');
+
+        dispatch(getLogoutUser())
+
+        promise.then(
+            data => data.json().then(data => dispatch(getLogoutUserSuccess(data))),
+            error => dispatch(getLogoutUserError(error))
+        )
+    }
+}
+
+export const clearLocalStorage = () => {
+    localStorage.removeItem('user');
+    document.location.reload(true);
+}

+ 7 - 12
src/components/sidebar/Sidebar.js

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 
 import { showSidebar } from "../../actions/show-sidebar";
+import { getLogoutUserSubmit } from "../../actions/logout";
 
 import './sidebar.scss';
 
@@ -35,14 +36,8 @@ const siteMenu = [
 ];
 
 export class Sidebar extends React.Component {
-    logout(e) {
-        localStorage.removeItem('showProfile');
-        document.location.reload(true);
-    }
-
     render() {
-        //console.log(this.props)
-	    const { showSidebar, showSidebarFlag } = this.props;
+	    const { showSidebar, showSidebarFlag, getLogoutUserSubmit } = this.props;
         return (
             <div className={ !showSidebarFlag ? 'menu close' : 'menu' }>
                 <nav>
@@ -53,7 +48,7 @@ export class Sidebar extends React.Component {
                     </div>
                     <ul>
 						{
-                            localStorage.showProfile && <li><Link to="/profile">Profile</Link></li>
+                            localStorage.user && <li><Link to="/profile">Profile</Link></li>
 						}
 						
                         {
@@ -64,11 +59,11 @@ export class Sidebar extends React.Component {
                             )
                         }
 						{
-                            !localStorage.showProfile && <li><Link to="/login">Login</Link></li>
+                            !localStorage.user && <li><Link to="/login">Login</Link></li>
 						}
                         {
-                            localStorage.showProfile && <li>
-                                <button className="logout" onClick={this.logout}>
+                            localStorage.user && <li>
+                                <button className="logout" onClick={getLogoutUserSubmit}>
                                     <i className="fa fa-sign-out"></i>
                                 </button>
                             </li>
@@ -94,5 +89,5 @@ const mapStateToProps = state => {
 
 export default connect(
     mapStateToProps,
-    { showSidebar }
+    { showSidebar, getLogoutUserSubmit }
 )(Sidebar);

+ 1 - 3
src/conteiners/eventCard/EventCard.js

@@ -74,9 +74,7 @@ export class EventCard extends React.Component {
                                 {
                                     event.map && <div className="map-wrap">
                                         {/* click open pop-up with map*/}
-                                        <a href="#">
-                                            <img src={event.map} alt="map" />
-                                        </a>
+                                        <img src={event.map} alt="map" />
                                     </div>
                                 }
 

+ 3 - 1
src/reducers/combineReducers.js

@@ -7,6 +7,7 @@ import login from "./login";
 import registration from "./registration";
 import getEvents from "./getAllEvents";
 import photogalaryReducer from "./photogalaryReducer"
+import logout from "./logout";
 
 export default combineReducers({
 	form: formReducer,
@@ -15,5 +16,6 @@ export default combineReducers({
     registration,
     getEvents,
     sidebar,
-    photogalaryReducer
+    photogalaryReducer,
+    logout
 });

+ 5 - 10
src/reducers/login.js

@@ -1,8 +1,9 @@
 import * as types from "../actionTypes/actionTypes";
+import { writeLocalStorage } from "../actions/login";
 
 const initialState = {
     user: {},
-	showProfile: false
+    showProfile: false
 }
 
 export default (state = initialState, action) => {
@@ -12,14 +13,8 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_SUCCESS_LOGIN: {
-            //action.payload.message
-            console.log('user:', action.payload.user);
-            //localStorage.setItem('userName', `${action.payload.user.name}`);
-            localStorage.setItem('showProfile', "true");
-            localStorage.setItem(
-                "user",
-                JSON.stringify(action.payload.user)
-            )
+            writeLocalStorage(action.payload.user);
+            
             return {
                 ...state,
                 user: action.payload.user,
@@ -28,7 +23,7 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_ERROR_LOGIN: {
-            console.log('error');
+            console.log('error', action.payload.message);
             return state;
         }
 

+ 29 - 0
src/reducers/logout.js

@@ -0,0 +1,29 @@
+import * as types from "../actionTypes/actionTypes";
+import { clearLocalStorage } from "../actions/logout";
+
+const initialState = {
+    logOut: false
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.GET_LOGOUT_USER: {
+            return state;
+        }
+
+        case types.GET_LOGOUT_USER_SUCCESS: {
+            //console.log('logout',action.payload.logOut);
+            clearLocalStorage();
+            
+            return state
+        }
+
+        case types.GET_LOGOUT_USER_ERROR: {
+            console.log('error');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}