drop down fix

.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
 

.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

.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

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';

src/component/authorization/UserExist.jsx

@@ -1,13 +1,79 @@
 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(()=>{
           setLoading(false)

src/component/layout/layoutcom/UserHeader.jsx

@@ -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> */}
-                             <li className="nav-item dropdown">
+                             {/* <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">
+                               <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>  */}
-                             <li className="nav-item">
+                             {/* <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">
-                            <li className="nav-item user-profile dropdown">
                                 <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

@@ -588,13 +588,18 @@
                     left: 0px;
                 }
             }
-            .show {
+            .show + .dropdown-menu{
-                .dropdown-menu{
+                margin-top: 0;
-                    margin-top: 0;
+                visibility: visible;
-                    visibility: visible;
+                opacity: 1;
-                    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

@@ -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