import logo from './logo.svg'; import React, { useState, useEffect } from 'react'; import './App.scss'; import { getTimeData, getTotalSeconds } from './utills'; const TimerContainer = ({ count, render, refresh = 1000 , running = false}) => { let [state, setState] = useState({ paused: !running, count, ...getTimeData(count) }); useEffect(() => { let timer = undefined; if (!state.paused) { if (state.count > 0) { const now = new Date(); const nextTime = Math.max(1, 1000 - (now.getTime() % refresh)); timer = setInterval(() => setStateInt({ count: state.count - 1 }), nextTime); } else pause(); } return () => clearInterval(timer); }, [state]); const setStateInt = newState => setState(state = { ...state, ...newState }); const start = () => setStateInt({ paused: false }); const pause = () => setStateInt({ paused: true }); const reset = () => setStateInt({ count }); const stop = () => { pause(); reset(); } let timer = getTimeData(state.count); let Render = render; return ( <> setStateInt({ hours: e.target.value, count: getTotalSeconds(e.target.value, state.minutes, state.seconds) })} type="number" /> setStateInt({ minutes: e.target.value, count: getTotalSeconds(state.hours, e.target.value, state.seconds) })} type="number" /> setStateInt({ seconds: e.target.value, count: getTotalSeconds(state.hours, state.minutes, e.target.value) })} type="number" /> {/*{time.hours} : {time.minutes} : {time.seconds}*/} {/*React.cloneElement(render, { ...render.props, timer })*/}
); } const SecondsTimer = (props) =>

{props.timer.totalSeconds}

; function App() { return ( <>
); } export default App;