diff --git a/src/Pages/Profile/Profile.module.scss b/src/Pages/Profile/Profile.module.scss index da05233..bc6414f 100644 --- 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 index 8059fa0..46d68df 100644 --- 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 = () => { )} - +
+ + +
+ ); }; diff --git a/src/store/actions.js b/src/store/actions.js index 8cfe335..4703b2c 100644 --- 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 index 754b159..046bea1 100644 --- 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' \ No newline at end of file +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' \ No newline at end of file diff --git a/src/store/loginReducer.js b/src/store/loginReducer.js index 61030b6..e27704b 100644 --- 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; }