Use Profile Comments

useProfileComments

Overview

The useProfileComments 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 { useProfileComments } from "@replyke/react-js";

function UserComments({ userId }: { userId: string }) {
  const {
    comments,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
  } = useProfileComments({ 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:

userId · string \

null`

limit · number

The number of comments to fetch per page. Default is 10.

defaultSortBy · CommentsSortByOptions

The default sorting criteria for comments (e.g., "new", "top").

includeEntity · boolean

Whether to include entity details in the fetched comments.

Returns

The hook returns an object with the following fields:

comments · Comment[]

The list of user comments fetched so far.

loading · boolean

Indicates if comments are currently loading.

hasMore · boolean

Whether there are more comments available to fetch.

sortBy · CommentsSortByOptions

Current sorting method for the comments ("new" or "top").

setSortBy · (newSortBy: CommentsSortByOptions) => void

Updates the sort order for comments.

loadMore · () => void

Loads the next page of comments, if available.