2023-04-04 11:11:34 -04:00
|
|
|
import { ago } from "../utils/ago";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
|
2023-04-04 01:14:07 -04:00
|
|
|
export default function TimerCard({ timer }) {
|
2023-04-04 11:11:34 -04:00
|
|
|
const [since, setSince] = useState(ago(timer.start));
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
let updateTimersInterval;
|
|
|
|
const msTillNextSecond = 1000 - (timer.start.getTime() % 1000);
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
updateTimersInterval = setInterval(
|
|
|
|
() => setSince(ago(timer.start)),
|
|
|
|
1_000
|
|
|
|
);
|
|
|
|
}, msTillNextSecond);
|
|
|
|
|
|
|
|
return () => clearInterval(updateTimersInterval);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<h1>
|
|
|
|
<code>{since}</code> since {timer.name}
|
|
|
|
</h1>
|
|
|
|
);
|
2023-04-04 01:14:07 -04:00
|
|
|
}
|