homework/js/21/myproject/src/App_test.js

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';


// TimerContainer
const SecondsTimer = ({ seconds }) => <h2>{seconds}</h2>

const TimerContainer = ({ seconds, refresh, render }) => {
    const [count, setCount] = useState(seconds) // отслеживаем состояние количества секунд
    const [isRunning, setIsRunning] = useState(false) // отслеживаем состояние кнопки стоп/старт для таймера
    const Render = render

    console.log('count ', count)

    useEffect(() => { // эффект, отвечающий за то, когда счетчик прошле в 0, он его переводит в состояние паузы
        if (count <= 0) {
            setIsRunning(false)
        }
    }, [count <= 0])

    useEffect(() => { // сам счетчик
        if (isRunning) {
            const start = performance.now()

            const int = setInterval(() => {

                const diff = Math.floor((performance.now() - start) / refresh)
                setCount(count => count - diff)
            }, refresh)

            return () => clearInterval(int)
        }
    })

    return (
        <div>
            <h2>TimerContainer</h2>
            <Render seconds={count} />
            <button onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Start'}</button>
        </div >
    )
}


// TimerControl
const TimerControl = () => {
    const [hours, setHours] = useState('')
    const [minutes, setMinutes] = useState('')
    const [seconds, setSeconds] = useState('')
    // const [count, setCount] = useState()
    // const [isRunning, setIsRunning] = useState(false)

    // переводим время в секунды
    const ms = +hours * 60 * 60 + +minutes * 60 + +seconds

    // useEffect(() => setCount(ms), [ms])

    // функция-перевод секунд в нормальный вид
    // function timerFormat(time) {
    //     const h = Math.floor(time / 60 / 60)
    //     const m = Math.floor(time / 60) - (h * 60)
    //     const s = time % 60

    //     const defaultZero = (param) => (param > 9) ? param : '0' + param

    //     return `${defaultZero(h)} : ${defaultZero(m)} : ${defaultZero(s)}`
    // }

    // // таймер
    // useEffect(() => {
    //     if (isRunning) {
    //         const int = setInterval(() => {
    //             setCount(count => {
    //                 if (count <= 0) {
    //                     setIsRunning(false)
    //                     return 0
    //                 }
    //                 return count - 1
    //             })
    //         }, 1000)
    //         return () => clearInterval(int)
    //     }
    // }, [isRunning])

    return (
        <div>
            <h2>TimerControl</h2>
            {/* {timerFormat(count)} */}
            <TimerContainer seconds={ms} refresh={100} render={SecondsTimer} />

            <br />
            <input type='number' min='0' max='23' placeholder='00' onChange={e => setHours(e.target.value)}></input>
            <input type='number' min='0' max='59' placeholder='00' onChange={e => setMinutes(e.target.value)}></input>
            <input type='number' min='0' max='59' placeholder='00' onChange={e => setSeconds(e.target.value)}></input>
            <br />
            <button onClick={() => { setIsRunning(!isRunning) }}>{isRunning ? 'Pause' : 'Start'}</button>
        </div >
    )
}

function App() {
    return (
        <div className="App">
            <header>

                {/* TimerControl */}
                <TimerControl />

            </header>
        </div>
    );
}

export default App;