Use comments

Stateful, paginated comment list with sorting

Overview

useFetchManyCommentsWrapper is a stateful wrapper around useFetchManyComments that manages pagination, sort state, and the comment list for you. Use it when you need a custom paginated comment list outside of CommentSectionProvider — for example, a user profile page showing all comments a user has made, or a custom thread viewer.

Changing sortBy resets the list and re-fetches from page 1. At least one of entityId, userId, or parentId must be provided — the hook will not fetch otherwise.

Usage Example

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

function UserComments({ userId }: { userId: string }) {
  const {
    comments,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
  } = useFetchManyCommentsWrapper({
    userId,
    limit: 10,
    defaultSortBy: "createdAt",
    include: ["entity"],
  });

  return (
    <div>
      <select value={sortBy ?? ""} onChange={(e) => setSortBy(e.target.value as any)}>
        <option value="createdAt">Newest</option>
        <option value="top">Top</option>
        <option value="controversial">Controversial</option>
      </select>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>
      {hasMore && (
        <button onClick={loadMore} disabled={loading}>
          Load more
        </button>
      )}
    </div>
  );
}

Parameters

entityId · string | null

Filter to comments on a specific entity.

userId · string | null

Filter to comments by a specific user.

parentId · string | null

Filter to replies of a specific parent comment.

sourceId · string | null

Filter to comments within a specific source.

limit · number

Number of comments per page. Default: 10.

defaultSortBy · "createdAt" | "top" | "controversial"

Initial sort order. Default: "createdAt". "new"/"old" are deprecated aliases for "createdAt" (removed in v8).

defaultSortDir · "asc" | "desc"

Initial sort direction for sortBy: "createdAt". Default: "desc" (newest first).

include · CommentIncludeParam

Populate related data. Accepted values: "user", "entity", "space", "parent".

Returns

comments · Comment[]

The current list of fetched comments. Appended to on each loadMore call.

loading · boolean

true while fetching the initial page or loading more.

hasMore · boolean

true if additional pages are available.

sortBy · CommentsSortByOptions | null

Current sort order.

setSortBy · (sortBy: CommentsSortByOptions) => void

Change the sort order. Resets the comment list and re-fetches from page 1.

sortDir · "asc" | "desc"

Current sort direction for sortBy: "createdAt".

setSortDir · (sortDir: "asc" | "desc") => void

Change the sort direction. Resets the comment list and re-fetches from page 1.

loadMore · () => void

Load the next page of comments. Appends to the existing list.