add sessionTimeout for MainPage

src/container/components/w-screen-wrapper/index.tsx

@@ -8,6 +8,7 @@ import { useAppContext } from '../../../store';
 import { useTheme } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import { IMenuTreeItem } from '../../../ioc';
+import SessionTimeout from './session-timeout';
 
 
 const WScreenWrapper: FC<{ menuTreeItem?: IMenuTreeItem; }> = ({ menuTreeItem }) => {
@@ -61,6 +62,7 @@ const WScreenWrapper: FC<{ menuTreeItem?: IMenuTreeItem; }> = ({ menuTreeItem })
     }
 
     return (
+      <SessionTimeout>
       <div style={{ position: 'relative', width: '100%', height: '100%', }}>
         {appContext.screenMode === 'loading' &&
           <div style={{ display: 'table', position: 'absolute', width: '100%', height: 'calc(100% + 8px)', background: '#3f51b544', zIndex: (theme?.zIndex?.modal || 0) + 1 }}>
@@ -75,6 +77,7 @@ const WScreenWrapper: FC<{ menuTreeItem?: IMenuTreeItem; }> = ({ menuTreeItem })
           </BaseScreenPropsContext.Consumer>
         </BaseScreenPropsContext.Provider>
       </div>
+      </SessionTimeout>
     );
   } catch (error) {
     setPageError({ error });

src/container/components/w-screen-wrapper/session-timeout.tsx

@@ -0,0 +1,82 @@
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  Fragment,
+  FC,
+  createContext,
+} from "react";
+import {
+  useAppContext,
+  useConfiguration,
+  useUserContext,
+} from "../../../store";
+
+const SessionTimeoutContext = createContext<any>(null as any);
+
+const SessionTimeout: FC<{ children: React.ReactNode }> = ({ children }) => {
+  const configuration = useConfiguration();
+  const userContext = useUserContext();
+  const appContext = useAppContext();
+
+  const logoutClicked = useCallback(() => {
+    userContext.logout();
+
+    try {
+      if (configuration.hooks?.onLogout) {
+        configuration.hooks?.onLogout();
+      }
+    } catch (e) {
+      console.log(e);
+    }
+
+    appContext.clear();
+  }, [userContext.logout, appContext.clear]);
+  const checkForInactivity = () => {
+    const expireTime = Number(sessionStorage.getItem("expireTime"));
+
+    if (expireTime < Date.now()) {
+      logoutClicked();
+    }
+  };
+
+  const updateExpireTime = () => {
+    const expireTime = Date.now() + 720000;
+    sessionStorage.setItem("expireTime", expireTime.toString());
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      checkForInactivity();
+    }, 20000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    updateExpireTime();
+
+    window.addEventListener("click", updateExpireTime);
+    window.addEventListener("scroll", updateExpireTime);
+    window.addEventListener("keypress", updateExpireTime);
+    window.addEventListener("mousemove", updateExpireTime);
+    return () => {
+      window.removeEventListener("click", updateExpireTime);
+      window.removeEventListener("scroll", updateExpireTime);
+      window.removeEventListener("keypress", updateExpireTime);
+      window.removeEventListener("mousemove", updateExpireTime);
+    };
+  }, []);
+
+  // change fragment to modal and handleclose func to close
+  return (
+    <SessionTimeoutContext.Provider
+      value={{ logoutClicked, checkForInactivity, updateExpireTime }}
+    >
+      {children}
+    </SessionTimeoutContext.Provider>
+  );
+};
+
+export default SessionTimeout;