Fetch many comments

import { useFetchManyComments, type Comment } from "@sublay/react-js";
import { useEffect, useState } from "react";

function TopComments({ entityId }: { entityId: string }) {
  const fetchComments = useFetchManyComments();
  const [comments, setComments] = useState<Comment[]>([]);
  const [cursor, setCursor] = useState<string | null>(null);

  useEffect(() => {
    fetchComments({
      entityId,
      sortBy: "top",
      limit: 10,
      include: "user",
      replyDepth: 1, // also bring each comment's first replies
      replyLimit: 2,
    }).then((res) => {
      setComments(res.data);
      setCursor(res.pagination.nextCursor);
    });
  }, [entityId]);

  const loadMore = async () => {
    if (!cursor) return;
    const res = await fetchComments({ entityId, sortBy: "top", limit: 10, cursor, include: "user" });
    setComments((prev) => [...prev, ...res.data]);
    setCursor(res.pagination.nextCursor);
  };

  return (
    <>
      <ul>{comments.map((c) => <li key={c.id}>{c.content}</li>)}</ul>
      {cursor && <button onClick={loadMore}>Load more</button>}
    </>
  );
}