timer container remade to function using performance.now(). now it has become more precise

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

@@ -61,17 +61,29 @@ const PasswordConfirm = ({min=8}) => {
 }
 
 const Timer = ({seconds=10}) => {
-  let [time=seconds,  setTime] = useState();
-    useEffect(() => {
-      const interval = setInterval(()=> time > 0? setTime(time - 1) : clearInterval(interval), 1000)
-      return() => {clearInterval(interval)}
-    },[time])
+  let [isPause ,setIsPause] = useState(false);
+  let [time=seconds, setTime] = useState(seconds)
+  useEffect(() => {
+    const interval = setInterval(()=> {
+      if(!isPause) {
+        time > 0? setTime(time - 1) : clearInterval(interval)
+      } else {
+        clearInterval(interval)
+      }
+    }, 1000)
+    return() => {clearInterval(interval)}
+  },[time, isPause])
+
   return (
-    <strong>
-      {Math.floor(((time*1000) / (1000 * 60 * 60)) % 24)} :
-      {Math.floor(((time*1000) / (1000 * 60)) % 60)} :
-      {Math.floor(((time*1000) / 1000) % 60)}
-    </strong>
+    <>
+      <strong>
+        {Math.floor(((time*1000) / (1000 * 60 * 60)) % 24)} :
+        {Math.floor(((time*1000) / (1000 * 60)) % 60)} :
+        {Math.floor(((time*1000) / 1000) % 60)}
+      </strong>
+      &nbsp;
+      <button onClick={() => setIsPause(!isPause)}>{isPause? 'Start' : 'Pause'}</button>
+    </>
   )
 }
 
@@ -82,7 +94,7 @@ const LCD = ({seconds=10}) =>
     {Math.floor(((seconds*1000) / 1000) % 60)}
   </strong>
 
-const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>
+const SecondsTimer = ({seconds}) => <h2>{seconds.toFixed(2)}</h2>
 
 const TimerControl = ({hour=0, minute=0, second=0}) => {
   let [hr=hour, setHr] = useState()
@@ -125,16 +137,14 @@ const TimerControl = ({hour=0, minute=0, second=0}) => {
   )
 }
 
-const TimerContainer = ({seconds=1800, refresh=100, render:Component}) => {
-  let [timePassed=refresh, setTimePassed] = useState()
+const TimerContainer = ({seconds=1800, refresh=10, render:Component}) => {
   let [time=seconds*1000, setTime] = useState()
   useEffect(() => {
     const interval = setInterval(()=> {
-      time > 0? setTime(seconds*1000 - timePassed) : clearInterval(interval)
-      setTimePassed(timePassed + refresh)
+      time > 0? setTime(seconds*1000  - performance.now()) : (()=> {clearInterval(interval); setTime(0)})()
     },refresh)
     return() => clearInterval(interval)
-  }, [refresh, time, timePassed, setTimePassed])
+  }, [refresh, time, seconds])
   
   return(
     <Component seconds={time/1000}/>
@@ -159,15 +169,15 @@ function App() {
       <h3>Password Confirm</h3>
       <PasswordConfirm />
 
+      <h3>Timer</h3>
+      <Timer seconds={10}/>
+
       <h3>Timer Control</h3>
       <TimerControl second={10}/>
-
-      <h3>Timer</h3>
-      <Timer seconds={7200}/>
       
       <h3>Timer Container</h3>
       <TimerContainer render={SecondsTimer}/>
-      <TimerContainer render={SecondsTimer} seconds={60} refresh={10}/>
+      <TimerContainer render={SecondsTimer} seconds={10} refresh={10}/>
       <TimerContainer render={LCD}/>
 
     </div>