mafap/client/src/components/timerCard.tsx

65 lines
1.7 KiB
TypeScript
Raw Normal View History

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 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 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));
useEffect(() => {
2023-04-04 15:44:06 -06:00
let updateTimersInterval: ReturnType<typeof setInterval>;
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>{" "}
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
))}
</h1>
);
2023-04-03 23:14:07 -06:00
}