diff --git a/package-lock.json b/package-lock.json index ab9c1a7..b88d36c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,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", @@ -364,6 +365,24 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", @@ -1207,6 +1226,11 @@ "@types/react": "*" } }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -1526,6 +1550,14 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001620", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz", @@ -1601,11 +1633,28 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/data-view-buffer": { "version": "1.0.1", @@ -3177,7 +3226,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -3418,8 +3466,7 @@ "node_modules/picocolors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", - "dev": true + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, "node_modules/possible-typed-array-names": { "version": "1.0.0", @@ -3434,7 +3481,6 @@ "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", - "dev": true, "funding": [ { "type": "opencollective", @@ -3458,6 +3504,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -3807,6 +3858,11 @@ "node": ">= 0.4" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -3850,7 +3906,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3954,6 +4009,38 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz", + "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -3993,6 +4080,11 @@ "node": ">=4" } }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 659eeab..e7b1cdb 100644 --- a/package.json +++ b/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", diff --git a/src/api.js b/src/api.js new file mode 100644 index 0000000..3c735f8 --- /dev/null +++ b/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; +} diff --git a/src/components/AddTodoForm.jsx b/src/components/AddTodoForm.jsx index 09da36c..189f7e8 100644 --- a/src/components/AddTodoForm.jsx +++ b/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); }} /> - +

{addTodoError}

+ {isPostingTodo && } + {!isPostingTodo && ( + + )} ); } diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx new file mode 100644 index 0000000..bcef96d --- /dev/null +++ b/src/components/Loader/Loader.jsx @@ -0,0 +1,7 @@ +import * as S from "./Loader.styled"; + +const Loader = () => { + return ; +}; + +export default Loader; diff --git a/src/components/Loader/Loader.styled.js b/src/components/Loader/Loader.styled.js new file mode 100644 index 0000000..0360db5 --- /dev/null +++ b/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; +`; \ No newline at end of file diff --git a/src/pages/TodosPages.jsx b/src/pages/TodosPages.jsx index cefe5df..c5c9a52 100644 --- a/src/pages/TodosPages.jsx +++ b/src/pages/TodosPages.jsx @@ -1,20 +1,64 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { AddTodoForm } from "../components/AddTodoForm"; +import { getTodos, deleteTodo } from "../api"; export default function TodosPage() { - const [todos, setTodos] = useState([ - { id: 1, text: "Купить молоко" }, - { id: 2, text: "Купить хлеб" }, - { id: 3, text: "Купить масло" }, - ]); + const [todos, setTodos] = useState([]); + const [deletingTodoIds, setDeletingTodoIds] = useState({}); + const [getTodosError, setTodosError] = useState(null); + const [deleteTodoError, setDeleteTodoError] = useState(null); + + const handleDeleteTodo = async (id) => { + setDeletingTodoIds((prev) => ({ ...prev, [id]: true })); + + try { + const newTodo = await deleteTodo(id); + setDeleteTodoError(null); + + setDeletingTodoIds((prev) => ({ ...prev, [id]: false })); + setTodos(newTodo.todos); + } catch (error) { + if (error.message === "Failed to fetch") { + setDeleteTodoError("Ошибка подключения"); + } + + setDeleteTodoError(error.message); + } + }; + + useEffect(() => { + getTodos() + .then((result) => { + setTodosError(null); + setTodos(result.todos); + }) + .catch((error) => { + if (error.message === "Failed to fetch") { + setTodosError("Ошибка подключения"); + } + + setTodosError(error.message); + }); + }, []); + return (

Список задач

+

{getTodosError}