Optimistic UI

import { useOptimistic, useState, useTransition } from 'react';

type Props = { postId: string; initialLiked: boolean; initialCount: number };

async function saveLike(postId: string, liked: boolean) {
  const response = await fetch(`/api/posts/${postId}/like`, {
    method: liked ? 'PUT' : 'DELETE'
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
}

export function LikeButton({ postId, initialLiked, initialCount }: Props) {
  const [like, setLike] = useState({
    liked: initialLiked,
    count: initialCount
  });
  const [optimistic, setOptimistic] = useOptimistic(like);
  const [isPending, startTransition] = useTransition();
  const [failed, setFailed] = useState(false);

  function toggle() {
    if (isPending) return;
    const next = {
      liked: !like.liked,
      count: like.count + (like.liked ? -1 : 1)
    };
    setFailed(false);
    startTransition(async () => {
      setOptimistic(next); // shows right away
      try {
        await saveLike(postId, next.liked);
        startTransition(() => setLike(next));
      } catch {
        // `like` never changed, so the button reverts when this transition ends.
        setFailed(true);
      }
    });
  }

  return (
    <div className='flex items-center gap-3'>
      <button
        type='button'
        aria-pressed={optimistic.liked}
        onClick={toggle}
        className='flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm tabular-nums aria-pressed:border-rose-300 aria-pressed:text-rose-600'
      >
        <span aria-hidden>{optimistic.liked ? '♥' : '♡'}</span>
        <span className='sr-only'>Like</span>
        {optimistic.count}
      </button>
      {failed && (
        <p role='alert' className='text-sm text-red-600'>
          Couldn't save your like.
        </p>
      )}
    </div>
  );
}