Ategon/Jamjar
1
0
Fork 0
mirror of https://github.com/Ategon/Jamjar.git synced 2025-02-12 06:16:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix timer hydration

Browse source
This commit is contained in:
Ategon 2025-01-19 19:26:18 -05:00
parent ce224af649
commit 2325d648d9
1 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/timers/Timer.tsx
View file

@ -10,6 +10,11 @@ export default function Timer({
targetDate: Date;
}) {
const [timeLeft, setTimeLeft] = useState(targetDate.getTime() - Date.now());
const [mounted, setMounted] = useState<boolean>(false);
useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
const interval = setInterval(() => {
@ -29,16 +34,24 @@ export default function Timer({
const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
// const minutes = Math.floor((totalSeconds % 3600) / 60);
// const seconds = totalSeconds % 60;
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
return `${days} days ${hours.toString()} hours`;
return [
`${days} days ${hours.toString()} hours`,
`${minutes.toString()} minutes ${seconds.toString()} seconds`,
];
};
if (!mounted) {
return null;
}
return (
<div>
<p>{name}</p>
<p className="text-4xl">{formatTime(timeLeft)}</p>
<p className="text-4xl text-wrap">{formatTime(timeLeft)[0]}</p>
<p className="text-4xl text-wrap">{formatTime(timeLeft)[1]}</p>
</div>
);
}