2023-04-04 09:11:34 -06:00
|
|
|
import { ago } from "../utils/ago";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
|
2023-04-04 13:27:33 -06:00
|
|
|
const replaceReferencedFriendsInName = (name, referencedFriends, onSelect) => {
|
2023-04-04 09:33:14 -06:00
|
|
|
const friendIdToFriend = referencedFriends.reduce((friendMap, friend) => {
|
|
|
|
friendMap[friend.id] = friend;
|
|
|
|
return friendMap;
|
|
|
|
}, {});
|
2023-04-04 13:27:33 -06:00
|
|
|
return name.split(/(@\<\d+\>)/g).map((s) => {
|
|
|
|
const matches = /@\<(\d+)\>/g.exec(s);
|
|
|
|
if (matches) {
|
|
|
|
const [_match, id] = matches;
|
|
|
|
const name = friendIdToFriend[id].name;
|
|
|
|
|
|
|
|
return <a onClick={() => onSelect({ friendId: id })}>{name}</a>;
|
|
|
|
}
|
|
|
|
return s;
|
|
|
|
});
|
2023-04-04 09:33:14 -06:00
|
|
|
};
|
|
|
|
|
2023-04-04 13:27:33 -06:00
|
|
|
export default function TimerCard({ timer, onSelect }) {
|
2023-04-04 09:11:34 -06: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>
|
2023-04-04 09:33:14 -06:00
|
|
|
<code>{since}</code>{" "}
|
2023-04-04 13:27:33 -06:00
|
|
|
{replaceReferencedFriendsInName(
|
|
|
|
timer.name,
|
|
|
|
timer.referenced_friends,
|
|
|
|
onSelect
|
|
|
|
).map((s, i) => (
|
|
|
|
<span key={i}>{s}</span>
|
|
|
|
))}
|
2023-04-04 09:11:34 -06:00
|
|
|
</h1>
|
|
|
|
);
|
2023-04-03 23:14:07 -06:00
|
|
|
}
|