Comment Section

import { CommentSectionProvider } from "@sublay/react-js";

// By foreign ID (your own system's ID for the content)
<CommentSectionProvider foreignId="your-article-id" createIfNotFound>
  <CommentList />
</CommentSectionProvider>

// By Sublay entity ID (the entity's own `id`, a UUID)
<CommentSectionProvider entityId="0b9d5a3e-6c1f-4f7a-9d2e-8a4c1b7e5f30">
  <CommentList />
</CommentSectionProvider>

// By short ID
<CommentSectionProvider shortId="x7k2m">
  <CommentList />
</CommentSectionProvider>

// By passing the entity object directly (no fetch needed)
<CommentSectionProvider entity={myEntity}>
  <CommentList />
</CommentSectionProvider>

import { CommentSectionProvider, useCommentSection, useReplies } from "@sublay/react-js";

<CommentSectionProvider
  entityId={entity.id}
  defaultSortBy="top"
  limit={10}      // top-level comments per page
  replyDepth={2}  // also bring 2 levels of replies
  replyLimit={3}  // up to 3 replies per comment in those levels
>
  <CommentList />
</CommentSectionProvider>;

function CommentList() {
  const { comments, newComments, hasMore, loadMore } = useCommentSection();
  return (
    <>
      {[...newComments, ...comments].map((c) => <CommentThread key={c.id} comment={c} />)}
      {hasMore && <button onClick={() => loadMore()}>More comments</button>}
    </>
  );
}

function CommentThread({ comment }) {
  const { replies, newReplies, hasMore, loadMore, loading } = useReplies({
    commentId: comment.id,
    limit: 10, // direct replies per "load more"
  });

  return (
    <div>
      <CommentBody comment={comment} />
      {[...newReplies, ...replies].map((r) => <CommentThread key={r.id} comment={r} />)}
      {hasMore && (
        <button onClick={() => loadMore()} disabled={loading}>
          {replies.length ? "Load more replies" : "View replies"}
        </button>
      )}
    </div>
  );
}

import { useCommentSection } from "@sublay/react-js";

function CommentList() {
  const {
    comments,
    newComments,
    loading,
    hasMore,
    loadMore,
    sortBy,
    setSortBy,
    createComment,
  } = useCommentSection();

  return (
    <>
      <select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)}>
        <option value="top">Top</option>
        <option value="createdAt">New</option>
      </select>
      {loading && <p>Loading...</p>}
      {[...newComments, ...comments].map((c) => (
        <CommentItem key={c.id} comment={c} />
      ))}
      {hasMore && <button onClick={loadMore}>Load more</button>}
    </>
  );
}

import type {
  CommentSectionProviderProps, // props of CommentSectionProvider
  CommentSectionContextValues, // what useCommentSection returns
  UseCommentSectionDataProps, // the provider's props without `children`
  UseCommentSectionDataValues, // the section's values
} from "@sublay/react-js";