feat: logout (ilPhil#139)

add logout button on Profile page add logoutAction Co-authored-by: kastellai <[email protected]>
rebecca-xm · Feb 21, 2022 · a64c316 · a64c316
1 parent 9e50f1c
commit a64c316
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 7 deletions.
diff --git a/src/Pages/Profile/Profile.module.scss b/src/Pages/Profile/Profile.module.scss
@@ -96,4 +96,21 @@
       cursor: pointer;
     }
   }
+
+  .actions {
+    border-top: 1px solid #BF007F;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+
+    display: flex;
+    flex-direction: column;
+
+    button {
+      padding: 8px;
+      background-color: transparent;
+      border: 0px;
+      text-align: left;
+    }
+  }
 }
diff --git a/src/Pages/Profile/index.jsx b/src/Pages/Profile/index.jsx
@@ -7,11 +7,23 @@ import { GiCat, GiPartyPopper } from "react-icons/gi";
 import { FaHandSpock, FaSmoking } from "react-icons/fa";
 import RoomAd from "../../components/RoomAd";
 
+import { logoutAction } from './../../store/actions';
+
 const Profile = () => {
   const dispatch = useDispatch();
   const user = useSelector((state) => state.user);
   const loading = useSelector((state) => state.loading);
 
+  const logoutData = {
+    email: user.email,
+    token: user.token
+  };
+
+  const handleLogout = (e) => {
+    e.preventDefault()
+    dispatch(logoutAction(logoutData))
+  };
+
   const handleChar = (char) => {
     dispatch(
       changeChar(
@@ -113,7 +125,13 @@ const Profile = () => {
           </Link>
         )}
       </div>
-    </div>
+      <div className={styles.actions}>
+        <button>Modify your profile</button>
+        <button onClick={(e) => handleLogout(e)}>
+          Logout
+        </button>
+      </div>
+    </div >
   );
 };
 

diff --git a/src/store/actions.js b/src/store/actions.js
@@ -6,6 +6,9 @@ import {
   USER_UPDATE_REQUEST,
   USER_UPDATE_SUCCESS,
   USER_UPDATE_ERROR,
+  FETCH_LOGOUT_REQUEST,
+  FETCH_LOGOUT_SUCCESS,
+  FETCH_LOGOUT_ERROR
 } from "./constants";
 
 import { backend_URL } from "../libs/functions";
@@ -16,7 +19,7 @@ export const loginAction = (loginInput, setRedirect, setMessage) => {
     try {
       const { data } = await axios.post(backend_URL + "/login", loginInput);
       setRedirect("/list");
-      window.localStorage.setItem("roomatch", JSON.stringify({myId: data._id, token: data.token}));
+      window.localStorage.setItem("roomatch", JSON.stringify({ myId: data._id, token: data.token }));
       dispatch({ type: FETCH_LOGIN_SUCCESS, payload: data });
     } catch (e) {
       dispatch({ type: FETCH_LOGIN_ERROR, payload: e });
@@ -25,12 +28,25 @@ export const loginAction = (loginInput, setRedirect, setMessage) => {
   };
 };
 
+export const logoutAction = (logoutData) => {
+  return async (dispatch) => {
+    dispatch({ type: FETCH_LOGOUT_REQUEST });
+    try {
+      await axios.post(backend_URL + "/logout", logoutData);
+      window.localStorage.clear();
+      dispatch({ type: FETCH_LOGOUT_SUCCESS });
+    } catch (e) {
+      dispatch({ type: FETCH_LOGOUT_ERROR, payload: e });
+    }
+  };
+};
+
 export const restoreSession = (body, setRedirect) => {
   return async (dispatch) => {
     dispatch({ type: FETCH_LOGIN_REQUEST });
     try {
       const { data } = await axios.post(backend_URL + "/update", body);
-      window.localStorage.setItem("roomatch", JSON.stringify({myId: data._id, token: data.token}));
+      window.localStorage.setItem("roomatch", JSON.stringify({ myId: data._id, token: data.token }));
       setRedirect("/list");
       console.log(data)
       dispatch({ type: FETCH_LOGIN_SUCCESS, payload: data });
@@ -46,7 +62,7 @@ export const updateAction = (body) => {
     dispatch({ type: FETCH_LOGIN_REQUEST });
     try {
       const { data } = await axios.post(backend_URL + "/update", body);
-      window.localStorage.setItem("roomatch", JSON.stringify({myId: data._id, token: data.token}));
+      window.localStorage.setItem("roomatch", JSON.stringify({ myId: data._id, token: data.token }));
       dispatch({ type: FETCH_LOGIN_SUCCESS, payload: data });
     } catch (e) {
       dispatch({ type: FETCH_LOGIN_ERROR, payload: e });
@@ -59,7 +75,7 @@ export const newRoom = (body, setRedirect) => {
     dispatch({ type: FETCH_LOGIN_REQUEST });
     try {
       const { data } = await axios.post(backend_URL + "/rooms", body);
-      window.localStorage.setItem("roomatch", JSON.stringify({myId: data._id, token: data.token}));
+      window.localStorage.setItem("roomatch", JSON.stringify({ myId: data._id, token: data.token }));
       setRedirect("/profile");
       dispatch({ type: FETCH_LOGIN_SUCCESS, payload: data });
     } catch (e) {
@@ -73,7 +89,7 @@ export const deleteRoom = (roomId) => {
     dispatch({ type: FETCH_LOGIN_REQUEST });
     try {
       const { data } = await axios.delete(backend_URL + "/rooms/" + roomId);
-      window.localStorage.setItem("roomatch", JSON.stringify({myId: data._id, token: data.token}));
+      window.localStorage.setItem("roomatch", JSON.stringify({ myId: data._id, token: data.token }));
       dispatch({ type: FETCH_LOGIN_SUCCESS, payload: data });
     } catch (e) {
       dispatch({ type: FETCH_LOGIN_ERROR, payload: e });

diff --git a/src/store/constants.js b/src/store/constants.js
@@ -7,4 +7,7 @@ export const USER_UPDATE_SUCCESS = 'USER_UPDATE_SUCCESS'
 export const USER_UPDATE_ERROR = 'USER_UPDATE_ERROR'
 export const TOKEN_UPDATE_REQUEST = 'TOKEN_UPDATE_REQUEST'
 export const TOKEN_UPDATE_SUCCESS = 'TOKEN_UPDATE_SUCCESS'
-export const TOKEN_UPDATE_ERROR = 'TOKEN_UPDATE_ERROR'
+export const TOKEN_UPDATE_ERROR = 'TOKEN_UPDATE_ERROR'
+export const FETCH_LOGOUT_REQUEST = 'FETCH_LOGOUT_REQUEST'
+export const FETCH_LOGOUT_SUCCESS = 'FETCH_LOGOUT_SUCCESS'
+export const FETCH_LOGOUT_ERROR = 'FETCH_LOGOUT_ERROR'
diff --git a/src/store/loginReducer.js b/src/store/loginReducer.js
@@ -5,6 +5,9 @@ import {
   USER_UPDATE_REQUEST,
   USER_UPDATE_SUCCESS,
   USER_UPDATE_ERROR,
+  FETCH_LOGOUT_REQUEST,
+  FETCH_LOGOUT_SUCCESS,
+  FETCH_LOGOUT_ERROR
 } from "./constants";
 
 const defaultStore = {
@@ -54,6 +57,25 @@ const loginReducer = (state = defaultStore, action) => {
         loading: false,
       };
 
+    case FETCH_LOGOUT_REQUEST:
+      return {
+        logged: false,
+        loading: false,
+      };
+
+    case FETCH_LOGOUT_SUCCESS:
+      return {
+        logged: false,
+        loading: false,
+      };
+
+    case FETCH_LOGOUT_ERROR:
+      return {
+        logged: true,
+        loading: false,
+        error: action.payload,
+      };
+
     default:
       return state;
   }