add useInterval in useStopwatch

Author: amrlabib

src/useStopwatch.js

@@ -1,48 +1,28 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState } from 'react';
 import { Time } from './utils';
+import { useInterval } from './hooks';
 
-export default function useStopwatch(settings) {
-  const { autoStart, offsetTimestamp } = settings || {};
-
+export default function useStopwatch({ autoStart, offsetTimestamp }) {
   const [seconds, setSeconds] = useState(Time.getSecondsFromExpiry(offsetTimestamp || 0));
   const [isRunning, setIsRunning] = useState(autoStart);
-  const intervalRef = useRef();
 
-  function clearIntervalRef() {
-    if (intervalRef.current) {
-      setIsRunning(false);
-      clearInterval(intervalRef.current);
-      intervalRef.current = undefined;
-    }
-  }
+  useInterval(isRunning ? () => {
+    setSeconds((prevSeconds) => (prevSeconds + 1));
+  } : () => {}, 1000);
 
   function start() {
-    if (!intervalRef.current) {
-      setIsRunning(true);
-      intervalRef.current = setInterval(() => setSeconds((prevSeconds) => (prevSeconds + 1)), 1000);
-    }
+    setIsRunning(true);
   }
 
   function pause() {
-    clearIntervalRef();
+    setIsRunning(false);
   }
 
   function reset(offset: number) {
-    clearIntervalRef();
+    setIsRunning(autoStart);
     setSeconds(Time.getSecondsFromExpiry(offset || 0));
-    if (autoStart) {
-      start();
-    }
   }
 
-  // didMount effect
-  useEffect(() => {
-    if (autoStart) {
-      start();
-    }
-    return clearIntervalRef;
-  }, []);
-
   return {
     ...Time.getTimeFromSeconds(seconds), start, pause, reset, isRunning,
   };