From 943818aafaae740fbc87f2d48e4b3610bb38d8d2 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 7 Dec 2024 07:10:08 +0100 Subject: [PATCH] drop down fix --- .env | 2 + .env.development | 2 + .env.production | 3 + src/App.js | 2 +- src/component/authorization/UserExist.jsx | 68 ++++++++++++++++++- src/component/layout/layoutcom/UserHeader.jsx | 19 +++--- src/css/partials/_header.scss | 19 ++++-- src/utils/debounceFunction.js | 15 ++++ 8 files changed, 111 insertions(+), 19 deletions(-) create mode 100644 src/utils/debounceFunction.js diff --git a/.env b/.env index dffaf48..dbedc28 100644 --- a/.env +++ b/.env @@ -4,4 +4,6 @@ REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com" REACT_APP_MAIN_API="https://dev-api.mermsemr.com" REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com" +# Inactivity timeout/logout AT 10MINS +REACT_APP_TIMEOUT=600000 diff --git a/.env.development b/.env.development index ad289a2..60fab15 100644 --- a/.env.development +++ b/.env.development @@ -4,3 +4,5 @@ REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com" REACT_APP_MAIN_API="https://dev-api.mermsemr.com" REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com" +# Inactivity timeout/logout AT 10MINS +REACT_APP_TIMEOUT=600000 diff --git a/.env.production b/.env.production index c9b51b9..38699d4 100644 --- a/.env.production +++ b/.env.production @@ -3,3 +3,6 @@ REACT_APP_NODE_ENV="production" REACT_APP_SOCKET_URL="https://socket.mermsemr.com" REACT_APP_MAIN_API="https://api.mermsemr.com" REACT_APP_MEDIA_SERVER="https://media.mermsemr.com" + +# Inactivity timeout/logout AT 10MINS +REACT_APP_TIMEOUT=600000 \ No newline at end of file diff --git a/src/App.js b/src/App.js index 56f3498..aa5ba72 100644 --- a/src/App.js +++ b/src/App.js @@ -3,9 +3,9 @@ import { Routes, Route } from 'react-router-dom'; import UserExist from './component/authorization/UserExist'; import AuthLayout from './component/auth/AuthLayout'; +import siteLinks from './links/siteLinks'; import LoginPage from './views/LoginPage'; -import siteLinks from './links/siteLinks'; import SignupPage from './views/SignupPage'; import ForgetpwdPage from './views/ForgetpwdPage'; import HomePage from './views/HomePage'; diff --git a/src/component/authorization/UserExist.jsx b/src/component/authorization/UserExist.jsx index c742ac3..9af615e 100644 --- a/src/component/authorization/UserExist.jsx +++ b/src/component/authorization/UserExist.jsx @@ -1,12 +1,78 @@ import React, { useEffect, useState } from 'react' -import { Outlet } from 'react-router-dom' +import { Outlet, useNavigate } from 'react-router-dom' import MainLoaderBS from '../loaders/MainLoaderBS' import Layout from '../layout/Layout' +import siteLinks from '../../links/siteLinks' + +import debounceFunction from '../../utils/debounceFunction' export default function UserExist() { + const navigate = useNavigate() + const [loading, setLoading] = useState(true) + + const [lastActivityTime, setLastActivityTime] = useState(Date.now()); // HOLDS THE INITIAL TIME USER LOGS IN + + // Function to log the user out + const logoutUser = () => { + localStorage.clear() + navigate(siteLinks.login) + }; + + // Function to reset the activity time + const resetTimer = () => { + debounceFunction(setLastActivityTime(Date.now()), 1000) + }; + + useEffect(()=>{ + const timer = setTimeout(()=>{ + if(Date.now() - Number(lastActivityTime) >= Number(process.env.REACT_APP_TIMEOUT)){ + logoutUser() + } + }, Number(process.env.REACT_APP_TIMEOUT)) + + // Listen for activity events + const events = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart']; + + // Adding event listeners + events.forEach(event => { + window.addEventListener(event, resetTimer); + }); + + return () => { + clearTimeout(timer) + events.forEach(event => { + window.removeEventListener(event, resetTimer); + }) + } + },[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(()=>{ const timer = setTimeout(()=>{ diff --git a/src/component/layout/layoutcom/UserHeader.jsx b/src/component/layout/layoutcom/UserHeader.jsx index 56d9f20..bae38f8 100644 --- a/src/component/layout/layoutcom/UserHeader.jsx +++ b/src/component/layout/layoutcom/UserHeader.jsx @@ -37,10 +37,10 @@ export default function UserHeader(){ {/* ul className="navbar-nav nav-right ml-auto dropdown" */}