add security for inputs

src/App.tsx

@@ -16,7 +16,7 @@ function App() {
       <RangeInput min={2} max={10} />
       <PasswordConfirm min={5} />
       <TimerContainer
-        amountSeconds={1800}
+        amountMs={1800}
         refresh={100}
         render={TimerPresentation}
       />

src/components/TimerContainer/TimerContainer.tsx

@@ -5,16 +5,17 @@ import TimerControl from './TimerControl/TimerControl';
 import Timer from './Timer/Timer';
 
 interface ITimerContainerProps {
-  amountSeconds: number;
+  amountMs: number;
   refresh: number;
   render: ({ seconds }: { seconds: number }) => JSX.Element;
 }
 const TimerContainer = ({
-  amountSeconds,
+  amountMs,
   refresh,
   render,
 }: ITimerContainerProps) => {
   const [flag, setFlag] = useState<string>('Start');
+  const [refreshMs, setRefreshMs] = useState<number>(0);
   const [hours, setHours] = useState<number>(0);
   const [minutes, setMinutes] = useState<number>(0);
   const [seconds, setSeconds] = useState<number>(0);
@@ -23,14 +24,15 @@ const TimerContainer = ({
   return (
     <div className={s.timerContainerWrapper}>
       <Timer
-        time={time > 0 ? time : amountSeconds}
+        time={time > 0 ? time * 1000 : amountMs}
         flag={flag}
         setFlag={setFlag}
-        refresh={refresh}
+        refresh={refresh > 0 ? refreshMs * 100 : refresh}
         render={render}
       />
       <TimerControl
         flag={flag}
+        setRefreshMs={setRefreshMs}
         setHours={setHours}
         setMinutes={setMinutes}
         setSeconds={setSeconds}

src/components/TimerContainer/TimerControl/TimerControl.tsx

@@ -4,6 +4,7 @@ import s from './TimerControl.module.css';
 
 interface ITimerControlProps {
   flag: string;
+  setRefreshMs: React.Dispatch<React.SetStateAction<number>>;
   setHours: React.Dispatch<React.SetStateAction<number>>;
   setMinutes: React.Dispatch<React.SetStateAction<number>>;
   setSeconds: React.Dispatch<React.SetStateAction<number>>;
@@ -11,6 +12,7 @@ interface ITimerControlProps {
 
 const TimerControl = ({
   flag,
+  setRefreshMs,
   setHours,
   setMinutes,
   setSeconds,
@@ -18,8 +20,10 @@ const TimerControl = ({
   const handleTimeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     const name = e.target.name;
     const value = Number(e.target.value);
-    if (flag === 'Pause') return;
     switch (name) {
+      case 'refresh':
+        setRefreshMs(value);
+        break;
       case 'hours':
         setHours(value);
         break;
@@ -34,14 +38,25 @@ const TimerControl = ({
     }
   };
 
+  const isProceed = flag === 'Pause';
+
   return (
     <div className={s.timerControlWrapper}>
+      <input
+        onChange={handleTimeInput}
+        name="refresh"
+        className={s.timerInput}
+        type="number"
+        placeholder="Refresh 1 equal 100ms"
+        disabled={isProceed ? true : false}
+      ></input>
       <input
         onChange={handleTimeInput}
         name="hours"
         className={s.timerInput}
         type="number"
         placeholder="Hours"
+        disabled={isProceed ? true : false}
       ></input>
       <input
         onChange={handleTimeInput}
@@ -49,6 +64,7 @@ const TimerControl = ({
         className={s.timerInput}
         type="number"
         placeholder="Minutes"
+        disabled={isProceed ? true : false}
       ></input>
       <input
         onChange={handleTimeInput}
@@ -56,6 +72,7 @@ const TimerControl = ({
         className={s.timerInput}
         type="number"
         placeholder="Seconds"
+        disabled={isProceed ? true : false}
       ></input>
     </div>
   );

src/components/TimerPresentation/TimerPresentation.tsx

@@ -20,7 +20,7 @@ const TimerPresentation = ({ seconds }: ITimerPresentationProps) => {
       '[data-second-hand]',
     ) as HTMLDivElement;
     function setClock() {
-      const currentDate = new Date(seconds * 1000);
+      const currentDate = new Date(seconds);
       const secondsRatio = currentDate.getSeconds() / 60;
       const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
       const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;