add useInterval and reimplement useTimer in cleaner way

Author: amrlabib

demo/components/UseTimerDemo.js

@@ -13,8 +13,7 @@ export default function UseTimerDemo({ expiryTimestamp }: Object) {
     pause,
     resume,
     restart,
-  } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });
-
+  } = useTimer({ expiryTimestamp, autoStart: true, onExpire: () => console.warn('onExpire called') });
 
   return (
     <div>

docs/index.js

@@ -0,0 +1,5 @@
+import useInterval from './useInterval';
+
+export {
+  useInterval,
+};

src/hooks/index.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+export default function useInterval(callback, delay) {
+  const callbacRef = useRef();
+
+  // update callback function with current render callback that has access to latest props and state
+  useEffect(() => {
+    callbacRef.current = callback;
+  });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      callbacRef.current && callbacRef.current();
+    }, delay);
+    return () => clearInterval(interval);
+  }, [delay]);
+}

src/hooks/useInterval.js

@@ -0,0 +1,91 @@
+import { useState, useEffect, useRef } from 'react';
+import { Time, Validate } from './utils';
+
+export default function useTimer(settings) {
+  const { expiryTimestamp: expiry, onExpire } = settings || {};
+  const [expiryTimestamp, setExpiryTimestamp] = useState(expiry);
+  const [seconds, setSeconds] = useState(Time.getSecondsFromExpiry(expiryTimestamp));
+  const [isRunning, setIsRunning] = useState(true);
+  const intervalRef = useRef();
+
+  function clearIntervalRef() {
+    if (intervalRef.current) {
+      setIsRunning(false);
+      clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    }
+  }
+
+  function handleExpire() {
+    clearIntervalRef();
+    Validate.onExpire(onExpire) && onExpire();
+  }
+
+  function start() {
+    if (!intervalRef.current) {
+      setIsRunning(true);
+      intervalRef.current = setInterval(() => {
+        const secondsValue = Time.getSecondsFromExpiry(expiryTimestamp);
+        if (secondsValue <= 0) {
+          handleExpire();
+        }
+        setSeconds(secondsValue);
+      }, 1000);
+    }
+  }
+
+  function pause() {
+    clearIntervalRef();
+  }
+
+  function resume() {
+    if (!intervalRef.current) {
+      setIsRunning(true);
+      intervalRef.current = setInterval(() => setSeconds((prevSeconds) => {
+        const secondsValue = prevSeconds - 1;
+        if (secondsValue <= 0) {
+          handleExpire();
+        }
+        return secondsValue;
+      }), 1000);
+    }
+  }
+
+  function restart(newExpiryTimestamp) {
+    clearIntervalRef();
+    setExpiryTimestamp(newExpiryTimestamp);
+  }
+
+  function handleExtraMilliSeconds(secondsValue, extraMilliSeconds) {
+    setIsRunning(true);
+    intervalRef.current = setTimeout(() => {
+      const currentSeconds = Time.getSecondsFromExpiry(expiryTimestamp);
+      setSeconds(currentSeconds);
+      if (currentSeconds <= 0) {
+        handleExpire();
+      } else {
+        intervalRef.current = undefined;
+        start();
+      }
+    }, extraMilliSeconds);
+  }
+
+  useEffect(() => {
+    if (Validate.expiryTimestamp(expiryTimestamp)) {
+      const secondsValue = Time.getSecondsFromExpiry(expiryTimestamp);
+      const extraMilliSeconds = Math.floor((secondsValue - Math.floor(secondsValue)) * 1000);
+      setSeconds(secondsValue);
+      if (extraMilliSeconds > 0) {
+        handleExtraMilliSeconds(secondsValue, extraMilliSeconds);
+      } else {
+        start();
+      }
+    }
+    return clearIntervalRef;
+  }, [expiryTimestamp]);
+
+
+  return {
+    ...Time.getTimeFromSeconds(seconds), start, pause, resume, restart, isRunning,
+  };
+}