Function useCommentsBySubmission

Returns UseCommentsReturn

The returning object contains:

• comments: The list of the comments related to the submission.
• 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.
• Caching: Utilizes the withCache utility to cache the API response for 60 seconds (60,000 ms) to reduce redundant network requests for fetching comments.
• Effect Trigger: A useEffect hook is used to fetch the comments when the paramId, scope, or params.page changes.
• Comment Actions: Provides functions to delete, edit, and toggle the visibility of comments.
• Error Handling: Errors during the fetch or update process are logged to the console and re-thrown with additional context for better debugging.

import { useCommentsBySubmission } from 'react-playmakers';

// Using the hook in a component
const SubmissionComments = () => {
  const {
    comments,
    fetchMore,
    hasMore,
    fetched,
    refresh
  } = useCommentsBySubmission('SXXXXXXXX', {
    page: 1,
    limit: 10,
  });

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

  return (
    <div>
      <h2>Comments</h2>
      <button onClick={refresh}>Refresh Comments</button>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>
            <p><strong>{comment.author}</strong>: {comment.body}</p>
          </li>
        ))}
      </ul>
      {hasMore && (
        <button onClick={() => fetchMore(false)}>Load More</button>
      )}
    </div>
  );
};
Copy