71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import { NDKKind } from '@nostr-dev-kit/ndk';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
import { NoteSkeleton, Reply } from '@shared/notes';
|
|
|
|
import { useNostr } from '@utils/hooks/useNostr';
|
|
import { NDKEventWithReplies } from '@utils/types';
|
|
|
|
export function RepliesList({ id }: { id: string }) {
|
|
const { fetchAllReplies, sub } = useNostr();
|
|
const [data, setData] = useState<null | NDKEventWithReplies[]>(null);
|
|
|
|
useEffect(() => {
|
|
let isCancelled = false;
|
|
|
|
async function fetchRepliesAndSub() {
|
|
const events = await fetchAllReplies(id);
|
|
if (!isCancelled) {
|
|
setData(events);
|
|
}
|
|
// subscribe for new replies
|
|
sub(
|
|
{
|
|
kinds: [NDKKind.Text],
|
|
'#e': [id],
|
|
since: Math.floor(Date.now() / 1000),
|
|
},
|
|
(event: NDKEventWithReplies) => setData((prev) => [event, ...prev]),
|
|
false
|
|
);
|
|
}
|
|
fetchRepliesAndSub();
|
|
|
|
return () => {
|
|
isCancelled = true;
|
|
};
|
|
}, [id]);
|
|
|
|
if (!data) {
|
|
return (
|
|
<div className="mt-5 pb-10">
|
|
<div className="flex flex-col">
|
|
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
|
|
<NoteSkeleton />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mt-5 pb-10">
|
|
<h5 className="mb-5 text-lg font-semibold text-white">
|
|
{data?.length || 0} replies
|
|
</h5>
|
|
<div className="flex flex-col gap-3">
|
|
{data?.length === 0 ? (
|
|
<div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10 backdrop-blur-xl">
|
|
<div className="flex flex-col items-center justify-center gap-2 py-6">
|
|
<h3 className="text-3xl">👋</h3>
|
|
<p className="leading-none text-white/50">Share your thought on it...</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
data.map((event) => <Reply key={event.id} event={event} root={id} />)
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|