timer control functions(but with errors)

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

@@ -1,6 +1,6 @@
 import logo from './logo.svg';
 import './App.css';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const Spoiler = ({header="+", open=true, children}) => {
   let [isOpen=open, setOpen] = useState()
@@ -59,24 +59,60 @@ const PasswordConfirm = ({min=8}) => {
   )
 }
 
-const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
-
-const Timer = ({seconds=61}) => {
-  let initial = seconds
+const Timer = ({seconds=10}) => {
   let [time=seconds,  setTime] = useState();
-  let startTime = performance.now();
-  console.log(performance.now())
-    // (async () => {
-    //   for(let i = 0; i < initial; i++) {
-    //     await delay(1000)
-    //     setTime(time - 1000)
-    //   }
-    // })()
+  if(time > 0) {
+    setTimeout(()=> setTime(time - 1), 1000)
+
+    //сделать интервал завернуть в юхефект и незабыть клир
+  }
   return (
-    <>
-     <strong>{startTime - performance.now()}</strong>
-     <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>
+  )
+}
+
+const TimerControl = ({hour=0, minute=0, second=0}) => {
+  let [hr=hour, setHr] = useState()
+  let [min=minute, setMin] = useState()
+  let [sec=second, setSec] = useState()
+  let [active=false, setActive] = useState()
+
+  return (
+    <span>
+      <input
+        type="number"
+        min="0" 
+        max="30"
+        placeholder='hr' 
+        value={hr} 
+        onChange={(e)=> setHr(+e.target.value < 0 || +e.target.value > +e.target.max ? 0 : +e.target.value)}
+      />:
+      <input
+        type="number"
+        min="0" 
+        max="59"  
+        placeholder='min' 
+        value={min}
+        onChange={(e)=> setMin(+e.target.value > 59 || e.target.value < 0? 0 : +e.target.value)}
+      />:
+      <input 
+        type="number"
+        min="0" 
+        max="59"
+        placeholder='sec' 
+        value={sec} 
+        onChange={(e)=> setSec(+e.target.value > 59 || e.target.value < 0? 0 : +e.target.value)}
+      />
+
+      { active ? <button onClick={() => setActive(false)}>Stop</button> :
+                 <button onClick={() => setActive(true)}>Start</button>}
+      <br />
+      { active ? <Timer seconds={hr*60*60 + min*60 + sec}/> : ''}
+    </span>
   )
 }
 
@@ -96,8 +132,10 @@ function App() {
       <br />
       <h3>Password Confirm</h3>
       <PasswordConfirm />
+      <h3>Timer Control</h3>
+      <TimerControl hour={20}/>
       <h3>Timer</h3>
-      <Timer seconds={1100}/>      
+      <Timer seconds={7200}/>
     </div>
   );
 }