HW react part

js/23_react_hw/react_hw/src/App.js

@@ -89,17 +89,75 @@ const PasswordConfirm = ({min, char=false, bigChar=false, number=false}) => {
 
 
 const Timer = ({seconds=100}) => {
+  const [counter, setCounter] = useState(seconds)
+  const [paused, setPause] = useState(false)
+
+    useEffect(() => {
+      setCounter(seconds)
+    }, [seconds])
+  
+     useEffect(() => {
+      let interval = null
+      if (counter > 0 && !paused) {
+          interval = setInterval(() => {
+              setCounter(counter => counter - 1)
+          }, 1000);
+      } 
+      return () => {
+          clearInterval(interval)
+      }
+    }, [paused, counter])
+
+
+    let h = Math.floor(counter / 3600)
+    let m = Math.floor(counter % 3600 / 60)
+    let s = counter % 60
+  return (    
+    <div>
+      <h2>{h >= 10 ? h : '0'+h}:{m >= 10 ? m : '0'+m}:{s >= 10 ? s : '0'+s}</h2>
+      <button onClick={() => setPause(!paused)}>{paused ? 'Го' : 'Пауза'}</button>
+    </div>
+  )
+}
+
+
+const TimerControl = ({setSeconds}) => {
+  const [s, setS] = useState(0)
+  const [m, setM] = useState(0)
+  const [h, setH] = useState(0)
 
   return (
     <div>
-      <h6></h6>
-      <button>Пауза</button>
+        <input value={h} min="0" max="none" type="number" onChange={(e) => setH(e.target.value)}/>
+        <input value={m} min="0" max="60" type="number" onChange={(e) => setM(e.target.value)}/>
+        <input value={s} min="0" max="60" type="number" onChange={(e) => setS(e.target.value)}/>
+        <button onClick={() => setSeconds(+h*3600 + +m*60 + +s) }>Start</button>
     </div>
   )
 }
 
 
+const SecondsTimer = ({seconds}) => (
+  <h2>{seconds}</h2>
+)
+
+const TimerContainer = ({seconds=100, refresh=100, render}) => {
+
+
+  
+  const DisplayEl = render
+  return (
+    <>
+      <DisplayEl seconds={200} />
+    </>
+  )
+}
+
+
+
 function App() {
+  const [seconds, setSeconds] = useState(200)
+
   return (
     <>
       <Spoiler header={<h1>Заголовок</h1>} open={false}>
@@ -108,14 +166,17 @@ function App() {
               лорем ипсум траливали и тп.
           </p>
       </Spoiler>
-
+      
       <RangeInput min={2} max={10} />
 
       <PasswordConfirm min={3} char={true} bigChar={true} number={true}/>
 
 
-      
+      <Timer seconds={seconds} />
+      <TimerControl setSeconds={setSeconds}/>
+
 
+      <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
 
     </>
   );