`useCommentSectionData`

Overview

The useCommentSectionData hook provides a comprehensive solution for managing comment sections associated with entities. Unlike individual hooks such as useFetchComments or useCreateComment, this hook combines functionalities like fetching, creating, updating, deleting, and managing comment states (e.g., sorting, replying). It is ideal for implementing fully-featured comment sections with advanced state management.

Usage Example

import { useCommentSectionData } from "@replyke/react-js";
 
function CommentSection({ entityId }: { entityId: string }) {
  const {
    comments,
    entityCommentsTree,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
    createComment,
    updateComment,
    deleteComment,
    repliedToComment,
    setRepliedToComment,
    showReplyBanner,
    setShowReplyBanner,
  } = useCommentSectionData({ entityId, limit: 15 });
 
  const handleAddComment = async () => {
    try {
      await createComment({
        content: "This is a new comment!",
        mentions: [],
      });
    } catch (error) {
      console.error("Failed to add comment:", error.message);
    }
  };
 
  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>
      )}
 
      {showReplyBanner && <p>Replying to {repliedToComment?.id}</p>}
      <button onClick={handleAddComment}>Add Comment</button>
    </div>
  );
}

Parameters & Returns

Parameters

The hook accepts an object with the fields below. At least one of the first 4 fields must be provided (entityId/referenceId/shortId/entity):

Parameter	Type	Required	Description
`entityId`	`string \| undefined \| null`	No	The ID of the entity in Replyke’s system.
`referenceId`	`string \| undefined \| null`	No	The original item’s ID if integrated with an external dataset, or a static value (e.g., “about-page”).
`shortId`	`string \| undefined \| null`	No	The unique short ID of the entity.
`entity`	`string \| undefined \| null`	No	A complete `Entity` object.
`createIfNotFound`	`string \| undefined \| null`	No	An optional flag which instructs Replyke to create an entity if one isn’t found.
`limit`	`number`	No	The number of comments to fetch per page. Default is `15`.
`defaultSortBy`	`CommentsSortByOptions`	No	The default sorting criteria for comments (e.g., `new`, `top`).
`callbacks`	`SocialStyleCallbacks`	No	Optional callbacks for handling events like login requirements.
`highlightedCommentId`	`string \| null`	No	The ID of a comment to highlight (e.g., for linking or deep linking).

Returns

The hook returns an object with the following fields:

Return Value	Type	Description
`entityId`	`string \| undefined \| null`	The ID of the associated entity.
`callbacks`	`SocialStyleCallbacks`	The callbacks passed into the hook.
`entityCommentsTree`	`EntityCommentsTree`	The tree structure of the comments associated with the entity.
`comments`	`CommentType[]`	The list of root-level comments fetched so far.
`newComments`	`CommentType[]`	Newly added root-level comments.
`loading`	`boolean`	Indicates whether comments are being loaded.
`hasMore`	`boolean`	Indicates whether there are more comments to fetch.
`submittingComment`	`boolean`	Indicates whether a comment is currently being submitted.
`loadMore`	`() => void`	A function to fetch the next page of comments.
`sortBy`	`CommentsSortByOptions \| null`	The current sorting criteria for comments.
`setSortBy`	`(newSortBy: CommentsSortByOptions) => void`	A function to update the sorting criteria.
`pushMention`	`UserLean \| null`	The user being mentioned in a reply.
`setPushMention`	`(user: UserLean \| null) => void`	A function to set the user being mentioned.
`previousPushMention`	`UserLean \| null`	The previously mentioned user.
`selectedComment`	`CommentType \| null`	The currently selected comment.
`setSelectedComment`	`(newSelectedComment: CommentType \| null) => void`	A function to set the selected comment.
`repliedToComment`	`Partial<CommentType> \| null`	The comment being replied to.
`setRepliedToComment`	`(newRepliedToComment: CommentType \| null) => void`	A function to set the replied-to comment.
`showReplyBanner`	`boolean`	Indicates whether the reply banner is shown.
`setShowReplyBanner`	`(newState: boolean) => void`	A function to toggle the reply banner.
`addCommentsToTree`	`(newComments: CommentType[], newlyAdded?: boolean) => void`	A function to add comments to the tree structure.
`removeCommentFromTree`	`(commentId: string) => void`	A function to remove a comment from the tree structure.
`createComment`	`(props: { content: string; mentions: Mention[] }) => Promise<void>`	A function to create a new comment.
`updateComment`	`(props: { commentId: string; content: string }) => Promise<void>`	A function to update an existing comment.
`deleteComment`	`(props: { commentId: string }) => Promise<void>`	A function to delete a comment.
`highlightedComment`	`{ comment: CommentType; parentComment: CommentType \| null } \| null`	The highlighted comment and its parent (if any).

useDeleteComment useProfileCommentsData