fix infinite loop at end of timer

UKHomeOffice · Oct 5, 2023 · 1ee5ac9 · 1ee5ac9 · github-actions · Oct 5, 2023
1 parent 3c6e7ac
commit 1ee5ac9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/components/timeout-modal/src/TimeoutModal.tsx b/components/timeout-modal/src/TimeoutModal.tsx
@@ -44,18 +44,24 @@ export const TimeoutModal: FC<TimeoutModalProps> = ({
     return () => dialog.close();
   }, [isOpen]);
 
+
+  if(!isOpen) {
+    return null;
+  }
+
   return (
-      <dialog ref={modalRef} aria-labelledby='modalTitle' aria-describedby='modalContent' className={classes('content')}>
-        <div {...attrs} className={classes('overlay')} />
-        <h2 id='modalTitle'>You will be signed out soon</h2>
-        <p id='modalContent' aria-live='polite'>
-          To protect your information, you will be signed out in <Timer className={classes('timer')} timerFrom={isOpen ? timerDurationInSeconds : 0} onTimeout={onTimeout}/>.
-        </p>
-        <div className={classes('buttons')}>
-          <button role='button' onClick={onContinue}>Continue on this page</button>
-          <a role='link' onClick={onSignout}>Sign out</a>
-        </div>
-      </dialog>
+      <div {...attrs} className={classes('overlay')} >
+        <dialog ref={modalRef} aria-labelledby='modalTitle' aria-describedby='modalContent' className={classes('content')}>
+          <h2 id='modalTitle'>You will be signed out soon</h2>
+          <p id='modalContent' aria-live='polite'>
+            To protect your information, you will be signed out in <Timer className={classes('timer')} timerFrom={isOpen ? timerDurationInSeconds : 0} onTimeout={onTimeout}/>.
+          </p>
+          <div className={classes('buttons')}>
+            <button role='button' onClick={onContinue}>Continue on this page</button>
+            <a role='link' onClick={onSignout}>Sign out</a>
+          </div>
+        </dialog>
+      </div>
   );
 };
 

diff --git a/components/timeout-modal/src/Timer.tsx b/components/timeout-modal/src/Timer.tsx
@@ -26,13 +26,10 @@ export const Timer: FC<TimerProps> = ({
         } else {
             clearInterval(interval);
         }
-        return () => {
-            if(runTimer) setRunTimer(false);
-            clearInterval(interval);
-        };
+        return () => clearInterval(interval);
     }, [runTimer])
 
-    const formatTimer = (timer) => {
+    useEffect(() => {
         if(timer > 60) {
             if(timer % 60 == 0) {
                 formattedTimer = Math.round(timer / 60);
@@ -42,14 +39,18 @@ export const Timer: FC<TimerProps> = ({
                 formattedTimer = timer;
                 if(timer == 0) {
                     setRunTimer(false);
-                    onTimeout;
                 }
             }
         }
-    }
-    if(timer > 0) {
-      formatTimer(timer);
-    }
+    }, [timer])
+
+    useEffect(() => {
+        return () => {
+            setRunTimer(false);
+        };
+    }, []);
+
+    console.log(timer);
 
     return (
       <span {...attrs}>{formattedTimer} {timer <= 60 ? "seconds" : formattedTimer == 1 ? "minute" : "minutes"}</span>