Function TippingButton

src/components/TippingButton.tsx:10–91

({
  senderId,
  currentRewardPoints,
  recipientId,
  onRefreshUser,
})

const DEFAULT_TIPPING_AMOUNT = 1;

export default function TippingButton({
  senderId,
  currentRewardPoints,
  recipientId,
  onRefreshUser,
}) {
  const [isDisabled, setDisabled] = useState(false);
  const [activeAnimations, setActiveAnimations] = useState<number[] | []>([]);
  const [animationId, setAnimationId] = useState(0);
  const [localRewardPoints, setRewardPoints] = useState(currentRewardPoints);
  const [tippingPoints, setTippingPoints] = useState(1);

  // The save tipping function gets debounced so it collects tips from the last
  // 5 seconds and applies them all at once. If the amount of tips is over a
  // certain threshold, show the user a confirmation.
  const saveTipping = async (localTippingPoints) => {
    setTippingPoints(1);
    await putRewardTransfer(senderId, recipientId, BigInt(localTippingPoints));
    onRefreshUser();
  };
  const saveTippingDebounced = useRef(debounce(saveTipping, 3000));

  // On click store the accumulated tipping points for multiple clicks and call
  // the debounced tip saving function to save on the backend
  const handleClick = async (ev) => {
    ev.preventDefault();
    if (isDisabled) return;
    setRewardPoints(localRewardPoints - DEFAULT_TIPPING_AMOUNT);
    setTippingPoints(tippingPoints + DEFAULT_TIPPING_AMOUNT);
    saveTippingDebounced.current(tippingPoints);
    setAnimationId((prevId) => prevId + 1);
    const currentId = animationId;
    setActiveAnimations((prev) => [...prev, currentId]);
    setTimeout(() => {
      setActiveAnimations((prev) => prev.filter((id) => id !== currentId));
    }, 4000);
  };

  useEffect(() => {
    setRewardPoints(currentRewardPoints);
    if (currentRewardPoints < DEFAULT_TIPPING_AMOUNT) {
      setDisabled(true);
    }
  }, [currentRewardPoints]);

  useEffect(() => {
    if (senderId === recipientId) setDisabled(true);
  }, []);

  return (
    <span
      className="TippingButton"
      onClick={handleClick}
      style={{
        pointerEvents: isDisabled ? "none" : "all",
        cursor: isDisabled ? "default" : "pointer",
        opacity: isDisabled ? 0.5 : 1,
      }}