fixed input width and used destructuring

mate-academy · Nov 7, 2024 · 5c9f5e0 · 5c9f5e0
1 parent 18db7b2
commit 5c9f5e0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -32,7 +32,7 @@
   }
 
   &__new-todo {
-    width: 100%;
+    width: 85%;
     padding: 16px 16px 16px 60px;
 
     font-size: 24px;

diff --git a/src/components/TodoList/TodoItem/TodoItem.scss b/src/components/TodoList/TodoItem/TodoItem.scss
@@ -71,7 +71,7 @@
   }
 
   &__title-field {
-    width: 100%;
+    width: 93.8%;
     padding: 11px 14px;
 
     font-size: inherit;

diff --git a/src/components/TodoList/TodoItem/TodoItem.tsx b/src/components/TodoList/TodoItem/TodoItem.tsx
@@ -11,6 +11,7 @@ type Props = {
 };
 
 export const TodoItem: React.FC<Props> = ({ todo }) => {
+  const { id, title, completed } = todo;
   const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
   const [query, setQuery] = useState('');
   const [isEscaped, setIsEscaped] = useState(false);
@@ -31,18 +32,18 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
     setSelectedTodo(todos.find(t => t.title === selectedTodoTitle));
   }
 
-  function handleSubmitForm(id: number, newTitle: string) {
+  function handleSubmitForm(currId: number, newTitle: string) {
     if (isEscaped) {
       setIsEscaped(false);
 
       return;
     }
 
     if (!newTitle.trim()) {
-      removeTodo(id);
+      removeTodo(currId);
     }
 
-    renameTodo(id, newTitle);
+    renameTodo(currId, newTitle);
 
     setSelectedTodo(null);
   }
@@ -62,24 +63,24 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
   }, [selectedTodo]);
 
   return (
-    <div data-cy="Todo" className={cn('todo', { completed: todo.completed })}>
+    <div data-cy="Todo" className={cn('todo', { completed: completed })}>
       <label className="todo__status-label">
         <input
           data-cy="TodoStatus"
           type="checkbox"
           className="todo__status"
-          checked={todo.completed}
-          onChange={() => toggleTodo(todo.id)}
+          checked={completed}
+          onChange={() => toggleTodo(id)}
         />
       </label>
 
       {selectedTodo === todo ? (
         <form
           onSubmit={ev => {
             ev.preventDefault();
-            handleSubmitForm(todo.id, query);
+            handleSubmitForm(id, query);
           }}
-          onBlur={() => handleSubmitForm(todo.id, query)}
+          onBlur={() => handleSubmitForm(id, query)}
         >
           <input
             ref={inputRef}
@@ -98,14 +99,14 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
             className="todo__title"
             onDoubleClick={handleSelectTodo}
           >
-            {todo.title}
+            {title}
           </span>
 
           <button
             type="button"
             className="todo__remove"
             data-cy="TodoDelete"
-            onClick={() => removeTodo(todo.id)}
+            onClick={() => removeTodo(id)}
           >
             ×
           </button>