HW<react03>done

react/03/myproject03/src/App_lcd.js

@@ -53,7 +53,7 @@ const TimerContainer = ({ count, render, refresh = 1000 , running = false}) => {
     );
 }
 const Timer = (props) => <h2>{props.timer.hours} : {props.timer.minutes} : {props.timer.seconds}</h2>;
-function App() {
+function AppLcd() {
 
     return (
         <>
@@ -64,4 +64,4 @@ function App() {
     );
 }
 
-export default App;
+export default AppLcd;

react/03/myproject03/src/App_timer.js

@@ -33,7 +33,7 @@ const Timer = ({ count }) => {
     );
 }
 
-function App() {
+function AppTimer() {
 
     return (
         <>
@@ -44,4 +44,4 @@ function App() {
     );
 }
 
-export default App;
+export default AppTimer;

react/03/myproject03/src/App_timer_container.js

@@ -53,7 +53,7 @@ const TimerContainer = ({ count, render, refresh = 1000 , running = false}) => {
     );
 }
 const SecondsTimer = (props) => <h2>{props.timer.totalSeconds}</h2>;
-function App() {
+function AppTimerContainer() {
 
     return (
         <>
@@ -64,4 +64,4 @@ function App() {
     );
 }
 
-export default App;
+export default AppTimerContainer;

react/03/myproject03/src/App_timer_control.js

@@ -48,7 +48,7 @@ const Timer = ({ count, running }) => {
     );
 }
 
-function App() {
+function AppTimerControl() {
 
     return (
         <>
@@ -59,4 +59,4 @@ function App() {
     );
 }
 
-export default App;
+export default AppTimerControl;

react/03/myproject03/src/App_watch.js

@@ -6,7 +6,7 @@ import './WatchFace';
 import { WatchFace } from './WatchFace';
 
 
-const TimerContainer = ({ count, render, refresh = 1000 , running = false}) => {
+const TimerContainer = ({count, render, refresh = 100 , running = false}) => {
     let [state, setState] = useState({ paused: !running, count, ...getTimeData(count) });
     useEffect(() => {
         let timer = undefined;
@@ -32,7 +32,7 @@ const TimerContainer = ({ count, render, refresh = 1000 , running = false}) => {
         reset();
     }
 
-    let timer = getTimeData(state.count);
+    let timer = {totalSeconds: state.count};
     let Render = render;
     return (
         <>
@@ -57,7 +57,7 @@ const TimerContainer = ({ count, render, refresh = 1000 , running = false}) => {
     );
 }
 
-function App() {
+function AppWatch() {
 
     return (
         <>
@@ -68,4 +68,4 @@ function App() {
     );
 }
 
-export default App;
+export default AppWatch;

react/03/myproject03/src/App_watch_timer_control.js

@@ -0,0 +1,58 @@
+import logo from './logo.svg';
+import React, { useState, useEffect } from 'react';
+import './App.scss';
+import { getTimeData, getTotalSeconds } from './utills';
+import './WatchFace';
+import { WatchFace } from './WatchFace';
+import { WatchFaceController } from './WatchFaceController';
+
+
+const TimerContainer = ({ count, render, renderController, refresh = 100, 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 = (totalSeconds = undefined) => setStateInt({ count: totalSeconds ?? count });
+    const stop = (totalSeconds = undefined) => {
+        pause();
+        reset(totalSeconds);
+    }
+
+    let Render = render;
+    let RenderController = renderController;
+    return (
+        <>
+            <Render timer={{ totalSeconds: state.count }} />
+            <br />
+            <RenderController timerController={{ start, pause, reset, stop, count }} /> {/*start count */}
+        </>
+    );
+}
+
+function AppWatchController() {
+
+    return (
+        <>
+            <div className="App">
+                <TimerContainer count={10} render={WatchFace} renderController={WatchFaceController} />
+            </div>
+        </>
+    );
+}
+
+export default AppWatchController;

react/03/myproject03/src/WatchFace.js

@@ -1,15 +1,17 @@
 import "./WatchFace.scss"
+import { getTimeData } from './utills';
 
 export const WatchFace = ({timer}) => {
+    let {hours, minutes, seconds} = timer.totalSeconds ? getTimeData(timer.totalSeconds) : timer;
     return (
         <>
-            <h1>{timer.hours} : {timer.minutes} : {timer.seconds}</h1>;
+            <h1>{hours} : {minutes} : {seconds}</h1>;
             <div
                 className='timer'
                 style={{
-                    "--hours": `${timer.hours}`,
-                    "--minutes": `${timer.minutes}`,
-                    "--seconds": `${timer.seconds}`
+                    "--hours": `${hours}`,
+                    "--minutes": `${minutes}`,
+                    "--seconds": `${seconds}`
                 }}
             >
                 <span className='timer_hours' />

react/03/myproject03/src/WatchFaceController.js

@@ -0,0 +1,27 @@
+import { getTimeData, getTotalSeconds } from './utills';
+import { useState} from 'react';
+export const WatchFaceController = ({ timerController: { start, pause, stop, reset, count } }) => {
+    let [state, setState] = useState({ count, ...getTimeData(count) }); //count исходя из данных в input
+    const setStateInt = newState => {
+        setState(state = { ...state, ...newState });
+        reset(state.count);
+    }
+    return (
+        <>
+            <input value={state.hours}
+                onChange={e => setStateInt({ hours: e.target.value, count: getTotalSeconds(e.target.value, state.minutes, state.seconds) })}
+                type="number" />
+            <input value={state.minutes}
+                onChange={e => setStateInt({ minutes: e.target.value, count: getTotalSeconds(state.hours, e.target.value, state.seconds) })}
+                type="number" />
+            <input value={state.seconds}
+                onChange={e => setStateInt({ seconds: e.target.value, count: getTotalSeconds(state.hours, state.minutes, e.target.value) })}
+                type="number" />
+            <br />
+            <button onClick={() => start()}>Start</button>
+            <button onClick={() => pause()}>Pause</button>
+            <button onClick={() => reset(state.count)}>Reset</button>
+            <button onClick={() => stop(state.count)}>Stop</button>
+        </>
+    );
+}

react/03/myproject03/src/index.js

@@ -1,13 +1,29 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App_watch';
+import AppLcd from './App_lcd';
+import AppTimer from './App_timer';
+import AppTimerControl from './App_timer_control';
+import AppTimerContainer from './App_timer_container';
+import AppWatch from './App_watch';
+import AppWatchController from './App_watch_timer_control';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <h1>Timer</h1>
+    <AppTimer/>
+    <h1>Timer Control</h1>
+    <AppTimerControl/>
+    <h1>Timer Container</h1>
+    <AppTimerContainer/>
+    <h1>LCD</h1>
+    <AppLcd />
+    <h1>Watch</h1>
+    <AppWatch />
+    <h1>Watch Face Controller</h1>
+    <AppWatchController />
   </React.StrictMode>
 );