From c47efaaadc88fd962017ea8e806e363b9374e4c8 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 10 Dec 2024 10:37:43 +0100 Subject: [PATCH] logout function added --- package.json | 3 ++ src/component/auth/Login2.jsx | 23 ++++++++-- src/component/authorization/UserExist.jsx | 43 ++++++++----------- src/component/layout/layoutcom/UserHeader.jsx | 10 ++++- src/component/layout/layoutcom/UserMenu.jsx | 11 ++++- src/index.js | 9 +++- src/store/UserDetails.js | 20 +++++++++ src/store/store.js | 10 +++++ 8 files changed, 96 insertions(+), 33 deletions(-) create mode 100644 src/store/UserDetails.js create mode 100644 src/store/store.js diff --git a/package.json b/package.json index c2a9685..2084336 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@popperjs/core": "^2.11.8", + "@reduxjs/toolkit": "^2.4.0", "@tanstack/react-query": "^5.62.3", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", @@ -15,8 +16,10 @@ "react-apexcharts": "^1.7.0", "react-dom": "^18.3.1", "react-icons": "^5.4.0", + "react-redux": "^9.1.2", "react-router-dom": "^7.0.2", "react-scripts": "5.0.1", + "redux": "^5.0.1", "sass": "^1.82.0", "web-vitals": "^2.1.4" }, diff --git a/src/component/auth/Login2.jsx b/src/component/auth/Login2.jsx index 623d72d..af5dbec 100644 --- a/src/component/auth/Login2.jsx +++ b/src/component/auth/Login2.jsx @@ -1,14 +1,18 @@ import React, { useState } from 'react' import { useMutation } from '@tanstack/react-query' +import { useDispatch } from 'react-redux' import LoginImg from '../../assets/bg/login.svg' import { Link, useNavigate } from 'react-router-dom' import siteLinks from '../../links/siteLinks' import { loginUser } from '../../services/services' +import { updateUserDetails } from '../../store/UserDetails' export default function Login() { + const dispatch = useDispatch() + const navigate = useNavigate() const [fields, setFields] = useState({ @@ -17,7 +21,6 @@ export default function Login() { }) const handleChange = ({target:{name, value}}) => { - console.log('working') setFields(prev => ({...prev, [name]:value})) } @@ -27,10 +30,15 @@ export default function Login() { }, onError: (error) => { console.log('error', error) - }, - onSuccess: () => { - navigate('/dash') // later add redux to dispatch state + onSuccess: (res) => { + const {token} = res?.data?.data + if(token){ + localStorage.setItem('token', token) + const data = {token} + dispatch(updateUserDetails({ ...data })); + navigate('/dash') // later add redux to dispatch state + } } }) @@ -71,6 +79,13 @@ export default function Login() { Forgot Password ? + {login.error && + <> +
+

Unable to login, try agian!

+
+ + }
diff --git a/src/component/authorization/UserExist.jsx b/src/component/authorization/UserExist.jsx index 9af615e..7a64744 100644 --- a/src/component/authorization/UserExist.jsx +++ b/src/component/authorization/UserExist.jsx @@ -1,5 +1,7 @@ import React, { useEffect, useState } from 'react' +import { useDispatch, useSelector } from "react-redux"; import { Outlet, useNavigate } from 'react-router-dom' +import { updateUserDetails } from "../../store/UserDetails"; import MainLoaderBS from '../loaders/MainLoaderBS' import Layout from '../layout/Layout' import siteLinks from '../../links/siteLinks' @@ -12,8 +14,15 @@ export default function UserExist() { const navigate = useNavigate() const [loading, setLoading] = useState(true) + + const dispatch = useDispatch() const [lastActivityTime, setLastActivityTime] = useState(Date.now()); // HOLDS THE INITIAL TIME USER LOGS IN + + const { userDetails: { token }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active + + let loggedIn = token ? true : false; // variable to determine if user is logged in + // console.log('loggedIn', loggedIn) // Function to log the user out const logoutUser = () => { @@ -49,34 +58,20 @@ export default function UserExist() { } },[lastActivityTime]) - // Setting up event listeners for user activity - // useEffect(() => { - // // Listen for activity events - // const events = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart']; - - // // Adding event listeners - // events.forEach(event => { - // window.addEventListener(event, resetTimer); - // }); - - // // Start the timer initially - // // resetTimer(); - - // // Cleanup event listeners when the component unmounts - // return () => { - // events.forEach(event => { - // window.removeEventListener(event, resetTimer); - // }); - // // if (timer) { - // // clearTimeout(timer); - // // setTimer(null); - // // } - // }; - // }, []); useEffect(()=>{ + let token = localStorage.getItem('token') const timer = setTimeout(()=>{ + if(token && loggedIn){ setLoading(false) + }else if(token && !loggedIn){ + const data = {token} + dispatch(updateUserDetails({ ...data })); + setLoading(false) + // dispatch(updateUserDetails({ ...res.data })); + }else{ + navigate('auth/login') + } },1000) return () => clearTimeout(timer) diff --git a/src/component/layout/layoutcom/UserHeader.jsx b/src/component/layout/layoutcom/UserHeader.jsx index cfe54bf..ffeb083 100644 --- a/src/component/layout/layoutcom/UserHeader.jsx +++ b/src/component/layout/layoutcom/UserHeader.jsx @@ -1,5 +1,6 @@ import React from "react"; import getImage from "../../../utils/getImage"; +import { useNavigate } from "react-router-dom"; export default function UserHeader(){ @@ -18,6 +19,13 @@ export default function UserHeader(){ // e.preventDefault() // } + const navigate = useNavigate() + + const logout = () => { + localStorage.clear() + navigate('/login', {replace: true}) + } + return (