From bb482a438b1444c08a9a31609882ce2d4bc6940d Mon Sep 17 00:00:00 2001
From: Tanya Baletska <t.baletska@gmail.com>
Date: Wed, 13 Nov 2024 15:29:34 +0200
Subject: [PATCH] fixed

---
 src/components/TodoItem.tsx | 30 +++++++++++++++++-------------
 src/styles/todo.scss        |  2 +-
 src/styles/todoapp.scss     |  2 +-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
index 414230573..c497f8dc2 100644
--- a/src/components/TodoItem.tsx
+++ b/src/components/TodoItem.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
 import { useTodos } from '../TodosContext';
 import { Todo } from '../types/Todo';
 import { useFocus } from '../FocusContext';
@@ -9,16 +10,17 @@ interface TodoItemProps {
 
 export const TodoItem: React.FC<TodoItemProps> = ({ todo }) => {
   const { toggleTodo, deleteTodo, updateTodo } = useTodos();
+  const { id, title, completed } = todo;
   const [isEditing, setIsEditing] = useState(false);
-  const [editText, setEditText] = useState(todo.title);
+  const [editText, setEditText] = useState(title);
   const { focusInput } = useFocus();
 
   const handleEdit = () => setIsEditing(true);
   const handleBlur = () => {
     if (editText.trim()) {
-      updateTodo(todo.id, editText.trim());
+      updateTodo(id, editText.trim());
     } else {
-      deleteTodo(todo.id);
+      deleteTodo(id);
       setTimeout(() => focusInput(), 0);
     }
 
@@ -33,10 +35,15 @@ export const TodoItem: React.FC<TodoItemProps> = ({ todo }) => {
 
     if (e.key === 'Escape') {
       setIsEditing(false);
-      setEditText(todo.title);
+      setEditText(title);
     }
   };
 
+  const handleDelete = () => {
+    deleteTodo(id);
+    focusInput();
+  };
+
   useEffect(() => {
     if (!isEditing) {
       focusInput();
@@ -44,15 +51,15 @@ export const TodoItem: React.FC<TodoItemProps> = ({ todo }) => {
   }, [isEditing, focusInput]);
 
   return (
-    <li className={`todo ${todo.completed ? 'completed' : ''}`} data-cy="Todo">
+    <li className={classNames('todo', { completed })} data-cy="Todo">
       <label className="todo__status-label">
         <input
-          id={`todo-${todo.id}`}
+          id={`todo-${id}`}
           data-cy="TodoStatus"
           type="checkbox"
           className="todo__status"
-          checked={todo.completed}
-          onChange={() => toggleTodo(todo.id)}
+          checked={completed}
+          onChange={() => toggleTodo(id)}
           aria-label="Toggle todo status"
         />
       </label>
@@ -63,15 +70,12 @@ export const TodoItem: React.FC<TodoItemProps> = ({ todo }) => {
             className="todo__title"
             onDoubleClick={handleEdit}
           >
-            {todo.title}
+            {title}
           </span>
           <button
             className="todo__remove"
             data-cy="TodoDelete"
-            onClick={() => {
-              deleteTodo(todo.id);
-              focusInput();
-            }}
+            onClick={handleDelete}
           >
             ×
           </button>
diff --git a/src/styles/todo.scss b/src/styles/todo.scss
index 4576af434..672432b06 100644
--- a/src/styles/todo.scss
+++ b/src/styles/todo.scss
@@ -71,7 +71,7 @@
   }
 
   &__title-field {
-    width: 100%;
+    width: 93%;
     padding: 11px 14px;
 
     font-size: inherit;
diff --git a/src/styles/todoapp.scss b/src/styles/todoapp.scss
index e289a9458..e3983c143 100644
--- a/src/styles/todoapp.scss
+++ b/src/styles/todoapp.scss
@@ -56,7 +56,7 @@
   }
 
   &__new-todo {
-    width: 100%;
+    width: 85%;
     padding: 16px 16px 16px 60px;
 
     font-size: 24px;