From 294cfc68f29601674f7dc6661089ba0354e00925 Mon Sep 17 00:00:00 2001
From: Viktoriia <vkkishko@gmail.com>
Date: Tue, 17 Dec 2024 20:34:21 +0200
Subject: [PATCH] refactored code

---
 README.md                            |   2 +-
 src/App.tsx                          | 247 ++-------------------------
 src/components/Error/Erros.tsx       |   2 +-
 src/components/Footer/Fotter.tsx     |  55 ++++--
 src/components/Header/Header.tsx     | 139 ++++++++++++---
 src/components/Helpers/Helpers.tsx   |  21 +++
 src/components/TodoItem/TodoItem.tsx | 174 +++++++++++++------
 src/components/TodoList/TodoList.tsx |  41 ++---
 8 files changed, 340 insertions(+), 341 deletions(-)
 create mode 100644 src/components/Helpers/Helpers.tsx

diff --git a/README.md b/README.md
index d3c3756ab9..b2f9d94938 100644
--- a/README.md
+++ b/README.md
@@ -47,4 +47,4 @@ Implement the ability to edit a todo title on double click:
 
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_todo-app-with-api/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://VikaChereushenko.github.io/react_todo-app-with-api/) and add it to the PR description.
diff --git a/src/App.tsx b/src/App.tsx
index 72468e910d..1d293f7397 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,33 +9,18 @@ import { TodoList } from './components/TodoList/TodoList';
 import { TempTodo } from './components/TempTodo/TempTodo';
 import { Footer } from './components/Footer/Fotter';
 import { Error } from './components/Error/Erros';
-import { getTodos, addTodo, deleteTodo, updateTodo } from './api/todos';
+import { getTodos } from './api/todos';
+import { filterTodos } from './components/Helpers/Helpers';
 
 import { Todo } from './types/Todo';
 import { TodoStatus } from './types/Status';
 
-function filterTodos(todos: Todo[], status: TodoStatus) {
-  const todosCopy = [...todos];
-
-  switch (status) {
-    case TodoStatus.active:
-      return todosCopy.filter(todo => !todo.completed);
-    case TodoStatus.completed:
-      return todosCopy.filter(todo => todo.completed);
-    case TodoStatus.all:
-      return todosCopy;
-  }
-}
-
 export const App: React.FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
   const [errorMessage, setErrorMessage] = useState('');
   const [status, setStatus] = useState<TodoStatus>(TodoStatus.all);
-  const [title, setTitle] = useState('');
-  const [loading, setLoading] = useState(false);
   const [tempTodo, setTempTodo] = useState<Todo | null>(null);
-  const [processedIs, setProcessedIs] = useState<number[]>([]);
-  const areAllTodosCompleted = todos.every(todo => todo.completed);
+  const [processedIds, setprocessedIds] = useState<number[]>([]);
   const noTodos = todos.length === 0;
   const filteredTodos = filterTodos(todos, status);
 
@@ -45,204 +30,6 @@ export const App: React.FC = () => {
       .catch(() => setErrorMessage('Unable to load todos'));
   }, []);
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const normalizeTitle = title.trim();
-
-    if (!normalizeTitle) {
-      setErrorMessage('Title should not be empty');
-
-      return;
-    }
-
-    setLoading(true);
-    const newTodo = {
-      userId: 2042,
-      title: normalizeTitle,
-      completed: false,
-    };
-
-    setTempTodo({
-      id: 0,
-      ...newTodo,
-    });
-
-    addTodo(newTodo)
-      .then(response => {
-        setTitle('');
-        setTodos(existing => [...existing, response]);
-        setLoading(false);
-      })
-      .catch(() => setErrorMessage('Unable to add a todo'))
-      .finally(() => {
-        setLoading(false);
-        setTempTodo(null);
-      });
-  };
-
-  const handleDeleteOneTodo = (id: number) => {
-    setLoading(true);
-    setProcessedIs(existing => [...existing, id]);
-    deleteTodo(id)
-      .then(() => {
-        setTodos(existing => existing.filter(current => current.id !== id));
-      })
-      .catch(() => setErrorMessage('Unable to delete a todo'))
-      .finally(() => {
-        setProcessedIs([]);
-        setLoading(false);
-      });
-  };
-
-  const handleDeleteCompletedTodos = () => {
-    todos.forEach(todo => {
-      if (todo.completed) {
-        setLoading(true);
-        setProcessedIs(existing => [...existing, todo.id]);
-        deleteTodo(todo.id)
-          .then(() =>
-            setTodos(existing =>
-              existing.filter(current => current.id !== todo.id),
-            ),
-          )
-          .catch(() => setErrorMessage('Unable to delete a todo'))
-          .finally(() => {
-            setLoading(false);
-            setProcessedIs(existing => existing.filter(id => id !== todo.id));
-          });
-      }
-    });
-  };
-
-  const handleStatusUpdate = (id: number) => {
-    setProcessedIs(existing => [...existing, id]);
-
-    const changeItem = todos.find(todo => todo.id === id);
-
-    if (changeItem) {
-      const toUpdate = { completed: !changeItem.completed };
-
-      updateTodo(id, toUpdate)
-        .then(() => {
-          setTodos(existing =>
-            existing.map(el =>
-              el.id === id ? { ...el, completed: toUpdate.completed } : el,
-            ),
-          );
-        })
-        .catch(() => setErrorMessage('Unable to update a todo'))
-        .finally(() => {
-          setProcessedIs([]);
-        });
-    }
-  };
-
-  const handleTotalStatusUpdate = () => {
-    if (!areAllTodosCompleted) {
-      todos.forEach(todo => {
-        if (!todo.completed) {
-          setLoading(true);
-          setProcessedIs(existing => [...existing, todo.id]);
-          const toUpdate = { completed: true };
-
-          updateTodo(todo.id, toUpdate)
-            .then(() => {
-              setTodos(existing =>
-                existing.map(el =>
-                  el.id === todo.id
-                    ? { ...el, completed: toUpdate.completed }
-                    : el,
-                ),
-              );
-            })
-            .catch(() => setErrorMessage('Unable to update a todo'))
-            .finally(() => {
-              setLoading(false);
-              setProcessedIs(existing => existing.filter(id => id !== todo.id));
-            });
-        }
-      });
-    }
-
-    if (areAllTodosCompleted) {
-      todos.forEach(todo => {
-        setLoading(true);
-        setProcessedIs(existing => [...existing, todo.id]);
-        const toUpdate = { completed: false };
-
-        updateTodo(todo.id, toUpdate)
-          .then(() => {
-            setTodos(existing =>
-              existing.map(el =>
-                el.id === todo.id
-                  ? { ...el, completed: toUpdate.completed }
-                  : el,
-              ),
-            );
-          })
-          .catch(() => setErrorMessage('Unable to update a todo'))
-          .finally(() => {
-            setLoading(false);
-            setProcessedIs(existing => existing.filter(id => id !== todo.id));
-          });
-      });
-    }
-  };
-
-  const handleTitleUpdate = (
-    id: number,
-    newTitle: string,
-    setTitleBeingUpdated: React.Dispatch<React.SetStateAction<boolean>>,
-    isTitleChanged: boolean,
-    e?: React.FormEvent<HTMLFormElement>,
-  ) => {
-    e?.preventDefault();
-
-    const normalizeNewTitle = newTitle.trim();
-
-    if (!normalizeNewTitle) {
-      handleDeleteOneTodo(id);
-
-      return;
-    }
-
-    if (!isTitleChanged) {
-      setTitleBeingUpdated(false);
-
-      return;
-    }
-
-    const changeItem = todos.find(todo => todo.id === id);
-    const toUpdate = { title: normalizeNewTitle };
-
-    if (changeItem) {
-      setProcessedIs(existing => [...existing, id]);
-      updateTodo(id, toUpdate)
-        .then(() => {
-          setTodos(existing =>
-            existing.map(el =>
-              el.id === id ? { ...el, title: toUpdate.title } : el,
-            ),
-          );
-          setTitleBeingUpdated(false);
-        })
-        .catch(() => setErrorMessage('Unable to update a todo'))
-        .finally(() => {
-          setProcessedIs([]);
-        });
-    }
-  };
-
-  const handleKeyUp = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-    setTitleBeingUpdated: React.Dispatch<React.SetStateAction<boolean>>,
-  ) => {
-    if (event.key === 'Escape') {
-      setTitleBeingUpdated(false);
-    }
-  };
-
   if (!USER_ID) {
     return <UserWarning />;
   }
@@ -253,32 +40,32 @@ export const App: React.FC = () => {
 
       <div className="todoapp__content">
         <Header
-          allTodosCompleted={areAllTodosCompleted}
-          noTodos={noTodos}
-          onSubmit={handleSubmit}
-          loading={loading}
-          title={title}
-          onTitleChange={value => setTitle(value)}
-          onTotalStatusUpdate={handleTotalStatusUpdate}
+          todoList={todos}
+          onError={setErrorMessage}
+          updateTodoList={setTodos}
+          updateTempTodo={setTempTodo}
+          updateProcessedIds={setprocessedIds}
         />
 
         <TodoList
           filteredTodos={filteredTodos}
-          onDelete={handleDeleteOneTodo}
-          onStatusUpdate={handleStatusUpdate}
-          onUpdatedTitleSubmit={handleTitleUpdate}
-          onKeyUp={handleKeyUp}
-          processedIs={processedIs}
+          updateTodolist={setTodos}
+          onError={setErrorMessage}
+          todoList={todos}
+          processedIds={processedIds}
+          updateProcessedIds={setprocessedIds}
         />
 
         {tempTodo && <TempTodo todo={tempTodo} />}
 
         {!noTodos && (
           <Footer
-            todos={todos}
+            todoList={todos}
+            updateTodolist={setTodos}
             status={status}
             onStatusChange={(value: TodoStatus) => setStatus(value)}
-            clearCompletedTodos={handleDeleteCompletedTodos}
+            updateProcessedIds={setprocessedIds}
+            onError={setErrorMessage}
           />
         )}
       </div>
diff --git a/src/components/Error/Erros.tsx b/src/components/Error/Erros.tsx
index 8d8065c912..d24c2a3860 100644
--- a/src/components/Error/Erros.tsx
+++ b/src/components/Error/Erros.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 type Props = {
   errorMessage: string;
-  hideError: (arg: string) => void;
+  hideError: (errorMessage: string) => void;
 };
 
 export const Error: React.FC<Props> = ({ errorMessage, hideError }) => {
diff --git a/src/components/Footer/Fotter.tsx b/src/components/Footer/Fotter.tsx
index 54de8b45a2..ffc1ececb6 100644
--- a/src/components/Footer/Fotter.tsx
+++ b/src/components/Footer/Fotter.tsx
@@ -1,29 +1,58 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useMemo } from 'react';
 import classNames from 'classnames';
 
+import { deleteTodo } from '../../api/todos';
+import { capitalizeFirstLetter, filterOptions } from '../Helpers/Helpers';
+
 import { Todo } from '../../types/Todo';
 import { TodoStatus } from '../../types/Status';
 
 type Props = {
-  todos: Todo[];
+  todoList: Todo[];
+  updateTodolist: React.Dispatch<React.SetStateAction<Todo[]>>;
   status: TodoStatus;
-  onStatusChange: (arg: TodoStatus) => void;
-  clearCompletedTodos: () => void;
+  onStatusChange: (status: TodoStatus) => void;
+  updateProcessedIds: React.Dispatch<React.SetStateAction<number[]>>;
+  onError: React.Dispatch<React.SetStateAction<string>>;
 };
 
 export const Footer: React.FC<Props> = ({
-  todos,
+  todoList,
+  updateTodolist,
   status,
   onStatusChange,
-  clearCompletedTodos,
+  updateProcessedIds,
+  onError,
 }) => {
-  const activeTodos = todos.filter(todo => !todo.completed);
-  const isAnyCompleted = todos.some(todo => todo.completed);
-  const filterOptions = Object.values(TodoStatus);
+  const activeTodos = useMemo(
+    () => todoList.filter(todo => !todo.completed),
+    [todoList],
+  );
+  const isAnyCompleted = useMemo(
+    () => todoList.some(todo => todo.completed),
+    [todoList],
+  );
 
-  const capitalizeFirstLetter = (value: TodoStatus) => {
-    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
-  };
+  const handleDeleteCompletedTodos = useCallback(() => {
+    todoList.forEach(todo => {
+      if (todo.completed) {
+        updateProcessedIds(existing => [...existing, todo.id]);
+        deleteTodo(todo.id)
+          .then(() =>
+            updateTodolist(existing =>
+              existing.filter(current => current.id !== todo.id),
+            ),
+          )
+          .catch(() => onError('Unable to delete a todo'))
+          .finally(() => {
+            updateProcessedIds(existing =>
+              existing.filter(id => id !== todo.id),
+            );
+          });
+      }
+    });
+  }, [todoList]);
 
   return (
     <footer className="todoapp__footer" data-cy="Footer">
@@ -58,7 +87,7 @@ export const Footer: React.FC<Props> = ({
         className="todoapp__clear-completed"
         data-cy="ClearCompletedButton"
         disabled={!isAnyCompleted}
-        onClick={clearCompletedTodos}
+        onClick={handleDeleteCompletedTodos}
       >
         Clear completed
       </button>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 8cfd6f1d50..f715ec48b3 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,33 +1,132 @@
 import React from 'react';
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 
+import { addTodo, updateTodo } from '../../api/todos';
+import { Todo } from '../../types/Todo';
+
 type Props = {
-  allTodosCompleted: boolean;
-  noTodos: boolean;
-  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-  loading: boolean;
-  title: string;
-  onTitleChange: (arg: string) => void;
-  onTotalStatusUpdate: () => void;
+  todoList: Todo[];
+  onError: React.Dispatch<React.SetStateAction<string>>;
+  updateTodoList: React.Dispatch<React.SetStateAction<Todo[]>>;
+  updateTempTodo: React.Dispatch<React.SetStateAction<Todo | null>>;
+  updateProcessedIds: React.Dispatch<React.SetStateAction<number[]>>;
 };
 
 export const Header: React.FC<Props> = ({
-  allTodosCompleted,
-  noTodos,
-  onSubmit,
-  loading,
-  title,
-  onTitleChange,
-  onTotalStatusUpdate,
+  todoList,
+  onError,
+  updateTodoList,
+  updateTempTodo,
+  updateProcessedIds,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
+  const [loading, setLoading] = useState(false);
+  const [title, setTitle] = useState('');
+  const allTodosCompleted = useMemo(
+    () => todoList.every(todo => todo.completed),
+    [todoList],
+  );
+  const noTodos = todoList.length === 0;
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      const normalizeTitle = title.trim();
+
+      if (!normalizeTitle) {
+        onError('Title should not be empty');
+
+        return;
+      }
+
+      setLoading(true);
+      const newTodo = {
+        userId: 2042,
+        title: normalizeTitle,
+        completed: false,
+      };
+
+      updateTempTodo({
+        id: 0,
+        ...newTodo,
+      });
+
+      addTodo(newTodo)
+        .then(response => {
+          setTitle('');
+          updateTodoList(existing => [...existing, response]);
+          setLoading(false);
+        })
+        .catch(() => onError('Unable to add a todo'))
+        .finally(() => {
+          setLoading(false);
+          updateTempTodo(null);
+        });
+    },
+    [title],
+  );
+
+  const handleTotalStatusUpdate = useCallback(() => {
+    if (!allTodosCompleted) {
+      todoList.forEach(todo => {
+        if (!todo.completed) {
+          updateProcessedIds(existing => [...existing, todo.id]);
+          const toUpdate = { completed: true };
+
+          updateTodo(todo.id, toUpdate)
+            .then(() => {
+              updateTodoList(existing =>
+                existing.map(el =>
+                  el.id === todo.id
+                    ? { ...el, completed: toUpdate.completed }
+                    : el,
+                ),
+              );
+            })
+            .catch(() => onError('Unable to update a todo'))
+            .finally(() => {
+              updateProcessedIds(existing =>
+                existing.filter(id => id !== todo.id),
+              );
+            });
+        }
+      });
+    }
+
+    if (allTodosCompleted) {
+      todoList.forEach(todo => {
+        setLoading(true);
+        updateProcessedIds(existing => [...existing, todo.id]);
+        const toUpdate = { completed: false };
+
+        updateTodo(todo.id, toUpdate)
+          .then(() => {
+            updateTodoList(existing =>
+              existing.map(el =>
+                el.id === todo.id
+                  ? { ...el, completed: toUpdate.completed }
+                  : el,
+              ),
+            );
+          })
+          .catch(() => onError('Unable to update a todo'))
+          .finally(() => {
+            setLoading(false);
+            updateProcessedIds(existing =>
+              existing.filter(id => id !== todo.id),
+            );
+          });
+      });
+    }
+  }, [todoList]);
 
   useEffect(() => {
-    if (!loading && inputRef.current) {
+    if (inputRef.current) {
       inputRef.current.focus();
     }
-  }, [loading]);
+  }, [todoList, loading]);
 
   return (
     <header className="todoapp__header">
@@ -38,12 +137,12 @@ export const Header: React.FC<Props> = ({
             active: allTodosCompleted,
           })}
           data-cy="ToggleAllButton"
-          onClick={onTotalStatusUpdate}
+          onClick={handleTotalStatusUpdate}
         />
       )}
 
       {/* Add a todo on form submit */}
-      <form onSubmit={event => onSubmit(event)}>
+      <form onSubmit={event => handleSubmit(event)}>
         <input
           ref={inputRef}
           data-cy="NewTodoField"
@@ -51,7 +150,7 @@ export const Header: React.FC<Props> = ({
           className="todoapp__new-todo"
           placeholder="What needs to be done?"
           value={title}
-          onChange={event => onTitleChange(event.target.value)}
+          onChange={event => setTitle(event.target.value)}
           disabled={loading}
         />
       </form>
diff --git a/src/components/Helpers/Helpers.tsx b/src/components/Helpers/Helpers.tsx
new file mode 100644
index 0000000000..75bcc08e86
--- /dev/null
+++ b/src/components/Helpers/Helpers.tsx
@@ -0,0 +1,21 @@
+import { Todo } from '../../types/Todo';
+import { TodoStatus } from '../../types/Status';
+
+export const filterTodos = (todos: Todo[], status: TodoStatus) => {
+  const todosCopy = [...todos];
+
+  switch (status) {
+    case TodoStatus.active:
+      return todosCopy.filter(todo => !todo.completed);
+    case TodoStatus.completed:
+      return todosCopy.filter(todo => todo.completed);
+    case TodoStatus.all:
+      return todosCopy;
+  }
+};
+
+export const capitalizeFirstLetter = (value: TodoStatus) => {
+  return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+};
+
+export const filterOptions = Object.values(TodoStatus);
diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
index 2d1fd86bfe..56548c0899 100644
--- a/src/components/TodoItem/TodoItem.tsx
+++ b/src/components/TodoItem/TodoItem.tsx
@@ -1,43 +1,131 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
 
+import { Todo } from '../../types/Todo';
+import { deleteTodo, updateTodo } from '../../api/todos';
+
 type Props = {
-  id: number;
+  todoId: number;
   completed: boolean;
   title: string;
-  onItemDelete: (id: number) => void;
-  onItemStatusUpdate: (id: number) => void;
-  onItemTitleUpdate: (
-    arg1: number,
-    arg2: string,
-    arg3: React.Dispatch<React.SetStateAction<boolean>>,
-    arg4: boolean,
-    arg5?: React.FormEvent<HTMLFormElement>,
-  ) => void;
-  onKeyUp: (
-    arg1: React.KeyboardEvent<HTMLInputElement>,
-    arg2: React.Dispatch<React.SetStateAction<boolean>>,
-  ) => void;
-  processedIs: number[];
+  updateTodolist: React.Dispatch<React.SetStateAction<Todo[]>>;
+  onError: React.Dispatch<React.SetStateAction<string>>;
+  todoList: Todo[];
+  processedIds: number[];
+  updateProcessedIds: React.Dispatch<React.SetStateAction<number[]>>;
 };
 export const TodoItem: React.FC<Props> = ({
-  id,
+  todoId,
   completed,
   title,
-  onItemStatusUpdate,
-  onItemDelete,
-  onItemTitleUpdate,
-  onKeyUp,
-  processedIs,
+  updateTodolist,
+  onError,
+  todoList,
+  processedIds,
+  updateProcessedIds,
 }) => {
-  const [isTitleBeingUpdated, setTitleBeingUpdated] = useState(false);
-  const prevTitle = title;
   const [newTitle, setNewTitle] = useState(title);
-  const isTitleChanged = prevTitle !== newTitle.trim();
+  const [updatingTitle, setUpdatingTitle] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const handleDeleteOneTodo = useCallback(
+    (id: number) => {
+      updateProcessedIds(existing => [...existing, id]);
+      deleteTodo(id)
+        .then(() => {
+          updateTodolist(existing =>
+            existing.filter(current => current.id !== id),
+          );
+        })
+        .catch(() => onError('Unable to delete a todo'))
+        .finally(() => {
+          updateProcessedIds([]);
+        });
+    },
+    [todoId],
+  );
+
+  const handleTitleUpdate = useCallback(
+    (id: number, e?: React.FormEvent<HTMLFormElement>) => {
+      e?.preventDefault();
+
+      const normalizeNewTitle = newTitle.trim();
+      const isTitleChanged = title !== normalizeNewTitle;
+
+      if (!normalizeNewTitle) {
+        handleDeleteOneTodo(id);
+
+        return;
+      }
+
+      if (!isTitleChanged) {
+        setUpdatingTitle(false);
+
+        return;
+      }
+
+      const changeItem = todoList.find(todo => todo.id === id);
+      const toUpdate = { title: normalizeNewTitle };
+
+      if (changeItem) {
+        updateProcessedIds(existing => [...existing, id]);
+        updateTodo(id, toUpdate)
+          .then(() => {
+            updateTodolist(existing =>
+              existing.map(el =>
+                el.id === id ? { ...el, title: toUpdate.title } : el,
+              ),
+            );
+            setUpdatingTitle(false);
+          })
+          .catch(() => onError('Unable to update a todo'))
+          .finally(() => {
+            updateProcessedIds([]);
+          });
+      }
+    },
+    [newTitle],
+  );
+
+  const handleKeyUp = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Escape') {
+        setUpdatingTitle(false);
+
+        return;
+      }
+    },
+    [],
+  );
+
+  const handleStatusUpdate = useCallback(
+    (id: number) => {
+      updateProcessedIds(existing => [...existing, id]);
+
+      const changeItem = todoList.find(todo => todo.id === id);
+
+      if (changeItem) {
+        const toUpdate = { completed: !changeItem.completed };
+
+        updateTodo(id, toUpdate)
+          .then(() => {
+            updateTodolist(existing =>
+              existing.map(el =>
+                el.id === id ? { ...el, completed: toUpdate.completed } : el,
+              ),
+            );
+          })
+          .catch(() => onError('Unable to update a todo'))
+          .finally(() => {
+            updateProcessedIds([]);
+          });
+      }
+    },
+    [completed],
+  );
+
   useEffect(() => {
-    if (isTitleBeingUpdated && inputRef.current) {
+    if (updatingTitle && inputRef.current) {
       inputRef.current.focus();
     }
   });
@@ -51,21 +139,11 @@ export const TodoItem: React.FC<Props> = ({
           type="checkbox"
           className="todo__status"
           checked={completed}
-          onChange={() => onItemStatusUpdate(id)}
+          onChange={() => handleStatusUpdate(todoId)}
         />
       </label>
-      {isTitleBeingUpdated ? (
-        <form
-          onSubmit={event =>
-            onItemTitleUpdate(
-              id,
-              newTitle,
-              setTitleBeingUpdated,
-              isTitleChanged,
-              event,
-            )
-          }
-        >
+      {updatingTitle ? (
+        <form onSubmit={event => handleTitleUpdate(todoId, event)}>
           <input
             data-cy="TodoTitleField"
             ref={inputRef}
@@ -73,15 +151,8 @@ export const TodoItem: React.FC<Props> = ({
             className="todo__title-field"
             placeholder="Empty todo will be deleted"
             value={newTitle}
-            onBlur={() =>
-              onItemTitleUpdate(
-                id,
-                newTitle,
-                setTitleBeingUpdated,
-                isTitleChanged,
-              )
-            }
-            onKeyUp={event => onKeyUp(event, setTitleBeingUpdated)}
+            onBlur={() => handleTitleUpdate(todoId)}
+            onKeyUp={event => handleKeyUp(event)}
             onChange={event => setNewTitle(event.target.value)}
           />
         </form>
@@ -90,7 +161,7 @@ export const TodoItem: React.FC<Props> = ({
           <span
             data-cy="TodoTitle"
             className="todo__title"
-            onDoubleClick={() => setTitleBeingUpdated(true)}
+            onDoubleClick={() => setUpdatingTitle(true)}
           >
             {title}
           </span>
@@ -98,16 +169,17 @@ export const TodoItem: React.FC<Props> = ({
             type="button"
             className="todo__remove"
             data-cy="TodoDelete"
-            onClick={() => onItemDelete(id)}
+            onClick={() => handleDeleteOneTodo(todoId)}
           >
             ×
           </button>
         </>
       )}
+
       <div
         data-cy="TodoLoader"
         className={classNames('modal overlay', {
-          'is-active': processedIs.includes(id),
+          'is-active': processedIds.includes(todoId),
         })}
       >
         <div className="modal-background has-background-white-ter" />
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index 48738f73be..f01513a3f2 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -6,29 +6,20 @@ import { Todo } from '../../types/Todo';
 
 type Props = {
   filteredTodos: Todo[];
-  onDelete: (id: number) => void;
-  onStatusUpdate: (id: number) => void;
-  onUpdatedTitleSubmit: (
-    arg1: number,
-    arg2: string,
-    arg3: React.Dispatch<React.SetStateAction<boolean>>,
-    arg4: boolean,
-    arg5?: React.FormEvent<HTMLFormElement>,
-  ) => void;
-  onKeyUp: (
-    arg1: React.KeyboardEvent<HTMLInputElement>,
-    arg2: React.Dispatch<React.SetStateAction<boolean>>,
-  ) => void;
-  processedIs: number[];
+  updateTodolist: React.Dispatch<React.SetStateAction<Todo[]>>;
+  onError: React.Dispatch<React.SetStateAction<string>>;
+  todoList: Todo[];
+  processedIds: number[];
+  updateProcessedIds: React.Dispatch<React.SetStateAction<number[]>>;
 };
 
 export const TodoList: React.FC<Props> = ({
   filteredTodos,
-  onDelete,
-  onStatusUpdate,
-  onUpdatedTitleSubmit,
-  onKeyUp,
-  processedIs,
+  updateTodolist,
+  onError,
+  todoList,
+  processedIds,
+  updateProcessedIds,
 }) => {
   return (
     <section className="todoapp__main" data-cy="TodoList">
@@ -38,14 +29,14 @@ export const TodoList: React.FC<Props> = ({
         return (
           <TodoItem
             key={id}
-            id={id}
+            todoId={id}
             completed={completed}
             title={title}
-            onItemDelete={onDelete}
-            onItemStatusUpdate={onStatusUpdate}
-            onItemTitleUpdate={onUpdatedTitleSubmit}
-            onKeyUp={onKeyUp}
-            processedIs={processedIs}
+            updateTodolist={updateTodolist}
+            onError={onError}
+            todoList={todoList}
+            processedIds={processedIds}
+            updateProcessedIds={updateProcessedIds}
           />
         );
       })}