Adding inactivity handler

src/components/ProtectedRoute.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Navigate, useNavigate } from "react-router-dom";
 import PageWrapper from "./PageWrapper";
+import useIdleTimer from "../hooks/useIdleTimer";
 
 const ProtectedRoute = ({ children }) => {
   const token = localStorage.getItem("token");
@@ -11,24 +12,16 @@ const ProtectedRoute = ({ children }) => {
     navigate("/login");
   };
 
-  if (!token) {
+  useIdleTimer(() => {
-    return <Navigate to="/login" />;
+    if (token) {
+      handleLogout();
     }
+  }, 60000); // 1 minute
+
+  if (!token) return <Navigate to="/login" />;
 
   return (
     <PageWrapper>
-      <div
-        style={{
-          height: "100vh",
-          margin: 0,
-          padding: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#242424",
-          position: "relative",
-        }}
-      >
       <button
         onClick={handleLogout}
         style={{
@@ -46,7 +39,6 @@ const ProtectedRoute = ({ children }) => {
         Logout
       </button>
       {children}
-      </div>
     </PageWrapper>
   );
 };

src/hooks/useIdleTimer.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+
+const useIdleTimer = (onIdle, timeout = 60000) => {
+  const timerRef = useRef(null);
+
+  const resetTimer = () => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(onIdle, timeout);
+  };
+
+  useEffect(() => {
+    const events = ["mousemove", "keydown", "mousedown", "touchstart"];
+    events.forEach(e => window.addEventListener(e, resetTimer));
+
+    resetTimer(); // initialize timer
+
+    return () => {
+      clearTimeout(timerRef.current);
+      events.forEach(e => window.removeEventListener(e, resetTimer));
+    };
+  }, []);
+};
+
+export default useIdleTimer;