Untitled

import {FC, useEffect, useState} from "react";
import {getUnits} from "./transformTime";

interface IStopwatchFuncProps {}

export const StopwatchFunc: FC<IStopwatchFuncProps> = () => {
    const [status, setStatus] = useState<Boolean>(false);
    const [runningTime, setRunningTime] = useState<number>(0);
    const [laps, setLaps] = useState<Array<String>>([]);

    const toggleStopwatch = () => {
        setStatus((prev) => !prev);
    };

    useEffect(() => {
        let interval: any = null;

        if (status) {
            interval = setInterval(() => {
                setRunningTime((prev) => prev + 10);
            }, 10);
        } else {
            clearInterval(interval);
        }

        return () => clearInterval(interval);
    }, [status]);

    const resetStapwatch = () => {
        setRunningTime(0);
        setStatus(false);
        setLaps([]);
    };

    const {transformMin, transformSec, msec} = getUnits(runningTime);

    const addToLap = () => {
        setLaps((prev) => [
            ...prev,
            `${transformMin} : ${transformSec} : ${msec}`,
        ]);
    };

    const lapList = laps
        .reverse()
        .map((lap, index) => <li key={index}>{lap}</li>);

    return (
        <div className="stopwatch">
            <div className="stopwatch__wrapper">
                <p className="stopwatch__text">{transformMin}</p>
                <p className="stopwatch__separate">:</p>
                <p className="stopwatch__text">{transformSec}</p>
                <p className="stopwatch__separate">:</p>
                <p className="stopwatch__text">{msec}</p>
            </div>
            <div className="stopwatch__controls controls">
                <button
                    className={`controls__button ${
                        status
                            ? "controls__button--stop"
                            : "controls__button--start"
                    }`}
                    onClick={toggleStopwatch}
                >
                    {status ? "Stop" : "Start"}
                </button>
                <button className="controls__button" onClick={resetStapwatch}>
                    Reset
                </button>
                <button className="controls__button" onClick={addToLap}>
                    Lap
                </button>
            </div>
            {laps && (
                <ol className="stopwatch__laps laps" reversed={true}>
                    {lapList}
                </ol>
            )}
        </div>
    );
};


export const getUnits = (time: number) => {
    const seconds = time / 1000;

    const min = Math.floor(seconds / 60).toString();
    const sec = Math.floor(seconds % 60).toString();
    const msec = (seconds % 1).toFixed(2).substring(2);

    const transformMin = +min < 10 ? `0${min}` : min;
    const transformSec = +sec < 10 ? `0${sec}` : sec;

    return {transformMin, transformSec, msec};
};