fix timer error and rename state variables

components/modal/src/Modal.tsx

@@ -19,48 +19,52 @@ export const Modal: FC<ModalProps> = ({
   classBlock,
   classModifiers,
   className,
-  timeOutInSeconds = 120,
+  timeOutInSeconds = 300,
   handleContinue,
   handleSignout,
   handleTimedOut,
   ...attrs
 }) => {
   const classes = classBuilder('hods-modal', classBlock, classModifiers, className);
-  const [runTimeoutTimer, setRunTimeoutTimer] = useState(true)
-  const [timeoutTimer, setTimeoutTimer] = useState(timeOutInSeconds);
-  const [formattedTime, setFormattedTime] = useState(Math.floor(timeoutTimer / 60));
+  const [runTimer, setRunTimer] = useState(true)
+  const [timer, setTimer] = useState(timeOutInSeconds);
+  const [formattedTimer, setFormattedTimer] = useState(Math.floor(timer / 60));
 
   useEffect(() => {
     let interval;
-    if(runTimeoutTimer) {
+    if(runTimer) {
       interval = setInterval(() => {
-        setTimeoutTimer((timeoutTimer) => timeoutTimer - 1);
+        setTimer((timer) => timer - 1);
       }, 1000);
     } else {
       clearInterval(interval);
     }
     return () => clearInterval(interval);
-  }, [runTimeoutTimer])
+  }, [runTimer])
 
   useEffect(() => {
-    if(timeoutTimer > 60) {
-      setFormattedTime(Math.round(timeoutTimer / 60));
+    if(timer > 60) {
+      if(timer % 60 == 0) {
+        setFormattedTimer(Math.round(timer / 60));
+      }
     } else {
-      if(timeoutTimer == 60 || timeoutTimer == 40 || timeoutTimer == 20 || timeoutTimer == 0) {
-        setFormattedTime(timeoutTimer);
-        if(timeoutTimer == 0) {
-          setRunTimeoutTimer(false);
+      if(timer == 60 || timer == 40 || timer == 20 || timer == 0) {
+        setFormattedTimer(timer);
+        if(timer == 0) {
+          setRunTimer(false);
           handleTimedOut;
         }
       }
     }
-  }, [timeoutTimer])
+  }, [timer])
+
+  console.log(timer)
 
   return (
     <div  {...attrs} className={classes('overlay')}>
       <div role='dialog' aria-labelledby='modalTitle' aria-describedby='modalContent' className={classes('container')}>
         <h1 id='modalTitle'>You will be signed out soon</h1>
-        <p id='modalContent' aria-live='polite'>To protect your information, you will be signed out in <span className={classes('timer')}>{formattedTime} {timeoutTimer <= 60 ? "seconds" : formattedTime == 1 ? "minute" : "minutes"}</span>.</p>
+        <p id='modalContent' aria-live='polite'>To protect your information, you will be signed out in <span className={classes('timer')}>{formattedTimer} {timer <= 60 ? "seconds" : formattedTimer == 1 ? "minute" : "minutes"}</span>.</p>
         <div className={classes('buttons')}>
           <button role='button'>Continue on this page</button>
           <a role='link'>Sign out</a>