Toggle reaction

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

function ReactionBar({ entity }) {
  const { currentReaction, reactionCounts, toggleReaction, loading } = useReactionToggle({
    targetType: "entity",
    targetId: entity.id,
    initialReaction: entity.userReaction,
    initialReactionCounts: entity.reactionCounts,
  });

  const reactions = ["upvote", "like", "love", "wow", "funny"] as const;

  return (
    <div>
      {reactions.map((type) => (
        <button
          key={type}
          onClick={() => toggleReaction({ reactionType: type })}
          disabled={loading}
          style={{ fontWeight: currentReaction === type ? "bold" : "normal" }}
        >
          {type} ({reactionCounts[type] ?? 0})
        </button>
      ))}
    </div>
  );
}