From 8f5128f4717ff01585fbd6a9e7cce1d432fd3cf0 Mon Sep 17 00:00:00 2001
From: Roman Martseniuk <roman.martseniuk.developer@gmail.com>
Date: Sat, 21 Dec 2024 12:40:30 +0200
Subject: [PATCH] complete 2.0

---
 src/App.tsx                          |  4 ++--
 src/components/Header/Header.tsx     | 23 ++++++++++-------------
 src/components/TodoItem/TodoItem.tsx |  7 ++-----
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 570b366a4..1bfad25d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -227,9 +227,9 @@ export const App: React.FC = () => {
           inputRef={inputRef}
           inputText={inputText}
           setInputText={setInputText}
-          createFunc={handleAddingTodo}
+          handleCreateTodo={handleAddingTodo}
           todos={todos}
-          completeFunc={handleSwitchTodosStatus}
+          handleCompleteTodo={handleSwitchTodosStatus}
           loadingTodos={loadingTodos}
         />
 
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index a26f87cf9..793764219 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -8,8 +8,8 @@ type Props = {
   inputRef: React.RefObject<HTMLInputElement>;
   inputText: string;
   setInputText: (value: string) => void;
-  createFunc: () => void;
-  completeFunc: () => void;
+  handleCreateTodo: () => void;
+  handleCompleteTodo: () => void;
   todos: Todo[];
   loadingTodos: number[];
 };
@@ -18,11 +18,13 @@ export const Header: React.FC<Props> = ({
   inputRef,
   inputText,
   setInputText,
-  createFunc,
-  completeFunc,
+  handleCreateTodo,
+  handleCompleteTodo,
   todos,
   loadingTodos,
 }) => {
+  const includesActiveTodos = todos.filter(todo => !todo.completed).length > 0;
+
   return (
     <header className="todoapp__header">
       {/* this button should have `active` class only if all todos are completed */}
@@ -30,12 +32,10 @@ export const Header: React.FC<Props> = ({
         <button
           type="button"
           className={classNames('todoapp__toggle-all', {
-            active: todos.filter(todo => !todo.completed).length === 0,
+            active: !includesActiveTodos,
           })}
           data-cy="ToggleAllButton"
-          onClick={() => {
-            completeFunc();
-          }}
+          onClick={handleCompleteTodo}
           disabled={loadingTodos.length > 0}
         />
       )}
@@ -48,14 +48,11 @@ export const Header: React.FC<Props> = ({
           placeholder="What needs to be done?"
           value={inputText}
           ref={inputRef}
-          onChange={e => {
-            e.preventDefault();
-            setInputText(e.target.value);
-          }}
+          onChange={e => setInputText(e.target.value)}
           onKeyDown={e => {
             if (e.key === 'Enter') {
               e.preventDefault();
-              createFunc();
+              handleCreateTodo();
             }
           }}
         />
diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
index 67281111b..2cb28213f 100644
--- a/src/components/TodoItem/TodoItem.tsx
+++ b/src/components/TodoItem/TodoItem.tsx
@@ -102,7 +102,7 @@ export const TodoItem: React.FC<Props> = ({
           type="checkbox"
           className="todo__status"
           checked={currentTodo.completed}
-          onChange={() => setTodoCompleted()}
+          onChange={setTodoCompleted}
         />
       </label>
 
@@ -131,10 +131,7 @@ export const TodoItem: React.FC<Props> = ({
           type="button"
           className="todo__remove"
           data-cy="TodoDelete"
-          onClick={e => {
-            e.preventDefault();
-            handleDeleteTodo(currentTodo.id, changeIsLoading);
-          }}
+          onClick={() => handleDeleteTodo(currentTodo.id, changeIsLoading)}
         >
           ×
         </button>