update idle logout handler

package.json

@@ -40,6 +40,7 @@
     "react-draggable": "^4.4.5",
     "react-element-to-jsx-string": "^15.0.0",
     "react-hook-form": "^7.45.4",
+    "react-idle-timer": "^5.7.2",
     "react-input-mask": "^3.0.0-alpha.2",
     "react-intl": "^6.4.7",
     "react-number-format": "^4.9.4",

src/components/AutoLogoutProvider.js

@@ -0,0 +1,98 @@
+import React, { createContext, useState, useEffect } from 'react';
+//import {useNavigate} from "react-router-dom";
+//import axios from "axios";
+import {getUserData} from "../auth/utils";
+import {isObjEmpty} from "../utils/Utils";
+import {useIdleTimer} from "react-idle-timer";
+
+const TimerContext = createContext();
+
+const AutoLogoutProvider = ({ children }) => {
+    const [lastRequestTime, setLastRequestTime] = useState(Date.now());
+    //const navigate = useNavigate();
+    const [logoutInterval /*, setLogoutInterval*/] = useState(1);
+    const [state, setState] = useState('Active');
+
+    const onIdle = () => {
+        setLastRequestTime(Date.now());
+        setState('Idle')
+    }
+
+    const onActive = () => {
+        setLastRequestTime(Date.now());
+        setState('Active')
+    }
+
+    const {
+        getRemainingTime,
+        //getTabId,
+        isLastActiveTab,
+    } = useIdleTimer({
+        onIdle,
+        onActive,
+        timeout: 10_000,
+        throttle: 500,
+        crossTab: true,
+        syncTimers: 200,
+    })
+
+    const lastActiveTab = isLastActiveTab() === null ? 'loading' : isLastActiveTab()
+    //const tabId = getTabId() === null ? 'loading' : getTabId().toString()
+
+    useEffect(() => {
+        const userData = getUserData();
+        if(!isObjEmpty(userData)){
+            //TODO: get auto logout time here
+
+            // axios.get(`${apiPath}${GET_IDLE_LOGOUT_TIME}`,
+            // )
+            //     .then((response) => {
+            //         if (response.status === 200) {
+            //             setLastRequestTime(Date.now());
+            //             setLogoutInterval(parseInt(response.data.data));
+            //         }
+            //     })
+            //     .catch(error => {
+            //         console.log(error);
+            //         return false;
+            //     });
+        }
+        else{
+            //navigate('/login');
+        }
+    }, []);
+
+    useEffect(() => {
+        const interval = setInterval(async () => {
+            const currentTime = Date.now();
+            getRemainingTime();
+            if(state !== "Active" && lastActiveTab){
+                const timeElapsed = currentTime - lastRequestTime;
+                console.log(timeElapsed);
+                if (timeElapsed >= logoutInterval * 60 * 1000) {
+                    //TODO: auto logout here
+                    console.log("logout");
+                    //await dispatch(handleLogoutFunction());
+                    //await navigate('/login');
+                    //await window.location.reload();
+                }
+            }
+            else if(state === "Active"){
+                //TODO: if is active and remaining time < 5 min then refresh token
+            }
+        }, 1000); // Check every second
+
+        return () => {
+            clearInterval(interval);
+        };
+    }, [lastRequestTime,logoutInterval]);
+
+
+    return (
+        <TimerContext.Provider value={{lastRequestTime,setLastRequestTime}}>
+            {children}
+        </TimerContext.Provider>
+    );
+};
+
+export { TimerContext, AutoLogoutProvider };

src/index.js

@@ -17,6 +17,7 @@ import App from './App';
 import { store } from 'store';
 import reportWebVitals from './reportWebVitals';
 import {I18nProvider} from "./components/I18nProvider";
+import {AutoLogoutProvider} from "./components/AutoLogoutProvider";
 
 // ==============================|| MAIN - REACT DOM RENDER  ||============================== //
 
@@ -29,7 +30,9 @@ root.render(
     <ReduxProvider store={store}>
         <I18nProvider>
         <BrowserRouter basename="/">
-        <App />
+            <AutoLogoutProvider>
+                <App />
+            </AutoLogoutProvider>
         </BrowserRouter>
         </I18nProvider>
     </ReduxProvider>