2023-12-29 07:14:39 +00:00
|
|
|
import { Reply, useArk } from "@lume/ark";
|
2023-12-26 06:44:38 +00:00
|
|
|
import { LoaderIcon } from "@lume/icons";
|
|
|
|
import { NDKEventWithReplies } from "@lume/types";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { twMerge } from "tailwind-merge";
|
2023-12-19 01:06:10 +00:00
|
|
|
|
2023-12-29 07:14:39 +00:00
|
|
|
export function ReplyList({
|
2023-12-26 06:44:38 +00:00
|
|
|
eventId,
|
|
|
|
title,
|
|
|
|
className,
|
|
|
|
}: { eventId: string; title?: string; className?: string }) {
|
|
|
|
const ark = useArk();
|
|
|
|
const [data, setData] = useState<null | NDKEventWithReplies[]>(null);
|
2023-12-24 12:14:46 +00:00
|
|
|
|
2023-12-26 06:44:38 +00:00
|
|
|
useEffect(() => {
|
2023-12-29 07:14:39 +00:00
|
|
|
let sub;
|
2023-12-26 06:44:38 +00:00
|
|
|
let isCancelled = false;
|
2023-12-24 12:14:46 +00:00
|
|
|
|
2023-12-26 06:44:38 +00:00
|
|
|
async function fetchRepliesAndSub() {
|
|
|
|
const events = await ark.getThreads({ id: eventId });
|
|
|
|
if (!isCancelled) {
|
|
|
|
setData(events);
|
|
|
|
}
|
|
|
|
// subscribe for new replies
|
|
|
|
sub = ark.subscribe({
|
|
|
|
filter: {
|
|
|
|
"#e": [eventId],
|
|
|
|
since: Math.floor(Date.now() / 1000),
|
|
|
|
},
|
|
|
|
closeOnEose: false,
|
|
|
|
cb: (event: NDKEventWithReplies) => setData((prev) => [event, ...prev]),
|
|
|
|
});
|
|
|
|
}
|
2023-12-24 12:14:46 +00:00
|
|
|
|
2023-12-26 06:44:38 +00:00
|
|
|
fetchRepliesAndSub();
|
2023-12-24 12:14:46 +00:00
|
|
|
|
2023-12-26 06:44:38 +00:00
|
|
|
return () => {
|
|
|
|
isCancelled = true;
|
|
|
|
if (sub) sub.stop();
|
|
|
|
};
|
|
|
|
}, [eventId]);
|
2023-12-24 12:14:46 +00:00
|
|
|
|
2023-12-26 06:44:38 +00:00
|
|
|
return (
|
|
|
|
<div className={twMerge("flex flex-col gap-5", className)}>
|
|
|
|
<h3 className="font-semibold">{title}</h3>
|
|
|
|
{!data ? (
|
|
|
|
<div className="flex h-16 items-center justify-center rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
|
|
|
|
<LoaderIcon className="h-5 w-5 animate-spin" />
|
|
|
|
</div>
|
|
|
|
) : data.length === 0 ? (
|
2023-12-29 01:26:13 +00:00
|
|
|
<div className="flex w-full items-center justify-center bg-neutral-50 dark:bg-neutral-950 rounded-lg">
|
2023-12-26 06:44:38 +00:00
|
|
|
<div className="flex flex-col items-center justify-center gap-2 py-6">
|
|
|
|
<h3 className="text-3xl">👋</h3>
|
|
|
|
<p className="leading-none text-neutral-600 dark:text-neutral-400">
|
|
|
|
Be the first to Reply!
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
data.map((event) => (
|
|
|
|
<Reply key={event.id} event={event} rootEvent={eventId} />
|
|
|
|
))
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
2023-12-19 01:06:10 +00:00
|
|
|
}
|