Use user comments

import { useFetchCommentsByUserIdWrapper } from "@sublay/react-js";

function ProfileComments({ userId }: { userId: string }) {
  const { comments, loading, error, hasMore, sortBy, setSortBy, loadMore } =
    useFetchCommentsByUserIdWrapper({
      userId,
      limit: 10,
      include: ["entity"],
    });

  return (
    <div>
      <select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)}>
        <option value="createdAt">Newest</option>
        <option value="top">Top</option>
      </select>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>
            {comment.content}
            {comment.entity && <span> — on {comment.entity.title}</span>}
          </li>
        ))}
      </ul>
      {error && <p>Couldn't load comments.</p>}
      {hasMore && (
        <button onClick={() => loadMore()} disabled={loading}>
          Load more
        </button>
      )}
    </div>
  );
}