HW-react-03 done

hw-react-03-jsx/README.md

@@ -18,9 +18,6 @@ TimerControl
 1. инпут отдельно от аутпута
 2. инпут и аутпут в одном месте: меняются ролями в зависимости от кнопки Старт
 
-LCD
-Т.к. кнопка старт/пауза относится к логике компонента, решила, что ее выносить в компонент presentation неуместно. Где она все-таки должна быть?
-
 --------------Условия ДЗ---------------
 React JSX Homework
 Spoiler

hw-react-03-jsx/src/App.js

@@ -295,24 +295,25 @@ const Watch = ({ seconds }) => {
 };
 
 
-const TimerContainerReset = ({ seconds, refresh, render }) => {
+const TimerContainerReset = ({ refresh, render, controls, onClick }) => {
 //Начальные значения состояний
-  const initialState = { resBtn: true, startBtn: false, inCount: seconds }
+  const initialState = { resBtn: true, startBtn: false, inCount: 0 }
   //Состояние таймера
   const [counter, setCounter] = useState(initialState.inCount);
  // Состояние кнопки Старта/Пауза
   const [btnState, setBtnState] = useState(initialState.startBtn);
  // Состояние кнопки сброса
-  const [btnResetState, setResetState] = useState(initialState.resBtn);
-  let [hoursMod, minsMod, secsMod] = [Math.floor(counter / (60 * 60)), Math.floor(counter % (60 * 60) / 60), counter % (60 * 60) % 60];
+  // const [btnResetState, setResetState] = useState(initialState.resBtn);
+  // let [hoursMod, minsMod, secsMod] = [Math.floor(counter / (60 * 60)), Math.floor(counter % (60 * 60) / 60), counter % (60 * 60) % 60];
      //Состояние инпутов
   const [time, setTime] = useState({ hours: '', mins: '', secs: '' });
 
   let [hoursPart, minsPart, secsPart] = [0, 0, 0];
   let t0;
-  const handleClick = () => { setBtnState(!btnState); setCounter(()=>handleCounter(time)) }
-   function clearFunc({resBtn, startBtn, inCount }=initialState) {
-    setResetState( resBtn );
+  const handleClick = () => { console.log(1); setBtnState(!btnState); setCounter(()=>handleCounter(time)) }
+  function clearFunc({startBtn, inCount } = initialState) {
+        // function clearFunc({resBtn, startBtn, inCount }=initialState) {
+    // setResetState( resBtn );
     setBtnState( startBtn );
     setCounter(inCount);
     setTime({ hours:'', mins:'', secs:''});
@@ -332,10 +333,14 @@ const TimerContainerReset = ({ seconds, refresh, render }) => {
     return (!counter ? hoursPart + minsPart + secsPart : counter);
   };
   //  console.log(time);  
-  
+ 
+  useEffect(() => {
+
+  }, []);
   let pauseState=counter;
    useEffect(() => {
-    t0 = performance.now();
+     t0 = performance.now();
+     
      let interval;
      (pauseState*1000 <= refresh) && (pauseState=initialState.inCount);
     setCounter(pauseState);
@@ -350,15 +355,16 @@ const TimerContainerReset = ({ seconds, refresh, render }) => {
     return () => {clearInterval(interval) }
   }, [btnState]);
   const Render = (props) => { return render(props) };  
+  // const Controls = (props) => { return controls(props )};
   pauseState = counter;
   return <>    <Render seconds={counter.toFixed(2)} />
-    <TimerControlInput counter={counter} handleUserInput={handleUserInput} time={time} handleClick={handleClick} clearFunc={clearFunc} btnState={btnState} />
-
+    {/* <Controls counter={counter} handleUserInput={handleUserInput} time={time} handleClick={handleClick} clearFunc={clearFunc} btnState={btnState} /> */}
+    <TimerControl counter={counter} handleUserInput={handleUserInput} time={time} handleClick={handleClick} clearFunc={clearFunc} btnState={btnState} />
         </>
 };         
 
 
-const TimerControlInput = ({ counter, handleUserInput, time, handleClick, clearFunc, btnState}) => {
+const TimerControl = ({ counter, handleUserInput, time, handleClick, clearFunc, btnState }) => {
   return  <> 
    <div className='timerBoard ms'>
       <input className="timeCell" name="inputHours" maxLength="2" disabled={!counter ? false : true} value={time.hours} placeholder="hh" onInput={e => { handleUserInput(e.target.value, 'hours') }} />
@@ -368,7 +374,8 @@ const TimerControlInput = ({ counter, handleUserInput, time, handleClick, clearF
       <input className="timeCell" name="inputSecs" maxLength="2" disabled={!counter ? false : true} value={time.secs} placeholder="ss" onInput={e => {handleUserInput(e.target.value, 'secs') }}/>
     </div> 
        <div className='controlsWrapper'>
-   <button className='timerBtn' onClick={handleClick}> {  btnState ? "Pause" : "Start"}</button>
+      {/* <button className='timerBtn' onClick={(e) => { console.log(e); handleClick() }}> {  btnState ? "Pause" : "Start"}</button> */}
+         <button className='timerBtn' onClick={(e) => { console.log(e); handleClick() }}> {  btnState ? "Pause" : "Start"}</button>
       <button className='timerBtn' onClick={() => clearFunc() }> Reset</button>
       </div>
   </>
@@ -421,7 +428,7 @@ function App() {
        <TimerContainer  seconds={3467} refresh={50} render={Watch} />
       </Section>
         <Section name='task-9 TimerControl + TimerContainer'>
-        <TimerContainerReset seconds={0} refresh={50} render={LCD} getData={TimerControlInput } />
+        <TimerContainerReset refresh={50} render={LCD} controls={TimerControl } />
              </Section>
     </div>
   );