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 | 3x | /* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
const TimerCountdown = ({ totalSeconds, setTotalSeconds }) => {
// const [totalSeconds, setTotalSeconds] = useState(5 * 60); // 5 mins in seconds
useEffect(() => {
const interval = setInterval(() => {
// Decrease the total seconds by 1 only if it's greater than 0
if (totalSeconds > 0) {
setTotalSeconds((prevTotalSeconds) => prevTotalSeconds - 1);
}
}, 1000);
// Cleanup the interval when the component unmounts
return () => clearInterval(interval);
}, [totalSeconds]); // Re-run the effect when totalSeconds changes
// Calculate minutes and seconds
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
// Format minutes and seconds as mm:ss
const formattedTime = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
return <span>{formattedTime}</span>;
};
export default TimerCountdown;
|