pause implemented for timer containers

hw19-react-jsx-homework/src/App.js

@@ -160,6 +160,7 @@ const TimerControl = ({ hour = 0, minute = 0, second = 0 }) => {
 
 const TimerContainer = ({ seconds = 0, refresh = 10, render: Component }) => {
   let [time, setTime] = useState(seconds * 1000)
+  let [isPause, setIsPause] = useState(false)
 
   useEffect(() => {
     setTime(seconds * 1000)
@@ -170,14 +171,21 @@ const TimerContainer = ({ seconds = 0, refresh = 10, render: Component }) => {
     let now = performance.now()
     if (time > 0) {
       interval = setInterval(() => {
-        setTime(time => time - (performance.now() - now))
+        if (!isPause) {
+          time > 0 ? setTime(time => time - (performance.now() - now)) : clearInterval(interval)
+        } else {
+          clearInterval(interval)
+        }
       }, refresh)
     }
     return () => { clearInterval(interval) }
   })
 
   return (
-    <Component seconds={time > 0 ? time / 1000 : 0} />
+    <div>
+      <Component seconds={time > 0 ? time / 1000 : 0} />
+      <button onClick={() => setIsPause(!isPause)}>{isPause ? 'Start' : 'Pause'}</button>
+    </div>
   )
 }