Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 54x 6x 6x 6x 4x 2x 2x 2x 2x 2x 2x 2x 2x 2x 6x 2x 2x 2x 2x 2x | import { useState, useEffect, useRef } from "react";
import GiveText from "@shared/Text/GiveText";
type Props = {
deEscalationTime: number | null | undefined;
};
const RiskCountdown = ({ deEscalationTime }: Props) => {
const [remainingSeconds, setRemainingSeconds] = useState(0);
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
if (!deEscalationTime || deEscalationTime <= 0) return;
const tick = () => {
const now = Math.floor(Date.now() / 1000);
const diff = deEscalationTime - now;
if (diff > 0) {
setRemainingSeconds(diff);
timeoutRef.current = setTimeout(tick, 1000);
} else E{
setRemainingSeconds(0);
}
};
tick();
return () => {
Eif (timeoutRef.current) clearTimeout(timeoutRef.current);
};
}, [deEscalationTime]);
if (remainingSeconds <= 0) return null;
const hours = String(Math.floor(remainingSeconds / 3600)).padStart(2, "0");
const minutes = String(Math.floor((remainingSeconds % 3600) / 60)).padStart(
2,
"0",
);
const seconds = String(remainingSeconds % 60).padStart(2, "0");
const formattedTime = `${hours}:${minutes}:${seconds}`;
return (
<GiveText variant="bodyXS" color="secondary">
Next de-escalation in{" "}
<GiveText variant="bodyXS" color="primary" component="span">
{formattedTime}
</GiveText>
</GiveText>
);
};
export default RiskCountdown;
|