done

src/App.tsx

@@ -5,7 +5,7 @@ import Spoiler from './components/Spoiler/Spoiler';
 import RangeInput from './components/RangeInput/RangeInput';
 import PasswordConfirm from './components/PasswordConfirm/PasswordConfirm';
 import TimerContainer from './components/TimerContainer/TimerContainer';
-import TimerPresentation from './components/TimerPresentation/TimerPresentation';
+import TimerPresentation from './components/TimerContainer/TimerPresentation/TimerPresentation';
 
 function App() {
   return (
@@ -16,8 +16,8 @@ function App() {
       <RangeInput min={2} max={10} />
       <PasswordConfirm min={5} />
       <TimerContainer
-        amountMs={1800}
-        refresh={100}
+        amountMs={180000}
+        refresh={1000}
         render={TimerPresentation}
       />
       <ToastContainer

src/components/TimerContainer/Timer/Timer.tsx

@@ -2,12 +2,17 @@ import { useState, useEffect } from 'react';
 
 import s from './Timer.module.css';
 
+interface IRenderProps {
+  seconds: number;
+  refresh: number;
+}
+
 interface TimerProps {
   time: number;
   flag: string;
   setFlag: React.Dispatch<React.SetStateAction<string>>;
   refresh: number;
-  render: ({ seconds }: { seconds: number }) => JSX.Element;
+  render: ({ seconds, refresh }: IRenderProps) => JSX.Element;
 }
 
 const Timer = ({
@@ -51,7 +56,7 @@ const Timer = ({
       </button>
       <p>refresh speed {refresh} ms</p>
       <p>{timeLeft} sec</p>
-      <TimerPresentation seconds={timeLeft} />
+      <TimerPresentation seconds={timeLeft} refresh={refresh} />
     </div>
   );
 };

src/components/TimerContainer/TimerContainer.tsx

@@ -4,10 +4,15 @@ import s from './TimerContainer.module.css';
 import TimerControl from './TimerControl/TimerControl';
 import Timer from './Timer/Timer';
 
+interface IRenderProps {
+  seconds: number;
+  refresh: number;
+}
+
 interface ITimerContainerProps {
   amountMs: number;
   refresh: number;
-  render: ({ seconds }: { seconds: number }) => JSX.Element;
+  render: ({ seconds, refresh }: IRenderProps) => JSX.Element;
 }
 const TimerContainer = ({
   amountMs,
@@ -21,13 +26,14 @@ const TimerContainer = ({
   const [seconds, setSeconds] = useState<number>(0);
 
   const time = (hours * 60 + minutes) * 60 + seconds;
+
   return (
     <div className={s.timerContainerWrapper}>
       <Timer
-        time={time > 0 ? time * 1000 : amountMs}
+        time={time === 0 ? amountMs / 1000 : time}
         flag={flag}
         setFlag={setFlag}
-        refresh={refresh > 0 ? refreshMs * 100 : refresh}
+        refresh={refreshMs === 0 ? refresh : refreshMs * 100}
         render={render}
       />
       <TimerControl

src/components/TimerContainer/TimerControl/TimerControl.tsx

@@ -38,7 +38,7 @@ const TimerControl = ({
     }
   };
 
-  const isProceed = flag === 'Pause';
+  const isProceed = flag === 'Pause' ? true : false;
 
   return (
     <div className={s.timerControlWrapper}>
@@ -48,7 +48,7 @@ const TimerControl = ({
         className={s.timerInput}
         type="number"
         placeholder="Refresh 1 equal 100ms"
-        disabled={isProceed ? true : false}
+        disabled={isProceed}
       ></input>
       <input
         onChange={handleTimeInput}
@@ -56,7 +56,7 @@ const TimerControl = ({
         className={s.timerInput}
         type="number"
         placeholder="Hours"
-        disabled={isProceed ? true : false}
+        disabled={isProceed}
       ></input>
       <input
         onChange={handleTimeInput}
@@ -64,7 +64,7 @@ const TimerControl = ({
         className={s.timerInput}
         type="number"
         placeholder="Minutes"
-        disabled={isProceed ? true : false}
+        disabled={isProceed}
       ></input>
       <input
         onChange={handleTimeInput}
@@ -72,7 +72,7 @@ const TimerControl = ({
         className={s.timerInput}
         type="number"
         placeholder="Seconds"
-        disabled={isProceed ? true : false}
+        disabled={isProceed}
       ></input>
     </div>
   );

src/components/TimerPresentation/TimerPresentation.tsx

@@ -3,9 +3,10 @@ import React, { useEffect } from 'react';
 import s from './TimerPresentation.module.css';
 interface ITimerPresentationProps {
   seconds: number;
+  refresh: number;
 }
 
-const TimerPresentation = ({ seconds }: ITimerPresentationProps) => {
+const TimerPresentation = ({ seconds, refresh }: ITimerPresentationProps) => {
   useEffect(() => {
     function setRotation(el: HTMLDivElement, rotationRatio: number) {
       el.style.setProperty('--rotation', String(rotationRatio * 360));
@@ -20,18 +21,17 @@ const TimerPresentation = ({ seconds }: ITimerPresentationProps) => {
       '[data-second-hand]',
     ) as HTMLDivElement;
     function setClock() {
-      const currentDate = new Date(seconds);
-      const secondsRatio = currentDate.getSeconds() / 60;
-      const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
-      const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;
+      const secondsRatio = seconds / 60;
+      const minutesRatio = (secondsRatio + secondsRatio) / 60;
+      const hoursRatio = (minutesRatio + secondsRatio / 12) / 12;
       setRotation(secondHand, secondsRatio);
       setRotation(minuteHand, minutesRatio);
       setRotation(hourHand, hoursRatio);
     }
     setClock();
-    const idInterval = setInterval(setClock, 1000);
+    const idInterval = setInterval(setClock, refresh);
     return () => clearInterval(idInterval);
-  }, [seconds]);
+  }, [seconds, refresh]);
 
   return (
     <div className={s.clock}>