chore: monorepo

packages/ark/src/components/note/reply.tsx

@@ -0,0 +1,67 @@
+import { LoaderIcon } from '@lume/icons';
+import { NDKEventWithReplies } from '@lume/types';
+import { NDKSubscription } from '@nostr-dev-kit/ndk';
+import { useEffect, useState } from 'react';
+import { useArk } from '../../provider';
+import { Reply } from './builds/reply';
+
+export function NoteReplies({ eventId }: { eventId: string }) {
+  const ark = useArk();
+  const [data, setData] = useState<null | NDKEventWithReplies[]>(null);
+
+  useEffect(() => {
+    let sub: NDKSubscription;
+    let isCancelled = false;
+
+    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]),
+      });
+    }
+
+    fetchRepliesAndSub();
+
+    return () => {
+      isCancelled = true;
+      if (sub) sub.stop();
+    };
+  }, [eventId]);
+
+  if (!data) {
+    return (
+      <div className="mt-3">
+        <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>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-3 flex flex-col gap-5">
+      <h3 className="font-semibold">Replies</h3>
+      {data?.length === 0 ? (
+        <div className="mt-2 flex w-full items-center justify-center">
+          <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>
+  );
+}