Optimistic UI

import { useState } from "react";

// Імітація запиту до сервера
function toggleLikeOnServer(nextLiked) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const requestSucceeded = Math.random() > 0.3;

      if (!requestSucceeded) {
        reject(new Error("Не вдалося зберегти вподобання"));
        return;
      }

      // Сервер повертає фактичний стан після обробки запиту
      resolve({
        liked: nextLiked,
        likes: nextLiked ? 43 : 42,
      });
    }, 800);
  });
}

export default function LikeButton() {
  const [likeState, setLikeState] = useState({
    liked: false,
    likes: 42,
  });

  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState("");

  async function handleLike() {
    if (isPending) {
      return;
    }

    setError("");

    // Зберігаємо стан до оптимістичного оновлення
    const previousState = likeState;

    const nextLiked = !likeState.liked;

    // Оновлюємо інтерфейс одразу
    setLikeState({
      liked: nextLiked,
      likes: nextLiked
        ? likeState.likes + 1
        : likeState.likes - 1,
    });

    setIsPending(true);

    try {
      const serverState = await toggleLikeOnServer(nextLiked);

      // Сервер є джерелом остаточного стану
      setLikeState(serverState);
    } catch (requestError) {
      // Якщо запит не вдався, повертаємо попередній стан
      setLikeState(previousState);
      setError(requestError.message);
    } finally {
      setIsPending(false);
    }
  }

  return (
    <div>
      <button
        type="button"
        onClick={handleLike}
        disabled={isPending}
        aria-pressed={likeState.liked}
      >
        {likeState.liked ? "♥ Подобається" : "♡ Подобається"}{" "}
        ({likeState.likes})
      </button>

      {isPending && <p>Зберігаємо зміни...</p>}

      {error && (
        <p role="alert">
          {error}. Спробуйте ще раз.
        </p>
      )}
    </div>
  );
}

const previousState = likeState;

setLikeState({
  liked: nextLiked,
  likes: nextLiked
    ? likeState.likes + 1
    : likeState.likes - 1,
});

try {
  const serverState = await toggleLikeOnServer(nextLiked);
  setLikeState(serverState);
} catch (requestError) {
  setLikeState(previousState);
}

async function toggleLikeOnServer(postId, nextLiked) {
  const response = await fetch(`/api/posts/${postId}/like`, {
    method: nextLiked ? "POST" : "DELETE",
    headers: {
      "Content-Type": "application/json",
    },
  });

  if (!response.ok) {
    throw new Error("Сервер не зміг зберегти вподобання");
  }

  return response.json();
}

try {
  const serverState = await toggleLikeOnServer(postId, nextLiked);
  setLikeState(serverState);
} catch (error) {
  setLikeState(previousState);
  setError(error.message);
}

async function handleDelete(id) {
  const previousItems = items;

  setItems((currentItems) =>
    currentItems.filter((item) => item.id !== id)
  );

  try {
    await deleteItemOnServer(id);
  } catch (error) {
    // Повертаємо елемент, якщо сервер не підтвердив видалення
    setItems(previousItems);
    setError("Не вдалося видалити елемент");
  }
}

const [isPending, setIsPending] = useState(false);
const [error, setError] = useState("");

setLiked(true);

try {
  await saveLike();
} catch {
  // Немає попереднього значення для відновлення
}

const previousLiked = liked;

setLiked(true);

try {
  await saveLike();
} catch {
  setLiked(previousLiked);
}

const serverState = await saveLike();
setLikeState(serverState);

<button disabled={isPending} onClick={handleLike}>
  Подобається
</button>

setError("Зміни не збережено. Спробуйте ще раз.");

setItems((currentItems) =>
  currentItems.filter((item) => item.id !== id)
);