diff --git a/src/App.tsx b/src/App.tsx
index c9b6c274f9..0929d8382f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable max-len */
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { UserWarning } from './UserWarning';
 import {
   deleteTodo,
   getTodos,
@@ -15,92 +14,38 @@ import { Header } from './components/Header/Header';
 import { Footer } from './components/Footer/Footer';
 import { ErrorNotification } from './components/ErrorNotification/ErrorNotification';
 import { ErrorType } from './types/ErrorType';
+import { filterTodos } from './utils/filterTodos';
 
 export const App: React.FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
-  const [activeTodos, setActiveTodos] = useState<Todo[]>([]);
-
-  const [titleEdit, setTitleEdit] = useState('');
-
-  const [errorState, setErrorState] = useState<Record<ErrorType, boolean>>({
-    [ErrorType.Load]: false,
-    [ErrorType.Input]: false,
-    [ErrorType.Add]: false,
-    [ErrorType.Delete]: false,
-    [ErrorType.CompletedDelete]: false,
-    [ErrorType.Update]: false,
-  });
-
-  const setError = (errorType: ErrorType) => {
-    setErrorState(prevState => ({
-      ...prevState,
-      [errorType]: true,
-    }));
-
-    setTimeout(() => {
-      setErrorState(prevState => ({
-        ...prevState,
-        [errorType]: false,
-      }));
-    }, 3000);
-  };
-
-  const [isLoading, setIsLoading] = useState(false);
-
+  const [errorState, setErrorState] = useState<ErrorType>(ErrorType.Default);
   const [isInputDisabled, setIsInputDisabled] = useState(false);
   const [title, setTitle] = useState('');
   const [filterType, setFilterType] = useState<FilterType>(FilterType.All);
   const inputRef = useRef<HTMLInputElement>(null);
   const inputEditRef = useRef<HTMLInputElement>(null);
   const [tempTodo, setTempTodo] = useState<Todo | null>(null);
-
-  const [idTodoChanged, setIdTodoChanged] = useState<number | null>(null);
-  const [todoChangedTitle, setTodoChangedTitle] = useState<Todo | null>(null);
-
   const [isAllCompleted, setIsAllCompleted] = useState(false);
+  const [todoChangedTitle, setTodoChangedTitle] = useState<Todo | null>(null);
+  const [loadingTodoIds, setLoadingTodoIds] = useState<number[]>([0]);
 
-  useEffect(() => {
-    getTodos()
-      .then(responses => {
-        setTodos(responses);
-
-        setIsAllCompleted(responses.every(todo => todo.completed));
-      })
-      .catch(() => {
-        setError(ErrorType.Load);
-      });
+  const setError = (errorType: ErrorType) => {
+    setErrorState(errorType);
 
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
+    setTimeout(() => {
+      setErrorState(ErrorType.Default);
+    }, 3000);
+  };
 
   const filteredTodos = useMemo((): Todo[] => {
-    switch (filterType) {
-      case FilterType.All:
-        return todos;
-      case FilterType.Active:
-        return todos.filter(todo => !todo.completed);
-      case FilterType.Completed:
-        return todos.filter(todo => todo.completed);
-      default:
-        return todos;
-    }
+    return filterTodos(todos, filterType);
   }, [filterType, todos]);
 
-  const todosLeft = useMemo((): Todo[] => {
-    return todos.filter(todo => !todo.completed);
-  }, [todos]);
-
-  const todosCompleted = useMemo((): Todo[] => {
-    return todos.filter(todo => todo.completed);
-  }, [todos]);
-
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsAllCompleted(false);
 
-    if (title.trim() === '') {
+    if (!title.trim().length) {
       setError(ErrorType.Input);
 
       return;
@@ -112,10 +57,10 @@ export const App: React.FC = () => {
       completed: false,
     };
 
-    setTempTodo({ ...newTodo, id: 0 });
-
     setIsInputDisabled(true);
 
+    setTempTodo({ ...newTodo, id: 0 });
+
     postTodo(newTodo)
       .then((response: TodoResponse) => {
         const { userId, id, title: titleTodo, completed } = response;
@@ -124,55 +69,43 @@ export const App: React.FC = () => {
           ...currentTodos,
           { userId, id, title: titleTodo, completed },
         ]);
-        setTempTodo(null);
         setTitle('');
       })
       .catch(() => {
         setError(ErrorType.Add);
-        setTempTodo(null);
       })
       .finally(() => {
         setIsInputDisabled(false);
+        setTempTodo(null);
       });
   };
 
   const handleDeleteTodo = (todoID: number | null) => {
-    setIdTodoChanged(todoID);
     setIsInputDisabled(true);
 
+    if (todoID) {
+      setLoadingTodoIds(currentIds => [...currentIds, todoID]);
+    }
+
     deleteTodo(todoID)
       .then(() => {
         setTodos(currentTodos =>
           currentTodos.filter(todo => todo.id !== todoID),
         );
-        setIsInputDisabled(false);
       })
       .catch(() => {
-        setIsLoading(false);
         setError(ErrorType.Delete);
       })
       .finally(() => {
-        setIdTodoChanged(null);
+        setIsInputDisabled(false);
+        setLoadingTodoIds(currentIds => currentIds.filter(id => id !== todoID));
       });
   };
 
   const handleDeleteCompletedTodos = () => {
-    setIsInputDisabled(true);
-
     todos.forEach(todo => {
       if (todo.completed) {
-        deleteTodo(todo.id)
-          .then(() => {
-            setTodos(currentTodos =>
-              currentTodos.filter(currentTodo => currentTodo.id !== todo.id),
-            );
-          })
-          .catch(() => {
-            setError(ErrorType.CompletedDelete);
-          })
-          .finally(() => {
-            setIsInputDisabled(false);
-          });
+        handleDeleteTodo(todo.id);
       }
     });
   };
@@ -190,14 +123,14 @@ export const App: React.FC = () => {
         completed: !state,
       };
 
-      const patchPromise = patchTodo(todo.id, updatedTodo) as Promise<Todo>;
+      const patchPromise = patchTodo(todo.id, updatedTodo);
 
       patchPromises.push(patchPromise);
-      setActiveTodos(currentTodos => [...currentTodos, updatedTodo]);
+
+      setLoadingTodoIds(currentTodos => [...currentTodos, updatedTodo.id]);
     }
 
     try {
-      setIsLoading(true);
       const patchedTodos = await Promise.all(patchPromises);
 
       setTodos(currentTodos =>
@@ -210,14 +143,12 @@ export const App: React.FC = () => {
     } catch (error) {
       setError(ErrorType.Update);
     } finally {
-      setIsLoading(false);
-      setActiveTodos([]);
+      setLoadingTodoIds([]);
     }
   };
 
   const handleCompletedTodo = async (chosenTodo: Todo) => {
-    setIdTodoChanged(chosenTodo.id);
-    setIsLoading(true);
+    setLoadingTodoIds(currentIds => [...currentIds, chosenTodo.id]);
 
     const updatedTodo: Todo = {
       ...chosenTodo,
@@ -238,26 +169,26 @@ export const App: React.FC = () => {
       });
     } catch (error) {
       setError(ErrorType.Update);
-      setIsLoading(false);
     } finally {
-      setIsLoading(false);
-      setActiveTodos([]);
-      setIdTodoChanged(null);
+      setLoadingTodoIds([]);
     }
   };
 
   const handleDoubleClickTodo = (chosenTodo: Todo) => {
     setTodoChangedTitle(chosenTodo);
+    setLoadingTodoIds(currentIds => [...currentIds, chosenTodo.id]);
   };
 
-  const handleSubmitEdit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const handleSubmitEdit = async (
+    titleEdit: string,
+    event: React.FormEvent<HTMLFormElement> | null = null,
+  ) => {
+    event?.preventDefault();
 
     const trimmedTitle = titleEdit.trim();
     const prevTodo = todos.find(todo => todo.id === todoChangedTitle?.id);
 
     if (!trimmedTitle) {
-      setIsLoading(false);
       handleDeleteTodo(todoChangedTitle?.id || null);
 
       return;
@@ -269,8 +200,6 @@ export const App: React.FC = () => {
       trimmedTitle &&
       trimmedTitle !== prevTodo.title
     ) {
-      setIsLoading(true);
-
       const updatedTodo: Todo = {
         ...todoChangedTitle,
         title: trimmedTitle,
@@ -284,73 +213,50 @@ export const App: React.FC = () => {
             todo.id === patchedTodo.id ? patchedTodo : todo,
           );
         });
-
         setTodoChangedTitle(null);
       } catch (error) {
         setError(ErrorType.Update);
-        setIsLoading(false);
+        setLoadingTodoIds(currentIds =>
+          currentIds.filter(id => id !== todoChangedTitle.id),
+        );
       } finally {
-        setIsLoading(false);
+        setLoadingTodoIds(currentIds =>
+          currentIds.filter(id => id !== todoChangedTitle.id),
+        );
       }
     } else {
       setTodoChangedTitle(null);
+      setLoadingTodoIds(currentIds =>
+        currentIds.filter(id => id !== todoChangedTitle?.id),
+      );
     }
   };
 
-  const handleBlurEdit = async () => {
-    const trimmedTitle = titleEdit.trim();
-    const prevTodo = todos.find(todo => todo.id === todoChangedTitle?.id);
-
-    if (
-      todoChangedTitle &&
-      prevTodo &&
-      trimmedTitle &&
-      trimmedTitle !== prevTodo.title
-    ) {
-      setIsLoading(true);
-
-      const updatedTodo: Todo = {
-        ...todoChangedTitle,
-        title: trimmedTitle,
-      };
-
-      try {
-        const patchedTodo = await patchTodo(todoChangedTitle.id, updatedTodo);
-
-        setTodos(currentTodos => {
-          return currentTodos.map(todo =>
-            todo.id === patchedTodo.id ? patchedTodo : todo,
-          );
-        });
-
-        setTodoChangedTitle(null);
-      } catch (error) {
-        setError(ErrorType.Update);
-        setIsLoading(false);
-      } finally {
-        setIsLoading(false);
-      }
-    } else if (!trimmedTitle) {
-      handleDeleteTodo(todoChangedTitle?.id || null);
-    } else {
-      setTodoChangedTitle(null);
-    }
+  const handleBlurEdit = async (titleEdit: string) => {
+    await handleSubmitEdit(titleEdit);
   };
 
   const handleCancelEdit = () => {
     setTodoChangedTitle(null);
   };
 
+  useEffect(() => {
+    getTodos()
+      .then(responses => {
+        setTodos(responses);
+        setIsAllCompleted(responses.every(todo => todo.completed));
+      })
+      .catch(() => {
+        setError(ErrorType.Load);
+      });
+  }, []);
+
   useEffect(() => {
     if (!isInputDisabled && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isInputDisabled]);
 
-  if (!USER_ID) {
-    return <UserWarning />;
-  }
-
   return (
     <div className="todoapp">
       <h1 className="todoapp__title">todos</h1>
@@ -359,43 +265,38 @@ export const App: React.FC = () => {
         <Header
           todos={todos}
           isAllCompleted={isAllCompleted}
-          onToggleAll={handleToggleAll}
-          onSubmit={handleSubmit}
           inputRef={inputRef}
           title={title}
-          setTitle={setTitle}
           isInputDisabled={isInputDisabled}
+          onToggleAll={handleToggleAll}
+          onSubmit={handleSubmit}
+          setTitle={setTitle}
         />
         <TodoList
           todos={filteredTodos}
+          tempTodo={tempTodo}
+          todoChangedTitle={todoChangedTitle}
+          inputEditRef={inputEditRef}
+          loadingTodoIds={loadingTodoIds}
           onDeleteTodo={handleDeleteTodo}
           onCompletedTodo={handleCompletedTodo}
           onDoubleClickTodo={handleDoubleClickTodo}
           onSubmitEdit={handleSubmitEdit}
-          tempTodo={tempTodo}
-          idDeletedTodo={idTodoChanged}
-          todoChangedTitle={todoChangedTitle}
-          isLoading={isLoading}
-          activeTodos={activeTodos}
-          titleEdit={titleEdit}
-          onTitleEdit={setTitleEdit}
-          inputEditRef={inputEditRef}
           onCancelEdit={handleCancelEdit}
           handleBlurEdit={handleBlurEdit}
         />
 
         {!todos.length || (
           <Footer
-            todosLeft={todosLeft}
+            todos={todos}
             filterType={filterType}
             setFilterType={setFilterType}
-            todosCompleted={todosCompleted}
             onDeleteCompletedTodos={handleDeleteCompletedTodos}
           />
         )}
       </div>
 
-      <ErrorNotification todos={todos} errorState={errorState} />
+      <ErrorNotification errorState={errorState} />
     </div>
   );
 };
diff --git a/src/api/todos.ts b/src/api/todos.ts
index f10d61db59..4c9e8b3ee8 100644
--- a/src/api/todos.ts
+++ b/src/api/todos.ts
@@ -7,7 +7,6 @@ export const getTodos = () => {
   return client.get<Todo[]>(`/todos?userId=${USER_ID}`);
 };
 
-// Add more methods here
 export const postTodo = (data: Partial<Todo>): Promise<TodoResponse> => {
   return client.post('/todos', data);
 };
diff --git a/src/components/ErrorNotification/ErrorNotification.tsx b/src/components/ErrorNotification/ErrorNotification.tsx
index 5031c224ed..43888fcff1 100644
--- a/src/components/ErrorNotification/ErrorNotification.tsx
+++ b/src/components/ErrorNotification/ErrorNotification.tsx
@@ -1,15 +1,13 @@
 import classNames from 'classnames';
 import React from 'react';
 import { ErrorType } from '../../types/ErrorType';
-import { Todo } from '../../types/Todo';
 
 type Props = {
-  todos: Todo[];
-  errorState: Record<ErrorType, boolean>;
+  errorState: ErrorType;
 };
 
 export const ErrorNotification: React.FC<Props> = (props: Props) => {
-  const { todos, errorState } = props;
+  const { errorState } = props;
 
   return (
     <div
@@ -22,13 +20,7 @@ export const ErrorNotification: React.FC<Props> = (props: Props) => {
       )}
     >
       <button data-cy="HideErrorButton" type="button" className="delete" />
-      {!todos.length && `Unable to load todos`}
-      {errorState[ErrorType.Input] && `Title should not be empty`}
-      {errorState[ErrorType.Add] && `Unable to add a todo`}
-      {(errorState[ErrorType.Delete] ||
-        errorState[ErrorType.CompletedDelete]) &&
-        `Unable to delete a todo`}
-      {errorState[ErrorType.Update] && `Unable to update a todo`}
+      {!!errorState.length && errorState}
     </div>
   );
 };
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index f7efea6318..c868a69d91 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,24 +1,31 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Todo } from '../../types/Todo';
 import { FilterType } from '../../types/FilterType';
 
 type Props = {
-  todosLeft: Todo[];
+  todos: Todo[];
   filterType: FilterType;
   setFilterType: React.Dispatch<React.SetStateAction<FilterType>>;
-  todosCompleted: Todo[];
   onDeleteCompletedTodos: () => void;
 };
 
 export const Footer: React.FC<Props> = (props: Props) => {
-  const {
-    todosLeft,
-    filterType,
-    setFilterType,
-    todosCompleted,
-    onDeleteCompletedTodos,
-  } = props;
+  const { todos, filterType, setFilterType, onDeleteCompletedTodos } = props;
+
+  const todosLeft = useMemo((): Todo[] => {
+    return todos.filter(todo => !todo.completed);
+  }, [todos]);
+
+  const todosCompleted = useMemo((): Todo[] => {
+    return todos.filter(todo => todo.completed);
+  }, [todos]);
+
+  const filterOptions = [
+    { label: 'All', value: FilterType.All, href: '#/' },
+    { label: 'Active', value: FilterType.Active, href: '#/active' },
+    { label: 'Completed', value: FilterType.Completed, href: '#/completed' },
+  ];
 
   return (
     <footer className={classNames('todoapp__footer')} data-cy="Footer">
@@ -27,44 +34,21 @@ export const Footer: React.FC<Props> = (props: Props) => {
       </span>
 
       <nav className="filter" data-cy="Filter">
-        <a
-          href="#/"
-          className={classNames('filter__link', {
-            selected: filterType === FilterType.All,
-          })}
-          data-cy="FilterLinkAll"
-          onClick={() => {
-            setFilterType(FilterType.All);
-          }}
-        >
-          All
-        </a>
-
-        <a
-          href="#/active"
-          className={classNames('filter__link', {
-            selected: filterType === FilterType.Active,
-          })}
-          data-cy="FilterLinkActive"
-          onClick={() => {
-            setFilterType(FilterType.Active);
-          }}
-        >
-          Active
-        </a>
-
-        <a
-          href="#/completed"
-          className={classNames('filter__link', {
-            selected: filterType === FilterType.Completed,
-          })}
-          data-cy="FilterLinkCompleted"
-          onClick={() => {
-            setFilterType(FilterType.Completed);
-          }}
-        >
-          Completed
-        </a>
+        {filterOptions.map(option => (
+          <a
+            key={option.value}
+            href={option.href}
+            className={classNames('filter__link', {
+              selected: filterType === option.value,
+            })}
+            data-cy={`FilterLink${option.label}`}
+            onClick={() => {
+              setFilterType(option.value);
+            }}
+          >
+            {option.label}
+          </a>
+        ))}
       </nav>
 
       <button
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index c029ae7320..b0a5a5dee8 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -27,7 +27,7 @@ export const Header: React.FC<Props> = (props: Props) => {
 
   return (
     <header className="todoapp__header">
-      {!todos.length || (
+      {!!todos.length && (
         <button
           type="button"
           className={classNames('todoapp__toggle-all', {
diff --git a/src/components/TodoComponent/TodoComponent.tsx b/src/components/TodoComponent/TodoComponent.tsx
index ddd5611059..db065dede6 100644
--- a/src/components/TodoComponent/TodoComponent.tsx
+++ b/src/components/TodoComponent/TodoComponent.tsx
@@ -1,42 +1,39 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import { Todo } from '../../types/Todo';
 
 type Props = {
-  onDoubleClickTodo: (todo: Todo) => void;
   todo: Todo;
-  onTitleEdit: (newValue: string) => void;
-  onCompletedTodo: (todo: Todo) => void;
   todoChangedTitle: Todo | null;
-  onSubmitEdit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
   inputEditRef: React.RefObject<HTMLInputElement> | null;
-  titleEdit: string;
-  handleBlurEdit: () => void;
+  loadingTodoIds: number[];
+  onDoubleClickTodo: (todo: Todo) => void;
+  onCompletedTodo: (todo: Todo) => void;
+  onSubmitEdit: (
+    titleEdit: string,
+    event: React.FormEvent<HTMLFormElement> | null,
+  ) => Promise<void>;
+  handleBlurEdit: (titleEdit: string) => void;
   onDeleteTodo: (todoId: number | null) => void;
-  idDeletedTodo: number | null;
-  activeTodos: Todo[];
-  isLoading: boolean;
 };
 
 export const TodoComponent: React.FC<Props> = (props: Props) => {
   const {
     onDoubleClickTodo,
     todo,
-    onTitleEdit,
     onCompletedTodo,
     todoChangedTitle,
     onSubmitEdit,
     inputEditRef,
-    titleEdit,
     handleBlurEdit,
     onDeleteTodo,
-    idDeletedTodo,
-    activeTodos,
-    isLoading,
+    loadingTodoIds,
   } = props;
 
+  const [titleEdit, setTitleEdit] = useState('');
+
   const { id, completed, title } = todo;
 
   return (
@@ -45,7 +42,7 @@ export const TodoComponent: React.FC<Props> = (props: Props) => {
       className={classNames('todo', { completed: completed })}
       onDoubleClick={() => {
         onDoubleClickTodo(todo);
-        onTitleEdit(title);
+        setTitleEdit(title);
       }}
     >
       <label className="todo__status-label">
@@ -61,7 +58,7 @@ export const TodoComponent: React.FC<Props> = (props: Props) => {
       </label>
 
       {todoChangedTitle?.id === id ? (
-        <form onSubmit={onSubmitEdit}>
+        <form onSubmit={event => onSubmitEdit(titleEdit, event)}>
           <input
             data-cy="TodoTitleField"
             type="text"
@@ -69,8 +66,8 @@ export const TodoComponent: React.FC<Props> = (props: Props) => {
             placeholder="Empty todo will be deleted"
             ref={inputEditRef}
             value={titleEdit}
-            onChange={event => onTitleEdit(event.target.value)}
-            onBlur={handleBlurEdit}
+            onChange={event => setTitleEdit(event.target.value)}
+            onBlur={() => handleBlurEdit(titleEdit)}
           />
         </form>
       ) : (
@@ -95,12 +92,7 @@ export const TodoComponent: React.FC<Props> = (props: Props) => {
       <div
         data-cy="TodoLoader"
         className={classNames('modal overlay', {
-          'is-active':
-            idDeletedTodo === id ||
-            (activeTodos.find(activeTodo => todo.id === activeTodo.id) &&
-              isLoading) ||
-            (isLoading && todoChangedTitle?.id === id) ||
-            todo.id === 0,
+          'is-active': loadingTodoIds.includes(id),
         })}
       >
         <div className="modal-background has-background-white-ter" />
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index 1fe6736ba1..ccbbf885cc 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -10,17 +10,16 @@ type Props = {
   onDeleteTodo: (todoId: number | null) => void;
   onCompletedTodo: (todo: Todo) => void;
   onDoubleClickTodo: (todo: Todo) => void;
-  onSubmitEdit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+  onSubmitEdit: (
+    titleEdit: string,
+    event: React.FormEvent<HTMLFormElement> | null,
+  ) => Promise<void>;
   tempTodo: Todo | null;
-  idDeletedTodo: number | null;
   todoChangedTitle: Todo | null;
-  isLoading: boolean;
-  activeTodos: Todo[];
-  titleEdit: string;
-  onTitleEdit: (newValue: string) => void;
   inputEditRef: React.RefObject<HTMLInputElement> | null;
   onCancelEdit: () => void;
-  handleBlurEdit: () => void;
+  handleBlurEdit: (titleEdit: string) => void;
+  loadingTodoIds: number[];
 };
 
 export const TodoList: React.FC<Props> = (props: Props) => {
@@ -31,34 +30,31 @@ export const TodoList: React.FC<Props> = (props: Props) => {
     onDoubleClickTodo,
     onSubmitEdit,
     tempTodo,
-    idDeletedTodo,
     todoChangedTitle,
-    isLoading,
-    activeTodos,
-    titleEdit,
-    onTitleEdit,
     inputEditRef,
     onCancelEdit,
     handleBlurEdit,
+    loadingTodoIds,
   } = props;
 
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      onCancelEdit();
-    }
-  };
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onCancelEdit();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onCancelEdit]);
 
   useEffect(() => {
     if (inputEditRef?.current) {
       inputEditRef.current.focus();
-      inputEditRef.current.addEventListener('keydown', handleKeyDown);
     }
-
-    return () => {
-      if (inputEditRef?.current) {
-        inputEditRef.current.removeEventListener('keydown', handleKeyDown);
-      }
-    };
   }, [todoChangedTitle, inputEditRef]);
 
   return (
@@ -69,17 +65,13 @@ export const TodoList: React.FC<Props> = (props: Props) => {
             key={todo.id}
             onDoubleClickTodo={onDoubleClickTodo}
             todo={todo}
-            onTitleEdit={onTitleEdit}
             onCompletedTodo={onCompletedTodo}
             todoChangedTitle={todoChangedTitle}
             onSubmitEdit={onSubmitEdit}
             inputEditRef={inputEditRef}
-            titleEdit={titleEdit}
             handleBlurEdit={handleBlurEdit}
             onDeleteTodo={onDeleteTodo}
-            idDeletedTodo={idDeletedTodo}
-            activeTodos={activeTodos}
-            isLoading={isLoading}
+            loadingTodoIds={loadingTodoIds}
           />
         );
       })}
@@ -88,17 +80,13 @@ export const TodoList: React.FC<Props> = (props: Props) => {
         <TodoComponent
           onDoubleClickTodo={onDoubleClickTodo}
           todo={tempTodo}
-          onTitleEdit={onTitleEdit}
           onCompletedTodo={onCompletedTodo}
           todoChangedTitle={todoChangedTitle}
           onSubmitEdit={onSubmitEdit}
           inputEditRef={inputEditRef}
-          titleEdit={titleEdit}
           handleBlurEdit={handleBlurEdit}
           onDeleteTodo={onDeleteTodo}
-          idDeletedTodo={idDeletedTodo}
-          activeTodos={activeTodos}
-          isLoading={isLoading}
+          loadingTodoIds={loadingTodoIds}
         />
       )}
     </section>
diff --git a/src/types/ErrorType.ts b/src/types/ErrorType.ts
index 0c9f3e16a2..3356139540 100644
--- a/src/types/ErrorType.ts
+++ b/src/types/ErrorType.ts
@@ -1,8 +1,9 @@
 export enum ErrorType {
-  Load = 'LOAD_ERROR',
-  Input = 'INPUT_ERROR',
-  Add = 'ADD_ERROR',
-  Delete = 'DELETE_ERROR',
-  CompletedDelete = 'COMPLETED_DELETE_ERROR',
-  Update = 'UPDATE_ERROR',
+  Default = '',
+  Input = 'Title should not be empty',
+  Add = 'Unable to add a todo',
+  Delete = 'Unable to delete a todo',
+  // CompletedDelete = 'Unable to delete a completed todo',
+  Update = 'Unable to update a todo',
+  Load = 'Unable to load todos',
 }
diff --git a/src/utils/filterTodos.ts b/src/utils/filterTodos.ts
new file mode 100644
index 0000000000..b2ddeed040
--- /dev/null
+++ b/src/utils/filterTodos.ts
@@ -0,0 +1,15 @@
+import { FilterType } from '../types/FilterType';
+import { Todo } from '../types/Todo';
+
+export const filterTodos = (todos: Todo[], filterType: FilterType) => {
+  switch (filterType) {
+    case FilterType.All:
+      return todos;
+    case FilterType.Active:
+      return todos.filter(todo => !todo.completed);
+    case FilterType.Completed:
+      return todos.filter(todo => todo.completed);
+    default:
+      return todos;
+  }
+};