timers fixed

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

@@ -1,10 +1,6 @@
 import React, {useState, useEffect, useRef} from 'react'
 import './App.scss';
-import {Provider, connect}   from 'react-redux';
-import {createStore, combineReducers, applyMiddleware} from 'redux';
-import thunk from 'redux-thunk';
 
-import logoDefault from './img/logo.svg';
 import clockFace from './img/ClockFace.png';
 import clockH from './img/ClockFace_H.png';
 import clockM from './img/ClockFace_M.png';
@@ -93,12 +89,12 @@ const PasswordConfirm = ({min, char=false, bigChar=false, number=false}) => {
 
 
 
-const Timer = ({seconds=100}) => {
-  const [counter, setCounter] = useState(seconds)
+const Timer = ({seconds}) => {
+  const [counter, setCounter] = useState(seconds.s)
   const [paused, setPause] = useState(false)
 
     useEffect(() => {
-      setCounter(seconds)
+      setCounter(seconds.s)
     }, [seconds])
   
      useEffect(() => {     
@@ -137,7 +133,7 @@ const TimerControl = ({setSeconds}) => {
         <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>
+        <button onClick={() => setSeconds({s: +h*3600 + +m*60 + +s}) }>Start</button>
     </div>
   )
 }
@@ -148,16 +144,16 @@ const SecondsTimer = ({seconds}) => (
   <h2>{parseInt(seconds)}</h2>
 )
 
-const TimerContainer = ({seconds=100, refresh=100, render}) => {
+const TimerContainer = ({seconds={s:100}, refresh=100, render}) => {
   const [paused, setPause] = useState(false)
-  const [time, setTime] = useState(seconds)
+  const [time, setTime] = useState(seconds.s)
   const t0 = useRef(performance.now())
   const pausedAt = useRef(0)
 
 
   useEffect(() => {   
     t0.current = performance.now()
-    setTime(seconds)
+    setTime(seconds.s)
     console.log('mount1')
   }, [seconds])
 
@@ -181,9 +177,9 @@ const TimerContainer = ({seconds=100, refresh=100, render}) => {
         let t1 = performance.now()
         let delta = (t1-t0.current)/1000
         
-        if (seconds >= delta) {
+        if (seconds.s >= delta) {
             // console.log('timeset', time, seconds, delta)
-          setTime(seconds - delta)
+          setTime(seconds.s - delta)
         } else {
             console.log('0')
           setTime(0)
@@ -244,9 +240,31 @@ const Watch = ({seconds, setPause, paused}) => {
 
 
 
+const Control = () => {
+  const [seconds, setSeconds] = useState({s: 200})
+
+  return (
+    <div className="controlContainerComb">
+      <Timer seconds={seconds} />
+      <TimerControl setSeconds={setSeconds}/>
+    </div>
+  )
+}
+
+
+const ControlContainer = () => {
+  const [secondsCont, setSecondsCont] = useState({s: 200})
+
+  return (
+    <div className="controlContainerComb">
+        <TimerContainer seconds={secondsCont} refresh={500} render={LCD}/>
+        <TimerControl setSeconds={setSecondsCont}/>
+    </div>
+  )
+}
+
+
 function App() {
-  const [seconds, setSeconds] = useState(200)
-  const [secondsCont, setSecondsCont] = useState(200)
   
   return (
     <>
@@ -261,21 +279,18 @@ function App() {
 
       <PasswordConfirm min={3} char={true} bigChar={true} number={true}/>
 
-      <Timer seconds={seconds} />
-      <TimerControl setSeconds={setSeconds}/>
 
+      <Control />
 
-      <TimerContainer seconds={10} refresh={2000} render={SecondsTimer}/>
 
-      <TimerContainer seconds={65} refresh={100} render={LCD}/> 
+      <TimerContainer seconds={{s:10}} refresh={2000} render={SecondsTimer}/>
 
-      <TimerContainer seconds={3660} refresh={1} render={Watch}/> 
+      <TimerContainer seconds={{s:65}} refresh={100} render={LCD}/> 
 
+      <TimerContainer seconds={{s:3660}} refresh={1} render={Watch}/> 
 
-      <div className="controlContainerComb">
-        <TimerContainer seconds={secondsCont} refresh={500} render={LCD}/>
-        <TimerControl setSeconds={setSecondsCont}/>
-      </div>
+
+      <ControlContainer />
 
     </>
   );