handle pause by setting delay to null

Author: amrlabib

src/hooks/useInterval.js

@@ -9,6 +9,10 @@ export default function useInterval(callback, delay) {
   });
 
   useEffect(() => {
+    if (!delay) {
+      return () => {};
+    }
+
     const interval = setInterval(() => {
       callbacRef.current && callbacRef.current();
     }, delay);

src/useStopwatch.js

@@ -6,9 +6,9 @@ export default function useStopwatch({ autoStart, offsetTimestamp }) {
   const [seconds, setSeconds] = useState(Time.getSecondsFromExpiry(offsetTimestamp || 0));
   const [isRunning, setIsRunning] = useState(autoStart);
 
-  useInterval(isRunning ? () => {
+  useInterval(() => {
     setSeconds((prevSeconds) => (prevSeconds + 1));
-  } : () => {}, 1000);
+  }, isRunning ? 1000 : null);
 
   function start() {
     setIsRunning(true);

src/useTimer.js

@@ -21,11 +21,13 @@ export default function useTimer({ expiryTimestamp: expiry, onExpire, autoStart
     time.setSeconds(time.getSeconds() + seconds); // calculate new expiry timestamp based on last paused seconds count
     setExpiryTimestamp(time);
     setIsRunning(true);
+    setSeconds(Time.getSecondsFromExpiry(time));
   }
 
   function start() {
     if (didStart) {
       setIsRunning(true);
+      setSeconds(Time.getSecondsFromExpiry(expiryTimestamp));
     } else {
       resume();
       setDidStart(true);
@@ -38,13 +40,13 @@ export default function useTimer({ expiryTimestamp: expiry, onExpire, autoStart
     setSeconds(Time.getSecondsFromExpiry(newExpiryTimestamp));
   }
 
-  useInterval(isRunning ? () => {
+  useInterval(() => {
     const secondsValue = Time.getSecondsFromExpiry(expiryTimestamp);
     if (secondsValue <= 0) {
       handleExpire();
     }
     setSeconds(secondsValue);
-  } : () => {}, 1000);
+  }, isRunning ? 1000 : null);
 
   return {
     ...Time.getTimeFromSeconds(seconds), start, pause, resume, restart, isRunning,