import './App.css';
import React, { useState, useEffect } from 'react';
function App() {
const (todos, setTodos) = useState(());
// Fetch todos on component mount
useEffect(() => {
fetch('http://localhost:8080/todos')
.then(response => response.json())
.then(data => setTodos(data))
.catch(error => console.error(error));
}, ());
// Function to add a new TODO item
const addTodo = (description) => {
fetch('http://localhost:8080/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ description }),
})
.then(response => response.json())
.then(newTodo => setTodos((...todos, newTodo)))
.catch(error => console.error(error));
};
// Toggle completion
const toggleTodoComplete = (id) => {
const updatedTodos = todos.map(todo => {
if (todo.id === id) {
return { ...todo, completed: !todo.completed };
}
return todo;
});
setTodos(updatedTodos);
// Update completion
fetch(`http://localhost:8080/todos/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ completed: !todos.find(todo => todo.id === id).completed }),
})
.catch(error => console.error(error));
};
const deleteTodo = (id) => {
const filteredTodos = todos.filter(todo => todo.id !== id);
setTodos(filteredTodos);
fetch(`http://localhost:8080/todos/${id}`, {
method: 'DELETE'
})
.catch(error => console.error(error));
};
Temos funções para criação, alternância de conclusão e exclusão. Para carregar as tarefas inicialmente, usamos o useEffect efeito para chamar o servidor para o conjunto inicial de tarefas quando o React carrega a IU pela primeira vez. (Veja minha introdução aos ganchos do React para saber mais sobre useEffect.)
useState permite-nos definir o todos variável. A API Fetch torna bem claro definir as chamadas de back-end e seus manipuladores com then e catch. O spread operador também ajuda a manter as coisas concisas. Veja como definimos o novo todos lista:
