MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

drop down fix

Browse Source
This commit is contained in:
victorAnumudu
2024-12-07 07:10:08 +01:00
parent 73ca831e1a
commit 943818aafa
8 changed files with 111 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2
View File
@@ -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
.env.development
+2
View File
@@ -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
.env.production
+3
View File
@@ -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
src/App.js
+1 -1
View File
@@ -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';
src/component/authorization/UserExist.jsx
+67 -1
View File
@@ -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(()=>{
src/component/layout/layoutcom/UserHeader.jsx
+9 -10
View File
@@ -37,10 +37,10 @@ export default function UserHeader(){
{/* ul className="navbar-nav nav-right ml-auto dropdown" */}
<ul className="navbar-nav nav-right ml-auto">
{/* <li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a href="#" className="nav-link dropdown-toggle" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i className="ti ti-email"></i>
</a>
<div className="dropdown-menu extended animated fadeIn" aria-labelledby="navbarDropdown">
<div className="dropdown-menu extended animated fadeIn" aria-labelledby="dropdownMenuLink">
<ul>
<li className="dropdown-header bg-gradient p-4 text-white text-left">Messages
<label className="label label-info label-round">6</label>
@@ -134,16 +134,16 @@ export default function UserHeader(){
</li>
</ul>
</div>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</li> */}
{/* <li className="nav-item dropdown">
<a href="#" className="nav-link dropdown-toggle" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i className="fe fe-bell"></i>
<span className="notify">
<span className="blink"></span>
<span className="dot"></span>
</span>
</a>
<div className="dropdown-menu extended animated fadeIn" aria-labelledby="navbarDropdown">
<div className="dropdown-menu extended animated fadeIn" aria-labelledby="dropdownMenuLink">
<ul>
<li className="dropdown-header bg-gradient p-4 text-white text-left">Notifications
<a href="#" className="float-right btn btn-square btn-inverse-light btn-xs m-0">
@@ -234,8 +234,8 @@ export default function UserHeader(){
</li>
</ul>
</div>
</li>
<li className="nav-item">
</li> */}
{/* <li className="nav-item">
<a className="nav-link search" href="#">
<i className="ti ti-search"></i>
</a>
@@ -254,8 +254,7 @@ export default function UserHeader(){
</div>
</div>
</li> */}
<li className="nav-item user-profile dropdown">
<li className="nav-item user-profile">
<a href="#" className="nav-link dropdown-toggle" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<img src={getImage('avtar/02.jpg')} alt="avtar-img" />
<span className="bg-success user-status"></span>
src/css/partials/_header.scss
+12 -7
View File
@@ -588,13 +588,18 @@
left: 0px;
}
}
.show {
.dropdown-menu{
margin-top: 0;
visibility: visible;
opacity: 1;
}
}
.show + .dropdown-menu{
margin-top: 0;
visibility: visible;
opacity: 1;
}
// .show {
// .dropdown-menu{
// margin-top: 0;
// visibility: visible;
// opacity: 1;
// }
// }
}
.nav-item.dropdown, .nav-item.dropup {
@include mobile-landscape {
src/utils/debounceFunction.js
+15
View File
@@ -0,0 +1,15 @@
function debounceFunction(func, delay) {
let timer;
return function(...args) {
// Clear the previous timer if the function is called before the delay
clearTimeout(timer);
// Set a new timer to execute the function after the specified delay
timer = setTimeout(() => {
func(...args);
}, delay);
};
}
export default debounceFunction