POST, PUT, PATCH та DELETE

POST /posts

{
  "title": "Нова публікація",
  "body": "Текст нової публікації"
}

const response = await fetch("/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Нова публікація",
    body: "Текст нової публікації",
  }),
});

if (!response.ok) {
  throw new Error("Не вдалося створити публікацію");
}

const createdPost = await response.json();

{
  "id": 42,
  "title": "Нова публікація",
  "body": "Текст нової публікації"
}

setPosts((currentPosts) => [createdPost, ...currentPosts]);

PUT /posts/42

{
  "title": "Оновлений заголовок",
  "body": "Оновлений текст"
}

const response = await fetch(`/posts/${postId}`, {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Оновлений заголовок",
    body: "Оновлений текст",
  }),
});

PATCH /posts/42

const response = await fetch(`/posts/${postId}`, {
  method: "PATCH",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Новий заголовок",
  }),
});

DELETE /posts/42

const response = await fetch(`/posts/${postId}`, {
  method: "DELETE",
});

if (!response.ok) {
  throw new Error("Не вдалося видалити публікацію");
}

setPosts((currentPosts) =>
  currentPosts.filter((post) => post.id !== postId)
);

async function requestJson(url, options) {
  const response = await fetch(url, options);

  if (!response.ok) {
    throw new Error(`HTTP-помилка: ${response.status}`);
  }

  if (response.status === 204) {
    return null;
  }

  return response.json();
}

const createdPost = await requestJson("/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Заголовок",
    body: "Текст",
  }),
});

import { useEffect, useState } from "react";

const API_URL = "https://jsonplaceholder.typicode.com/posts";

async function parseResponse(response) {
  if (!response.ok) {
    throw new Error(`Помилка сервера: ${response.status}`);
  }

  if (response.status === 204) {
    return null;
  }

  return response.json();
}

export default function PostsManager() {
  const [posts, setPosts] = useState([]);
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [editingId, setEditingId] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    async function loadPosts() {
      try {
        setLoading(true);
        setError("");

        const response = await fetch(`${API_URL}?_limit=5`);
        const data = await parseResponse(response);

        setPosts(data);
      } catch (requestError) {
        setError(requestError.message);
      } finally {
        setLoading(false);
      }
    }

    loadPosts();
  }, []);

  async function handleSubmit(event) {
    event.preventDefault();

    if (!title.trim() || !body.trim()) {
      setError("Заповніть заголовок і текст");
      return;
    }

    try {
      setLoading(true);
      setError("");

      if (editingId === null) {
        // Створення нового ресурсу через POST
        const response = await fetch(API_URL, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            title,
            body,
            userId: 1,
          }),
        });

        const createdPost = await parseResponse(response);

        setPosts((currentPosts) => [createdPost, ...currentPosts]);
      } else {
        // Часткове оновлення ресурсу через PATCH
        const response = await fetch(`${API_URL}/${editingId}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            title,
            body,
          }),
        });

        const updatedPost = await parseResponse(response);

        setPosts((currentPosts) =>
          currentPosts.map((post) =>
            post.id === editingId ? { ...post, ...updatedPost } : post
          )
        );
      }

      setTitle("");
      setBody("");
      setEditingId(null);
    } catch (requestError) {
      setError(requestError.message);
    } finally {
      setLoading(false);
    }
  }

  function startEditing(post) {
    setEditingId(post.id);
    setTitle(post.title);
    setBody(post.body);
    setError("");
  }

  function cancelEditing() {
    setEditingId(null);
    setTitle("");
    setBody("");
  }

  async function handleDelete(postId) {
    try {
      setLoading(true);
      setError("");

      // Видалення ресурсу через DELETE
      const response = await fetch(`${API_URL}/${postId}`, {
        method: "DELETE",
      });

      await parseResponse(response);

      setPosts((currentPosts) =>
        currentPosts.filter((post) => post.id !== postId)
      );

      if (editingId === postId) {
        cancelEditing();
      }
    } catch (requestError) {
      setError(requestError.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <main>
      <h1>Публікації</h1>

      <form onSubmit={handleSubmit}>
        <h2>{editingId === null ? "Нова публікація" : "Редагування"}</h2>

        <label>
          Заголовок
          <input
            value={title}
            onChange={(event) => setTitle(event.target.value)}
            placeholder="Введіть заголовок"
          />
        </label>

        <label>
          Текст
          <textarea
            value={body}
            onChange={(event) => setBody(event.target.value)}
            placeholder="Введіть текст"
          />
        </label>

        <button type="submit" disabled={loading}>
          {editingId === null ? "Створити" : "Зберегти"}
        </button>

        {editingId !== null && (
          <button type="button" onClick={cancelEditing}>
            Скасувати
          </button>
        )}
      </form>

      {loading && <p>Виконується запит...</p>}
      {error && <p role="alert">{error}</p>}

      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>

            <button type="button" onClick={() => startEditing(post)}>
              Редагувати
            </button>

            <button type="button" onClick={() => handleDelete(post.id)}>
              Видалити
            </button>
          </li>
        ))}
      </ul>
    </main>
  );
}

const response = await fetch(`${API_URL}/${editingId}`, {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: editingId,
    title,
    body,
    userId: 1,
  }),
});

const replacedPost = await parseResponse(response);

setPosts((currentPosts) =>
  currentPosts.map((post) =>
    post.id === editingId ? replacedPost : post
  )
);

// Додати створений ресурс
setPosts((posts) => [createdPost, ...posts]);

// Замінити оновлений ресурс
setPosts((posts) =>
  posts.map((post) => (post.id === updatedPost.id ? updatedPost : post))
);

// Видалити ресурс
setPosts((posts) =>
  posts.filter((post) => post.id !== deletedPostId)
);

// Неправильно
posts.push(createdPost);
posts = posts.filter((post) => post.id !== deletedPostId);

headers: {
  "Content-Type": "application/json",
}

body: {
  title: "Заголовок",
}

body: JSON.stringify({
  title: "Заголовок",
})