Реализовал удаление задачи по клику

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "styled-components": "^6.1.11"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/api.js

@@ -0,0 +1,51 @@
+const host = "https://wedev-api.sky.pro/api/v2/todos";
+const token = "bgc0b8awbwas6g5g5k5o5s5w606g37w3cc3bo3b83k39s3co3c83c03ck";
+
+export async function getTodos() {
+  const response = await fetch(host, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error("Ошибка сервера");
+  }
+
+  const data = await response.json();
+  return data;
+}
+
+export async function postTodo(text) {
+  const response = await fetch(host, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ text }),
+  });
+
+  if (!response.ok) {
+    throw new Error("Ошибка сервера");
+  }
+
+  const data = await response.json();
+  return data;
+}
+
+export async function deleteTodo(id) {
+  const response = await fetch(`${host}/${id}`, {
+    method: "DELETE",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error("Ошибка сервера");
+  }
+
+  const data = await response.json();
+  return data;
+}

src/components/AddTodoForm.jsx

@@ -1,15 +1,34 @@
 import { useState } from "react";
+import { postTodo } from "../api";
+import Loader from "./Loader/Loader";
 
-export function AddTodoForm({ setTodos, todos }) {
+export function AddTodoForm({ setTodos }) {
   const [newTodoText, setNewTodoText] = useState("");
+  const [isPostingTodo, setPostingTodo] = useState(false);
+  const [addTodoError, setTodoError] = useState(null);
 
-  const handleAddTodoClick = () => {
-    if (!newTodoText) {
-      return;
-    }
+  const handleAddTodoClick = async () => {
+    try {
+      if (!newTodoText) {
+        return;
+      }
+
+      setTodoError(null);
+
+      setPostingTodo(true);
+      const newTodos = await postTodo(newTodoText);
 
-    setTodos([...todos, { id: Date.now(), text: newTodoText }]);
-    setNewTodoText("");
+      setTodos(newTodos.todos);
+      setNewTodoText("");
+    } catch (error) {
+      if (error.message === "Failed to fetch") {
+        setTodoError("Ошибка подключения");
+      }
+
+      setTodoError(error.message);
+    } finally {
+      setPostingTodo(false);
+    }
   };
 
   return (
@@ -21,7 +40,11 @@ export function AddTodoForm({ setTodos, todos }) {
           setNewTodoText(event.target.value);
         }}
       />
-      <button onClick={handleAddTodoClick}>Добавить задачу</button>
+      <p style={{ color: "red" }}>{addTodoError}</p>
+      {isPostingTodo && <Loader />}
+      {!isPostingTodo && (
+        <button onClick={handleAddTodoClick}>Добавить задачу</button>
+      )}
     </div>
   );
 }

src/components/Loader/Loader.jsx

@@ -0,0 +1,7 @@
+import * as S from "./Loader.styled";
+
+const Loader = () => {
+  return <S.Loader></S.Loader>;
+};
+
+export default Loader;

src/components/Loader/Loader.styled.js

@@ -0,0 +1,20 @@
+import styled, { keyframes } from "styled-components";
+
+const rotate = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+export const Loader = styled.div`
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: #565eef;
+  border-radius: 50%;
+  animation: ${rotate} 1s linear infinite;
+`;