Skip to main content

​
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.
⌘I