From f57ed000ade79eeab94af0d04f9a1defb5302124 Mon Sep 17 00:00:00 2001
From: Soaibuzzaman <soaib.safi@gmail.com>
Date: Thu, 11 Jan 2024 13:25:03 +0100
Subject: [PATCH] :sparkles:Warning on session expair

---
 frontend/package-lock.json                  | 16 ++++-
 frontend/package.json                       |  1 +
 frontend/src/components/Utils/IdleTimer.jsx | 71 +++++++++++++++++++++
 frontend/src/components/Utils/Nav.jsx       |  2 +
 4 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Utils/IdleTimer.jsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a5c4c5f..c1bd27e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.12.0",
+        "react-idle-timer": "^5.7.2",
         "react-router-dom": "^6.20.0",
         "react-select": "^5.8.0",
         "react-toggle-dark-mode": "^1.1.1",
@@ -6995,9 +6996,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
       "funding": [
         {
           "type": "individual",
@@ -10857,6 +10858,15 @@
         "react": "*"
       }
     },
+    "node_modules/react-idle-timer": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/react-idle-timer/-/react-idle-timer-5.7.2.tgz",
+      "integrity": "sha512-+BaPfc7XEUU5JFkwZCx6fO1bLVK+RBlFH+iY4X34urvIzZiZINP6v2orePx3E6pAztJGE7t4DzvL7if2SL/0GQ==",
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 089080c..4c21e63 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
+    "react-idle-timer": "^5.7.2",
     "react-router-dom": "^6.20.0",
     "react-select": "^5.8.0",
     "react-toggle-dark-mode": "^1.1.1",
diff --git a/frontend/src/components/Utils/IdleTimer.jsx b/frontend/src/components/Utils/IdleTimer.jsx
new file mode 100644
index 0000000..0fc4e15
--- /dev/null
+++ b/frontend/src/components/Utils/IdleTimer.jsx
@@ -0,0 +1,71 @@
+import React, {useState } from 'react'
+import { useIdleTimer } from 'react-idle-timer'
+import {
+  MDBBtn,
+  MDBModal,
+  MDBModalDialog,
+  MDBModalContent,
+  MDBModalHeader,
+  MDBModalTitle,
+  MDBModalBody,
+  MDBModalFooter,
+} from 'mdb-react-ui-kit';
+
+export default function App() {
+  const [timeoutModal, setTimeoutModal] = useState(false);
+  const [state, setState] = useState('Active')
+  
+  const handleIdle = () => {
+    setTimeoutModal(false)
+    window.location.reload()
+  }
+
+  const onIdle = () => {
+    setState('Idle')
+    setTimeoutModal(true)
+  }
+
+  const {
+  } = useIdleTimer({
+    onIdle,
+    timeout: 3600 * 1000,
+    crossTab: true,
+    leaderElection: true,
+    syncTimers: 200
+  })
+
+  return (
+    <>
+     {state === 'Idle' && (
+        <MDBModal
+          open={timeoutModal}
+          tabIndex="-1"
+        >
+          <MDBModalDialog>
+            <MDBModalContent className="message-modal-content">
+              <MDBModalHeader className="bg-primary text-white">
+                <MDBModalTitle>Session Timeout</MDBModalTitle>
+                <MDBBtn
+                  className="btn-close btn-close-white"
+                  color="none"
+                  onClick={handleIdle}
+                ></MDBBtn>
+              </MDBModalHeader>
+              <MDBModalBody className='text-center'>
+                <h5> Your login session has expired due to inactivity⌛</h5>
+                <h5> Please login again.</h5>
+                <h5> Don't worry, your code is saved!</h5>
+              </MDBModalBody>
+
+              <MDBModalFooter>
+                <MDBBtn color="secondary" onClick={handleIdle}>
+                  OK
+                </MDBBtn>
+              </MDBModalFooter>
+            </MDBModalContent>
+          </MDBModalDialog>
+        </MDBModal>
+      )}
+    </>
+  )
+}
diff --git a/frontend/src/components/Utils/Nav.jsx b/frontend/src/components/Utils/Nav.jsx
index a78722a..92b1b4b 100644
--- a/frontend/src/components/Utils/Nav.jsx
+++ b/frontend/src/components/Utils/Nav.jsx
@@ -22,6 +22,7 @@ import CustomSnackbar from './Modals/CustomSnackbar.jsx';
 import ConfirmModal from './Modals/ConfirmModal.jsx';
 import { downloadUserData, deleteProfile } from '../../api/playgroundApi.js';
 import axiosAuth from '../../api/axiosAuth.js';
+import IdleTimer from './IdleTimer.jsx'
 
 /**
  * Display the header and navigation bar.
@@ -138,6 +139,7 @@ export default function Navbar({ setEditorValue, setLanguage }) {
         Are you sure you want to delete your profile?`}
         onConfirm={handleUserProfileDelete}
       />
+      <IdleTimer />
       <header className='fixed-top'>
         <MDBNavbar expand='lg' light bgColor='light'>
           <MDBContainer >