2023-04-04 09:11:34 -06:00
|
|
|
import { useEffect, useState } from "react";
|
2023-04-04 15:44:06 -06:00
|
|
|
import { ago } from "../utils/ago";
|
|
|
|
import { TimerResponse, Friend, TimersFilter } from "../utils/types";
|
|
|
|
|
|
|
|
const replaceReferencedFriendsInName = (
|
|
|
|
name: string,
|
|
|
|
referencedFriends: Friend[],
|
|
|
|
onSelect: (select?: TimersFilter) => void
|
|
|
|
) => {
|
|
|
|
const friendIdToFriend = referencedFriends.reduce(
|
|
|
|
(friendMap: Record<string, Friend>, friend) => {
|
|
|
|
friendMap[friend.id.toString()] = friend;
|
|
|
|
return friendMap;
|
|
|
|
},
|
|
|
|
{}
|
|
|
|
);
|
2023-04-04 09:11:34 -06:00
|
|
|
|
2023-04-04 15:44:06 -06:00
|
|
|
return name.split(/(@\<\d+\>)/g).map((s: string) => {
|
2023-04-04 13:27:33 -06:00
|
|
|
const matches = /@\<(\d+)\>/g.exec(s);
|
|
|
|
if (matches) {
|
|
|
|
const [_match, id] = matches;
|
|
|
|
const name = friendIdToFriend[id].name;
|
|
|
|
|
2023-04-04 15:44:06 -06:00
|
|
|
return <a onClick={() => onSelect({ friendId: Number(id) })}>{name}</a>;
|
2023-04-04 13:27:33 -06:00
|
|
|
}
|
|
|
|
return s;
|
|
|
|
});
|
2023-04-04 09:33:14 -06:00
|
|
|
};
|
|
|
|
|
2023-04-04 15:44:06 -06:00
|
|
|
export type TimerCardProps = {
|
|
|
|
timer: TimerResponse;
|
|
|
|
onSelect: (select?: TimersFilter) => void;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default function TimerCard({ timer, onSelect }: TimerCardProps) {
|
|
|
|
const [since, setSince] = useState<string>(ago(timer.start));
|
2023-04-04 09:11:34 -06:00
|
|
|
|
|
|
|
useEffect(() => {
|
2023-04-04 15:44:06 -06:00
|
|
|
let updateTimersInterval: ReturnType<typeof setInterval>;
|
2023-04-04 09:11:34 -06:00
|
|
|
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
|
2023-04-04 15:44:06 -06:00
|
|
|
).map((element: JSX.Element | string, i: number) => (
|
|
|
|
<span key={i}>{element}</span>
|
2023-04-04 13:27:33 -06:00
|
|
|
))}
|
2023-04-04 09:11:34 -06:00
|
|
|
</h1>
|
|
|
|
);
|
2023-04-03 23:14:07 -06:00
|
|
|
}
|