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,42 +12,33 @@ 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
+      <button
+        onClick={handleLogout}
         style={{
-          height: "100vh",
+          position: "absolute",
-          margin: 0,
+          top: "1rem",
-          padding: 0,
+          right: "1rem",
-          display: "flex",
+          backgroundColor: "#1a1a1a",
-          alignItems: "center",
+          color: "#fff",
-          justifyContent: "center",
+          padding: "0.5rem 1rem",
-          backgroundColor: "#242424",
+          border: "none",
-          position: "relative",
+          borderRadius: "4px",
+          cursor: "pointer",
         }}
       >
-        <button
+        Logout
-          onClick={handleLogout}
+      </button>
-          style={{
+      {children}
-            position: "absolute",
-            top: "1rem",
-            right: "1rem",
-            backgroundColor: "#1a1a1a",
-            color: "#fff",
-            padding: "0.5rem 1rem",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
-          }}
-        >
-          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;