Merge pull request #27 from amrlabib/feature/running-state

feature/running-state

Author: amrlabib

app/App.js

@@ -8,6 +8,7 @@ function MyTimer({ expiryTimestamp }) {
     minutes,
     hours,
     days,
+    isRunning,
     start,
     pause,
     resume,
@@ -22,6 +23,7 @@ function MyTimer({ expiryTimestamp }) {
       <div style={{ fontSize: '100px' }}>
         <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
       </div>
+      <p>{isRunning ? 'Running' : 'Not running'}</p>
       <button type="button" onClick={start}>Start</button>
       <button type="button" onClick={pause}>Pause</button>
       <button type="button" onClick={resume}>Resume</button>

readme.md

@@ -37,6 +37,7 @@ function MyTimer({ expiryTimestamp }) {
     minutes,
     hours,
     days,
+    isRunning,
     start,
     pause,
     resume,
@@ -51,6 +52,7 @@ function MyTimer({ expiryTimestamp }) {
       <div style={{fontSize: '100px'}}>
         <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
       </div>
+      <p>{isRunning ? 'Running' : 'Not running'}</p>
       <button onClick={start}>Start</button>
       <button onClick={pause}>Pause</button>
       <button onClick={resume}>Resume</button>
@@ -90,6 +92,7 @@ export default function App() {
 | minutes | number | minutes value |
 | hours | number | hours value |
 | days | number | days value |
+| isRunning | boolean | flag to indicate if timer is running or not |
 | pause | function | function to be called to pause timer |
 | start | function | function if called after pause the timer will continue based on original expiryTimestamp |
 | resume | function | function if called after pause the timer will continue countdown from last paused state |
@@ -112,6 +115,7 @@ function MyStopwatch() {
     minutes,
     hours,
     days,
+    isRunning,
     start,
     pause,
     reset,
@@ -125,6 +129,7 @@ function MyStopwatch() {
       <div style={{fontSize: '100px'}}>
         <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
       </div>
+      <p>{isRunning ? 'Running' : 'Not running'}</p>
       <button onClick={start}>Start</button>
       <button onClick={pause}>Pause</button>
       <button onClick={reset}>Reset</button>
@@ -155,6 +160,7 @@ export default function App() {
 | minutes | number | minutes value |
 | hours | number | hours value |
 | days | number | days value |
+| isRunning | boolean | flag to indicate if stopwatch is running or not |
 | start | function | function to be called to start/resume stopwatch |
 | pause | function | function to be called to pause stopwatch |
 | reset | function | function to be called to reset stopwatch to 0:0:0:0 |

src/useStopwatch.js

@@ -5,26 +5,26 @@ export default function useStopwatch(settings) {
   const { autoStart } = settings || {};
 
   const [seconds, setSeconds] = useState(0);
+  const [isRunning, setIsRunning] = useState(autoStart);
   const intervalRef = useRef();
 
   function clearIntervalRef() {
     if (intervalRef.current) {
+      setIsRunning(false);
       clearInterval(intervalRef.current);
       intervalRef.current = undefined;
     }
   }
 
   function start() {
     if (!intervalRef.current) {
+      setIsRunning(true);
       intervalRef.current = setInterval(() => setSeconds((prevSeconds) => (prevSeconds + 1)), 1000);
     }
   }
 
   function pause() {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = undefined;
-    }
+    clearIntervalRef();
   }
 
   function reset() {
@@ -44,6 +44,6 @@ export default function useStopwatch(settings) {
   }, []);
 
   return {
-    ...Time.getTimeFromSeconds(seconds), start, pause, reset,
+    ...Time.getTimeFromSeconds(seconds), start, pause, reset, isRunning,
   };
 }

src/useTimer.js

@@ -5,10 +5,12 @@ 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;
     }
@@ -21,6 +23,7 @@ export default function useTimer(settings) {
 
   function start() {
     if (!intervalRef.current) {
+      setIsRunning(true);
       intervalRef.current = setInterval(() => {
         const secondsValue = Time.getSecondsFromExpiry(expiryTimestamp);
         if (secondsValue <= 0) {
@@ -37,6 +40,7 @@ export default function useTimer(settings) {
 
   function resume() {
     if (!intervalRef.current) {
+      setIsRunning(true);
       intervalRef.current = setInterval(() => setSeconds((prevSeconds) => {
         const secondsValue = prevSeconds - 1;
         if (secondsValue <= 0) {
@@ -62,6 +66,6 @@ export default function useTimer(settings) {
 
 
   return {
-    ...Time.getTimeFromSeconds(seconds), start, pause, resume, restart,
+    ...Time.getTimeFromSeconds(seconds), start, pause, resume, restart, isRunning,
   };
 }