Merge pull request #59 from spacemeshos/fix-unfocused-locking

Lock on unfocused app after 2 min + 30 seconds countdown

src/components/IdleAlert.tsx

@@ -21,7 +21,7 @@ function IdleAlert(): JSX.Element {
   const { isWalletUnlocked } = useWallet();
   const lockWallet = useLockWallet();
   const isIdle = useIdle(IDLE_TIME_SECONDS * 1000);
-  const isFocused = useWindowFocus();
+  const isFocused = useWindowFocus(IDLE_TIME_SECONDS * 1000);
   const [showModal, setShowModal] = useState(false);
   const [countdown, setCountdown] = useState(IDLE_ALERT_SECONDS);
   const [shouldLockWallet, setShouldLockWallet] = useState(false);

src/hooks/useWindowFocus.ts

@@ -1,31 +1,32 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-function useWindowFocus() {
+function useWindowFocus(timeout = 0) {
   const [focused, setFocused] = useState(true);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   useEffect(() => {
     const focusHandler = () => {
-      if (import.meta.env.DEV) {
-        // eslint-disable-next-line no-console
-        console.log('Window is focused');
-        return;
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
       setFocused(true);
     };
     const blurHandler = () => {
-      if (import.meta.env.DEV) {
-        // eslint-disable-next-line no-console
-        console.log('Window is blurred');
-        return;
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-      setFocused(false);
+      timeoutRef.current = setTimeout(() => {
+        setFocused(false);
+        timeoutRef.current = null;
+      }, timeout);
     };
     window.addEventListener('focus', focusHandler);
     window.addEventListener('blur', blurHandler);
     return () => {
       window.removeEventListener('focus', focusHandler);
       window.removeEventListener('blur', blurHandler);
     };
-  }, []);
+  }, [timeout]);
 
   return focused;
 }