authelia/web/src/hooks/Timer.ts

import { useState, useCallback, useEffect } from "react";

export function useTimer(timeoutMs: number): [number, () => void, () => void] {
    const Interval = 100;
    const [startDate, setStartDate] = useState(undefined as Date | undefined);
    const [percent, setPercent] = useState(0);

    const trigger = useCallback(() => {
        setPercent(0);
        setStartDate(new Date());
    }, [setStartDate, setPercent]);

    const clear = useCallback(() => {
        setPercent(0);
        setStartDate(undefined);
    }, []);

    useEffect(() => {
        if (!startDate) {
            return;
        }

        const intervalNode = setInterval(() => {
            const elapsedMs = startDate ? new Date().getTime() - startDate.getTime() : 0;
            let p = (elapsedMs / timeoutMs) * 100.0;
            if (p >= 100) {
                p = 100;
                setStartDate(undefined);
            }
            setPercent(p);
        }, Interval);

        return () => clearInterval(intervalNode);
    }, [startDate, setPercent, setStartDate, timeoutMs]);

    return [percent, trigger, clear];
}