`useProfileCommentsData`

Overview

The useProfileCommentsData hook provides a higher-level abstraction for fetching and managing user comments. Unlike the lower-level useFetchComments hook, this hook centralizes the logic for pagination, sorting, and state management, making it easier to implement a complete comments feed for a user profile.

Usage Example

import { useProfileCommentsData } from "@replyke/react-js";
 
function UserComments({ userId }: { userId: string }) {
  const {
    comments,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
  } = useProfileCommentsData({ userId, limit: 10, defaultSortBy: "new" });
 
  return (
    <div>
      <select
        value={sortBy}
        onChange={(e) => setSortBy(e.target.value as "new" | "top")}
      >
        <option value="new">Newest</option>
        <option value="top">Top</option>
      </select>
 
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>
 
      {loading && <p>Loading...</p>}
      {hasMore && !loading && (
        <button onClick={loadMore}>Load More</button>
      )}
    </div>
  );
}

Parameters & Returns

Parameters

The hook accepts an object with the following fields:

Parameter	Type	Required	Description
`userId`	`string \| undefined \| null`	Yes	The ID of the user whose comments are being fetched.
`limit`	`number`	No	The number of comments to fetch per page. Default is `10`.
`defaultSortBy`	`CommentsSortByOptions`	No	The default sorting criteria for comments (e.g., `new`, `top`).
`includeEntity`	`boolean`	No	Whether to include entity details in the fetched comments.

Returns

The hook returns an object with the following fields:

Return Value	Type	Description
`comments`	`CommentType[]`	The list of comments fetched so far.
`loading`	`boolean`	Indicates whether comments are being loaded.
`hasMore`	`boolean`	Indicates whether there are more comments to fetch.
`sortBy`	`CommentsSortByOptions \| null`	The current sorting criteria for comments.
`setSortBy`	`(newSortBy: CommentsSortByOptions) => void`	A function to update the sorting criteria.
`loadMore`	`() => void`	A function to fetch the next page of comments.

useCommentSectionData useCreateList