Function useCommentsByOwner

Returns UseCommentsReturn

The returning object contains:

• comments: The list of the comments related to a specific owner.
• currentPage: The current page of comments.
• fetchMore: CommentsFetchMoreMethod - Function to load more comments, appending to the current list.
• fetched: Boolean indicating whether the comments have been successfully fetched.
• hasMore: Boolean indicating whether there are more comments to fetch.
• refresh: CommentsFetchMethod - Function to refresh the current set of comments.

Implementation Details

• Pagination: Uses the usePagination hook to handle paginated fetching of comments. This allows for loading additional comments when required or refreshing the first page.
• Caching: The withCache utility is employed to cache API responses for 120 seconds (120,000 ms) to minimize redundant network requests.
• Effect Trigger: A useEffect hook is used to initiate the data fetch whenever the id or params (such as page) change.
• Comment Actions: Provides functions to delete, edit, and toggle the visibility of comments.
• Error Handling: Logs errors encountered during API interactions to the console and re-throws them with additional context for debugging.

import { useCommentsByOwner } from 'react-playmakers';

// Using the hook in a component
const OwnerComments = () => {
  const {
    comments,
    fetchMore,
    refresh,
    hasMore,
    fetched,
    currentPage
  } = useCommentsByOwner('XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
   { page: 1, limit: 10 });

  // Fetch initial comments on mount
  useEffect(() => {
    refresh();
  }, [refresh]);

  if (!fetched) return <p>Loading comments...</p>;

  return (
    <div>
      <h2>Owner Comments</h2>
      {comments.length > 0 ? (
        <>
          <ul>
            {comments.map(comment => (
              <li key={comment.id}>
                <p>{comment.body}</p>
                <small>State: {comment.state}</small>
              </li>
            ))}
          </ul>
          {hasMore && <button onClick={() => fetchMore(false)}>Load More</button>}
        </>
      ) : (
        <p>No comments available for this owner.</p>
      )}
      {currentPage && <p>Current Page: {currentPage}</p>}
    </div>
  );
};
Copy