diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx index 7476d5a6f..eae9d285b 100644 --- a/src/components/TodoItem/TodoItem.tsx +++ b/src/components/TodoItem/TodoItem.tsx @@ -20,6 +20,29 @@ export const TodoItem: React.FC = ({ todo }) => { }, 0); } + const deleteTodo = (id: number) => { + const filteredTodos = todos.filter(todo => todo.id !== id); + + setTodos(filteredTodos); + localStorage.setItem('todos', JSON.stringify(filteredTodos)); + + const inputField = document.querySelector(".todoapp__new-todo") as HTMLInputElement; + inputField!.focus(); + } + + const editTodo = (title: string, id: number) => { + const updatedTodos = todos.map(todo => todo.id === id ? { ...todo, title } : todo); + + setTodos(updatedTodos); + localStorage.setItem('todos', JSON.stringify(updatedTodos)); + }; + + const handleKeyUp = (e: React.KeyboardEvent) => { + if (e.key === 'Escape') { + setIsEditForm(false); + } + }; + const editTitle = (e: React.FormEvent) => { e.preventDefault(); @@ -38,43 +61,20 @@ export const TodoItem: React.FC = ({ todo }) => { }; const handleTitleBlur = (e: React.ChangeEvent) => { - const newTitle = e.target.value.trim(); + const newTitleBlur = e.target.value.trim(); - if (!newTitle) { + if (!newTitleBlur) { deleteTodo(todo.id); return; } - if (newTitle !== todo.title) { - editTodo(newTitle, todo.id); + if (newTitleBlur !== todo.title) { + editTodo(newTitleBlur, todo.id); } setIsEditForm(false); }; - const editTodo = (title: string, id: number) => { - const updatedTodos = todos.map(todo => todo.id === id ? { ...todo, title } : todo); - - setTodos(updatedTodos); - localStorage.setItem('todos', JSON.stringify(updatedTodos)); - }; - - const handleKeyUp = (e: React.KeyboardEvent) => { - if (e.key === 'Escape') { - setIsEditForm(false); - } - }; - - const deleteTodo = (id: number) => { - const filteredTodos = todos.filter(todo => todo.id !== id); - - setTodos(filteredTodos); - localStorage.setItem('todos', JSON.stringify(filteredTodos)); - - const inputField = document.querySelector(".todoapp__new-todo") as HTMLInputElement; - inputField!.focus(); - } - const toggleTodoStatus = (id: number) => { const updatedTodos = todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo