add some changes

src/components/TimerContainer/Timer/Timer.tsx

@@ -9,16 +9,16 @@ interface IRenderProps {
 
 interface TimerProps {
   time: number;
-  flag: string;
-  setFlag: React.Dispatch<React.SetStateAction<string>>;
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   refresh: number;
   render: ({ seconds, refresh }: IRenderProps) => JSX.Element;
 }
 
 const Timer = ({
   time,
-  flag,
-  setFlag,
+  isOpen,
+  setIsOpen,
   refresh,
   render: TimerPresentation,
 }: TimerProps) => {
@@ -30,30 +30,20 @@ const Timer = ({
 
   useEffect(() => {
     const handleInterval = () =>
-      timeLeft > 0 && flag === 'Pause' && setTimeLeft(timeLeft - 1);
+      timeLeft > 0 && isOpen && setTimeLeft(timeLeft - 1);
 
-    const idInterval = setInterval(handleInterval, refresh);
+    const idInterval = setInterval(handleInterval, 1000);
     return () => clearInterval(idInterval);
-  }, [timeLeft, flag, refresh]);
+  }, [timeLeft, isOpen]);
 
-  const handleTimer = () => {
-    switch (flag) {
-      case 'Start':
-        setFlag('Pause');
-        break;
-      case 'Pause':
-        setFlag('Start');
-        break;
-      default:
-        break;
-    }
-  };
+  const handleTimer = () => setIsOpen(isOpen ? false : true);
 
   return (
     <div className={s.timerWrapper}>
       <button className={s.timerBtn} onClick={handleTimer}>
-        {flag}
+        {isOpen ? 'Stop' : 'Start'}
       </button>
+      <p>speed per tic : 1000 ms</p>
       <p>refresh speed {refresh} ms</p>
       <p>{timeLeft} sec</p>
       <TimerPresentation seconds={timeLeft} refresh={refresh} />

src/components/TimerContainer/TimerContainer.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import s from './TimerContainer.module.css';
 import TimerControl from './TimerControl/TimerControl';
@@ -19,7 +19,7 @@ const TimerContainer = ({
   refresh,
   render,
 }: ITimerContainerProps) => {
-  const [flag, setFlag] = useState<string>('Start');
+  const [isOpen, setIsOpen] = useState<boolean>(false);
   const [refreshMs, setRefreshMs] = useState<number>(0);
   const [hours, setHours] = useState<number>(0);
   const [minutes, setMinutes] = useState<number>(0);
@@ -27,17 +27,21 @@ const TimerContainer = ({
 
   const time = (hours * 60 + minutes) * 60 + seconds;
 
+  useEffect(() => {
+    setRefreshMs(refresh);
+  }, [refresh]);
+
   return (
     <div className={s.timerContainerWrapper}>
       <Timer
         time={time === 0 ? amountMs / 1000 : time}
-        flag={flag}
-        setFlag={setFlag}
-        refresh={refreshMs === 0 ? refresh : refreshMs * 100}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        refresh={refreshMs}
         render={render}
       />
       <TimerControl
-        flag={flag}
+        isOpen={isOpen}
         setRefreshMs={setRefreshMs}
         setHours={setHours}
         setMinutes={setMinutes}

src/components/TimerContainer/TimerControl/TimerControl.tsx

@@ -1,9 +1,7 @@
-import { useState } from 'react';
-
 import s from './TimerControl.module.css';
 
 interface ITimerControlProps {
-  flag: string;
+  isOpen: boolean;
   setRefreshMs: React.Dispatch<React.SetStateAction<number>>;
   setHours: React.Dispatch<React.SetStateAction<number>>;
   setMinutes: React.Dispatch<React.SetStateAction<number>>;
@@ -11,7 +9,7 @@ interface ITimerControlProps {
 }
 
 const TimerControl = ({
-  flag,
+  isOpen,
   setRefreshMs,
   setHours,
   setMinutes,
@@ -22,7 +20,7 @@ const TimerControl = ({
     const value = Number(e.target.value);
     switch (name) {
       case 'refresh':
-        setRefreshMs(value);
+        setRefreshMs(value * 10);
         break;
       case 'hours':
         setHours(value);
@@ -38,8 +36,6 @@ const TimerControl = ({
     }
   };
 
-  const isProceed = flag === 'Pause' ? true : false;
-
   return (
     <div className={s.timerControlWrapper}>
       <input
@@ -47,8 +43,9 @@ const TimerControl = ({
         name="refresh"
         className={s.timerInput}
         type="number"
-        placeholder="Refresh 1 equal 100ms"
-        disabled={isProceed}
+        placeholder="Refresh 1 equal 10ms"
+        disabled={isOpen}
+        min={0}
       ></input>
       <input
         onChange={handleTimeInput}
@@ -56,7 +53,8 @@ const TimerControl = ({
         className={s.timerInput}
         type="number"
         placeholder="Hours"
-        disabled={isProceed}
+        disabled={isOpen}
+        min={0}
       ></input>
       <input
         onChange={handleTimeInput}
@@ -64,7 +62,8 @@ const TimerControl = ({
         className={s.timerInput}
         type="number"
         placeholder="Minutes"
-        disabled={isProceed}
+        disabled={isOpen}
+        min={0}
       ></input>
       <input
         onChange={handleTimeInput}
@@ -72,7 +71,8 @@ const TimerControl = ({
         className={s.timerInput}
         type="number"
         placeholder="Seconds"
-        disabled={isProceed}
+        disabled={isOpen}
+        min={0}
       ></input>
     </div>
   );