HW<react03timercontrol>

react/03/myproject03/src/App_timer_control.js

@@ -0,0 +1,62 @@
+import logo from './logo.svg';
+import React, { useState, useEffect, useRef } from 'react';
+import './App.scss';
+import { getTimeData, getTotalSeconds } from './utills';
+
+
+const Timer = ({ count, running }) => {
+
+    let [state, setState] = useState({ paused: !running, count, ...getTimeData(count) });
+    useEffect(() => {
+        let timer = undefined;
+        if (!state.paused) {
+            if (state.count > 0)
+                timer = setInterval(() => setStateInt({ count: state.count - 1 }), 1000);
+            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 time = getTimeData(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" />
+            {time.hours} : {time.minutes} : {time.seconds}
+            <br/>
+            <button onClick={() => start()}>Start</button>
+            <button onClick={() => pause()}>Pause</button>
+            <button onClick={() => reset()}>Reset</button>
+            <button onClick={() => stop()}>Stop</button>
+        </>
+    );
+}
+
+function App() {
+
+    return (
+        <>
+            <div className="App">
+                <Timer count={10} />
+            </div>
+        </>
+    );
+}
+
+export default App;

react/03/myproject03/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import App from './App_timer_control';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));

react/03/myproject03/src/utills.js

@@ -0,0 +1,12 @@
+export const getTotalSeconds = (h, m, s) => h * 3600 + m * 60 + s;
+export const getTimeData = (totalSeconds) => {
+    let currDate = new Date(totalSeconds * 1000).toISOString().slice(11, 19);
+    const timeRgx = /([0-9][0-9]):([0-9][0-9]):([0-9][0-9])/;
+    const match = currDate.match(timeRgx);
+    return {
+        hours: match[1],
+        minutes: match[2],
+        seconds: match[3],
+        totalSeconds
+    };
+}