function MainComponent() { const [todos, setTodos] = useState([]); const [newTask, setNewTask] = useState(""); const [error, setError] = useState(null); const [taskToDelete, setTaskToDelete] = useState(null); const fetchTodos = useCallback(async ()=>{ try { const response = await fetch("/api/todos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "GET" }) }); if (!response.ok) { throw new Error("Erreur lors de la récupération des tâches"); } const data = await response.json(); setTodos(data.todos); } catch (err) { console.error(err); setError("Impossible de charger les tâches"); } }, []); useEffect(()=>{ fetchTodos(); }, [ fetchTodos ]); const addTodo = async (e)=>{ e.preventDefault(); if (!newTask.trim()) return; try { const response = await fetch("/api/todos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "POST", task: newTask }) }); if (!response.ok) { throw new Error("Erreur lors de l'ajout de la tâche"); } setNewTask(""); fetchTodos(); } catch (err) { console.error(err); setError("Impossible d'ajouter la tâche"); } }; const toggleTodo = async (id, completed)=>{ try { const response = await fetch("/api/todos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "PUT", id, completed: !completed }) }); if (!response.ok) { throw new Error("Erreur lors de la mise à jour de la tâche"); } fetchTodos(); } catch (err) { console.error(err); setError("Impossible de mettre à jour la tâche"); } }; const confirmDelete = (id)=>{ setTaskToDelete(id); }; const cancelDelete = ()=>{ setTaskToDelete(null); }; const deleteTodo = async (id)=>{ try { const response = await fetch("/api/todos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "DELETE", id }) }); if (!response.ok) { throw new Error("Erreur lors de la suppression de la tâche"); } setTaskToDelete(null); fetchTodos(); } catch (err) { console.error(err); setError("Impossible de supprimer la tâche"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-8 px-4", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800 mb-6", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Gestionnaire de Tâches"), /*#__PURE__*/ React.createElement("form", { onSubmit: addTodo, className: "mb-6", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newTask, onChange: (e)=>setNewTask(e.target.value), placeholder: "Ajouter une nouvelle tâche...", className: "flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Ajouter"))), error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-red-100 text-red-700 rounded-lg", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, todos.map((todo)=>/*#__PURE__*/ React.createElement("li", { key: todo.id, className: "flex items-center gap-3 p-3 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: todo.completed, onChange: ()=>toggleTodo(todo.id, todo.completed), className: "h-5 w-5 text-blue-500", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `flex-1 ${todo.completed ? "line-through text-gray-500" : "text-gray-800"}`, __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, todo.task), /*#__PURE__*/ React.createElement("button", { onClick: ()=>confirmDelete(todo.id), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this })), taskToDelete === todo.id && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 150, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 21 }, __self: this }, "Voulez-vous vraiment supprimer cette tâche ?"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-3", __source: { fileName: "", lineNumber: 154, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: cancelDelete, className: "px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300", __source: { fileName: "", lineNumber: 155, columnNumber: 23 }, __self: this }, "Non"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteTodo(todo.id), className: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 161, columnNumber: 23 }, __self: this }, "Oui"))))))))); }