refactor some functions

src/components/Timer/Timer.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import TimeManager from '../../helpers/TimeManager';
 import Button from '../Button/Button';
 import styles from './Timer.module.css'
+import { formatTime } from '../../helpers/Formatters';
 
 const Timer = () => {
     const [timeManager, recreateTimeManager] = useState(() => new TimeManager(0))
@@ -9,19 +10,15 @@ const Timer = () => {
     const [startDate, setStartDate] = useState('00:00');
     const [endDate, setEndDate] = useState('00:00');
 
-    const formatTime = (date: Date) => {
+
-        const hours = String(date.getHours()).padStart(2, '0');
-        const minutes = String(date.getMinutes()).padStart(2, '0');
-        return `${hours}:${minutes}`;
-      };
 
     useEffect(() => {
         timeManager.start()
         console.log("timer started")
         const interval = setInterval(() => {
             setRemainingTime(timeManager.getRemainingTime());
-            let startString = formatTime(timeManager.getStartDate());
+            const startString = formatTime(timeManager.getStartDate());
-            let endString = formatTime(timeManager.getEndDate());
+            const endString = formatTime(timeManager.getEndDate());
             if (startString === endString) {
                 setStartDate('00:00');
                 setEndDate('00:00');

src/helpers/Formatters.ts

@@ -0,0 +1,12 @@
+export const formatFullTime = (date: Date) => {
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+};
+
+export const formatTime = (date: Date) => {
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${hours}:${minutes}`;
+};

src/pages/Timers/Timers.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from 'react';
 import Timer from '../../components/Timer/Timer';
 import styles from './Timers.module.css';
+import {formatFullTime} from "../../helpers/Formatters.ts";
 
 const Timers = () => {
     const [time, setTime] = useState(new Date());
@@ -13,18 +14,12 @@ const Timers = () => {
         return () => clearInterval(intervalId);
     }, [])
 
-    const formatTime = (date: Date) => {
-        const hours = String(date.getHours()).padStart(2, '0');
-        const minutes = String(date.getMinutes()).padStart(2, '0');
-        const seconds = String(date.getSeconds()).padStart(2, '0');
-        return `${hours}:${minutes}:${seconds}`;
-      };
 
     return (
         <div className={styles.content}>
             <header className={styles.header}>
                 <a className={`${styles.header_text} ${styles.title}`}>MetaTimer</a>
-                <a className={`${styles.header_text} ${styles.title}`}>{formatTime(time)}</a>
+                <a className={`${styles.header_text} ${styles.title}`}>{formatFullTime(time)}</a>
             </header>
             <div className={styles.timers_container}>
                 <Timer/>