diff --git a/src/App.tsx b/src/App.tsx
index 975c84994b..f46fb5302c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,22 @@
 /* eslint-disable max-len */
 /* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Header } from './components/Header/Header';
 import { Footer } from './components/Footer/Footer';
 import { TodoList } from './components/TodoList/TodoList';
 import { Todo } from './types/Todo';
-import { deleteTodo, getTodos, USER_ID } from './api/todos';
-import { Errors } from './utils/Errors';
-import { FilterTodosBy } from './utils/FilterTodosBy';
+import { addTodo, deleteTodo, getTodos, updateTodo } from './api/todos';
+import { Errors } from './types/Errors';
+import { FilterTodosBy } from './types/FilterTodosBy';
 import { Error } from './components/Error/Error';
+import { filterTodos } from './utils/utils';
 
 export const App: React.FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
@@ -22,6 +29,9 @@ export const App: React.FC = () => {
   const [isUpdating, setIsUpdating] = useState(false);
   const [updatingTodoId, setUpdatingTodoId] = useState<number | null>(null);
   const [toggleCompleteAll, setToggleCompleteAll] = useState(false);
+  const [isHeaderDisabled, setIsHeaderDisabled] = useState(false);
+  const [tempIdCounter, setTempIdCounter] = useState(0);
+  const [deletingCardId, setDeletingCardId] = useState<number | null>(null);
 
   useEffect(() => {
     setHasError(Errors.NoError);
@@ -37,23 +47,55 @@ export const App: React.FC = () => {
     })();
   }, []);
 
-  const filteredTodos = todos.filter(todo => {
-    switch (filterBy) {
-      case FilterTodosBy.Active:
-        return !todo.completed;
-      case FilterTodosBy.Completed:
-        return todo.completed;
-      default:
-        return true;
-    }
-  });
+  const filteredTodos = filterTodos(todos, filterBy);
+
+  const uncompletedTodosLength = useMemo(() => {
+    return todos.filter(todo => !todo.completed).length;
+  }, [todos]);
 
-  const uncompletedTodosLength = todos.filter(todo => !todo.completed).length;
-  const completedTodosLenght = todos.filter(todo => todo.completed).length;
+  const completedTodosLength = useMemo(() => {
+    return todos.filter(todo => todo.completed).length;
+  }, [todos]);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const handleDeleteAllCompleted = async () => {
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setHasError(Errors.NoError);
+
+    if (!title.trim()) {
+      setHasError(Errors.TitleEmpty);
+
+      return;
+    }
+
+    const newTodo = {
+      userId: 0,
+      title: title.trim(),
+      completed: false,
+    };
+
+    setTempTodo({ ...newTodo, id: tempIdCounter });
+    setIsHeaderDisabled(true);
+
+    try {
+      const addNewTodo = await addTodo(newTodo);
+
+      setTodos([...todos, addNewTodo]);
+      setIsHeaderDisabled(false);
+      setTitle('');
+      setTempTodo(null);
+      setTempIdCounter(tempIdCounter + 1);
+
+      inputRef.current?.focus();
+    } catch {
+      setHasError(Errors.UnableToAdd);
+      setTempTodo(null);
+      setIsHeaderDisabled(false);
+    }
+  };
+
+  const handleDeleteAllCompleted = useCallback(async () => {
     const completedTodos = todos.filter(todo => todo.completed);
 
     for (const todo of completedTodos) {
@@ -66,6 +108,65 @@ export const App: React.FC = () => {
         setHasError(Errors.UnableToDelete);
       }
     }
+  }, [todos]);
+
+  const handleUpdateToCompleteAll = async () => {
+    setIsUpdating(true);
+    setUpdatingTodoId(null);
+    setToggleCompleteAll(true);
+
+    const areAllTodosCompleted = todos.every(todo => todo.completed);
+    const todosToUpdate = todos.filter(
+      todo => todo.completed === areAllTodosCompleted,
+    );
+
+    try {
+      const updatePromises = todosToUpdate.map(todo =>
+        updateTodo(todo.id, {
+          title: todo.title,
+          completed: !areAllTodosCompleted,
+          userId: todo.userId,
+        }),
+      );
+
+      await Promise.all(updatePromises);
+
+      const updatedTodos = todos.map(todo => ({
+        ...todo,
+        completed: todosToUpdate.some(t => t.id === todo.id)
+          ? !areAllTodosCompleted
+          : todo.completed,
+      }));
+
+      setTodos(updatedTodos);
+
+      setToggleCompleteAll(false);
+      setIsUpdating(false);
+      setUpdatingTodoId(null);
+    } catch {
+      setHasError(Errors.UnableToUpdate);
+      setIsUpdating(false);
+      setUpdatingTodoId(null);
+      setToggleCompleteAll(true);
+    }
+  };
+
+  const handleDelete = async (todoId: number) => {
+    setIsDeleting(true);
+    setDeletingCardId(todoId);
+
+    try {
+      await deleteTodo(todoId);
+      setIsDeleting(false);
+      setDeletingCardId(null);
+      setTodos(todos.filter(todo => todo.id !== todoId));
+      setDeletingCardId(null);
+      inputRef.current?.focus();
+    } catch {
+      setHasError(Errors.UnableToDelete);
+      setIsDeleting(false);
+      setDeletingCardId(null);
+    }
   };
 
   return (
@@ -75,18 +176,11 @@ export const App: React.FC = () => {
         <Header
           title={title}
           setTitle={setTitle}
-          setHasError={setHasError}
-          hasError={hasError}
-          USER_ID={USER_ID}
           todos={todos}
-          setTodos={setTodos}
-          setTempTodo={setTempTodo}
           inputRef={inputRef}
-          isUpdating={isUpdating}
-          setIsUpdating={setIsUpdating}
-          updatingTodoId={updatingTodoId}
-          setUpdatingTodoId={setUpdatingTodoId}
-          setToggleCompleteAll={setToggleCompleteAll}
+          isHeaderDisabled={isHeaderDisabled}
+          handleSubmit={handleSubmit}
+          handleUpdateToCompleteAll={handleUpdateToCompleteAll}
         />
         <TodoList
           todos={filteredTodos}
@@ -95,13 +189,14 @@ export const App: React.FC = () => {
           setIsDeleting={setIsDeleting}
           setTodos={setTodos}
           setHasError={setHasError}
-          inputRef={inputRef}
           initialTodos={todos}
           isUpdating={isUpdating}
           setIsUpdating={setIsUpdating}
           updatingTodoId={updatingTodoId}
           setUpdatingTodoId={setUpdatingTodoId}
           toggleCompleteAll={toggleCompleteAll}
+          handleDelete={handleDelete}
+          deletingCardId={deletingCardId}
         />
 
         {todos.length > 0 && (
@@ -109,7 +204,7 @@ export const App: React.FC = () => {
             uncompletedTodosLength={uncompletedTodosLength}
             filterBy={filterBy}
             setFilteredBy={setFilterBy}
-            completedTodosLenght={completedTodosLenght}
+            completedTodosLenght={completedTodosLength}
             handleDeleteAllCompleted={handleDeleteAllCompleted}
           />
         )}
diff --git a/src/api/todos.ts b/src/api/todos.ts
index 0400e0b597..57506a08a0 100644
--- a/src/api/todos.ts
+++ b/src/api/todos.ts
@@ -2,19 +2,20 @@ import { Todo } from '../types/Todo';
 import { client } from '../utils/fetchClient';
 
 export const USER_ID = 2142;
+const TODOS_PATH = '/todos';
 
 export const getTodos = () => {
-  return client.get<Todo[]>(`/todos?userId=${USER_ID}`);
+  return client.get<Todo[]>(`${TODOS_PATH}?userId=${USER_ID}`);
 };
 
 export const addTodo = (data: Omit<Todo, 'id'>) => {
-  return client.post<Todo>('/todos', data);
+  return client.post<Todo>(`${TODOS_PATH}`, data);
 };
 
 export const deleteTodo = (id: number) => {
-  return client.delete(`/todos/${id}`);
+  return client.delete(`${TODOS_PATH}/${id}`);
 };
 
 export const updateTodo = (id: number, data: Omit<Todo, 'id'>) => {
-  return client.patch(`/todos/${id}`, data);
+  return client.patch(`${TODOS_PATH}/${id}`, data);
 };
diff --git a/src/components/Error/Error.tsx b/src/components/Error/Error.tsx
index 8f1c1da140..a0649a5731 100644
--- a/src/components/Error/Error.tsx
+++ b/src/components/Error/Error.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import cn from 'classnames';
-import { Errors } from '../../utils/Errors';
+import { Errors } from '../../types/Errors';
 
 interface Props {
   hasError: Errors;
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index e6840385f3..b205e0c37b 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FilterTodosBy } from '../../utils/FilterTodosBy';
+import { FilterTodosBy } from '../../types/FilterTodosBy';
 import cn from 'classnames';
 interface Props {
   uncompletedTodosLength: number;
@@ -17,11 +17,7 @@ export const Footer: React.FC<Props> = props => {
     handleDeleteAllCompleted,
   } = props;
 
-  const filters = [
-    { label: 'All', value: FilterTodosBy.All, href: '#/' },
-    { label: 'Active', value: FilterTodosBy.Active, href: '#/active' },
-    { label: 'Completed', value: FilterTodosBy.Completed, href: '#/completed' },
-  ];
+  const filters = Object.values(FilterTodosBy);
 
   return (
     <footer className="todoapp__footer" data-cy="Footer">
@@ -29,19 +25,18 @@ export const Footer: React.FC<Props> = props => {
         {uncompletedTodosLength} items left
       </span>
 
-      {/* Active link should have the 'selected' class */}
       <nav className="filter" data-cy="Filter">
         {filters.map(filter => (
           <a
-            key={filter.value}
-            href={filter.href}
+            key={filter}
+            href={`/#/${filter === FilterTodosBy.All ? '' : filter.toLowerCase()}`}
             className={cn('filter__link', {
-              selected: filterBy === filter.value,
+              selected: filterBy === filter,
             })}
-            data-cy={`FilterLink${filter.label}`}
-            onClick={() => setFilteredBy(filter.value)}
+            data-cy={`FilterLink${filter}`}
+            onClick={() => setFilteredBy(filter)}
           >
-            {filter.label}
+            {filter}
           </a>
         ))}
       </nav>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 874b8e7c15..33b206941e 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,127 +1,35 @@
-import React, { useEffect, useState } from 'react';
-import { Errors } from '../../utils/Errors';
-import { addTodo, updateTodo } from '../../api/todos';
+import React, { useEffect } from 'react';
 import { Todo } from '../../types/Todo';
 import cn from 'classnames';
 
 interface Props {
   title: string;
   setTitle: (title: string) => void;
-  hasError: Errors;
-  setHasError: (hasError: Errors) => void;
-  USER_ID: number;
   todos: Todo[];
-  setTodos: (todos: Todo[]) => void;
-  setTempTodo: (todo: Todo | null) => void;
   inputRef: React.RefObject<HTMLInputElement>;
-  isUpdating: boolean;
-  setIsUpdating: (isUpdating: boolean) => void;
-  updatingTodoId: number | null;
-  setUpdatingTodoId: (updatingTodoId: number | null) => void;
-  setToggleCompleteAll: (toggleCompleteAll: boolean) => void;
+  isHeaderDisabled: boolean;
+  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  handleUpdateToCompleteAll: () => void;
 }
 
 export const Header: React.FC<Props> = props => {
   const {
     title,
     setTitle,
-    setHasError,
-    USER_ID,
     todos,
-    setTodos,
-    setTempTodo,
     inputRef,
-    setIsUpdating,
-    setUpdatingTodoId,
-    setToggleCompleteAll,
+    isHeaderDisabled,
+    handleSubmit,
+    handleUpdateToCompleteAll,
   } = props;
-  const [isDisabled, setIsDisabled] = useState(false);
-  const [tempIdCounter, setTempIdCounter] = useState(0);
 
   const isAllTodosCompleted = todos.every(todo => todo.completed);
   const isTodosNotEmpty = todos.length !== 0;
 
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setHasError(Errors.NoError);
-
-    if (!title.trim()) {
-      setHasError(Errors.TitleEmpty);
-
-      return;
-    }
-
-    const newTodo = {
-      userId: USER_ID,
-      title: title.trim(),
-      completed: false,
-    };
-
-    setTempTodo({ ...newTodo, id: 0 });
-    setIsDisabled(true);
-
-    try {
-      const addNewTodo = await addTodo(newTodo);
-
-      setTodos([...todos, addNewTodo]);
-      setIsDisabled(false);
-      setTitle('');
-      setTempTodo(null);
-      setTempIdCounter(tempIdCounter + 1);
-
-      inputRef.current?.focus();
-    } catch {
-      setHasError(Errors.UnableToAdd);
-      setTempTodo(null);
-      setIsDisabled(false);
-    }
-  };
-
   useEffect(() => {
     inputRef.current?.focus();
   });
 
-  const handleUpdateToCompleteAll = async () => {
-    setIsUpdating(true);
-    setUpdatingTodoId(null);
-    setToggleCompleteAll(true);
-
-    const areAllTodosCompleted = todos.every(todo => todo.completed);
-    const todosToUpdate = todos.filter(
-      todo => todo.completed === areAllTodosCompleted,
-    );
-
-    try {
-      const updatePromises = todosToUpdate.map(todo =>
-        updateTodo(todo.id, {
-          title: todo.title,
-          completed: !areAllTodosCompleted,
-          userId: todo.userId,
-        }),
-      );
-
-      await Promise.all(updatePromises);
-
-      const updatedTodos = todos.map(todo => ({
-        ...todo,
-        completed: todosToUpdate.some(t => t.id === todo.id)
-          ? !areAllTodosCompleted
-          : todo.completed,
-      }));
-
-      setTodos(updatedTodos);
-
-      setToggleCompleteAll(false);
-      setIsUpdating(false);
-      setUpdatingTodoId(null);
-    } catch {
-      setHasError(Errors.UnableToUpdate);
-      setIsUpdating(false);
-      setUpdatingTodoId(null);
-      setToggleCompleteAll(true);
-    }
-  };
-
   return (
     <header className="todoapp__header">
       {isTodosNotEmpty && (
@@ -141,7 +49,7 @@ export const Header: React.FC<Props> = props => {
           autoFocus
           value={title}
           onChange={event => setTitle(event.target.value)}
-          disabled={isDisabled}
+          disabled={isHeaderDisabled}
           ref={inputRef}
         />
       </form>
diff --git a/src/components/TodoCard/TodoCard.tsx b/src/components/TodoCard/TodoCard.tsx
index bbec988a68..cbf7afbd03 100644
--- a/src/components/TodoCard/TodoCard.tsx
+++ b/src/components/TodoCard/TodoCard.tsx
@@ -1,27 +1,26 @@
 /* eslint-disable prettier/prettier */
 import cn from 'classnames';
-import { deleteTodo, updateTodo } from '../../api/todos';
+import { updateTodo } from '../../api/todos';
 import { Todo } from '../../types/Todo';
-import { Errors } from '../../utils/Errors';
+import { Errors } from '../../types/Errors';
 import { useState } from 'react';
 
 interface Props {
   title: string;
   isCompleted: boolean;
-  isTempTodo: boolean;
   isDeleting: boolean;
   todoId: number;
   setIsDeleting: (isDeleting: boolean) => void;
-  todos: Todo[];
   setTodos: (todos: Todo[]) => void;
   setHasError: (hasError: Errors) => void;
-  inputRef: React.RefObject<HTMLInputElement>;
   initialTodos: Todo[];
   isUpdating: boolean;
   setIsUpdating: (isUpdating: boolean) => void;
   updatingTodoId: number | null;
   setUpdatingTodoId: (updatingTodoId: number | null) => void;
   toggleCompleteAll: boolean;
+  handleDelete: (todoId: number) => void;
+  deletingCardId: number | null;
 }
 
 /* eslint-disable jsx-a11y/label-has-associated-control */
@@ -31,40 +30,24 @@ export const TodoCard: React.FC<Props> = props => {
     isCompleted,
     isDeleting,
     todoId,
-    setIsDeleting,
     setTodos,
     setHasError,
-    inputRef,
     initialTodos,
     isUpdating,
     setIsUpdating,
     updatingTodoId,
     setUpdatingTodoId,
     toggleCompleteAll,
+    handleDelete,
+    deletingCardId,
   } = props;
 
-  const [deletingCardId, setDeletingCardId] = useState<number | null>(null);
+
   const [isEditStatus, setIsEditStatus] = useState(false);
   const [editTitleQuery, setEditTitleQuery] = useState(title);
   const [isUpdateRunning, setIsUpdateRunning] = useState(false);
 
-  const handleDelete = async () => {
-    setIsDeleting(true);
-    setDeletingCardId(todoId);
 
-    try {
-      await deleteTodo(todoId);
-      setIsDeleting(false);
-      setDeletingCardId(null);
-      setTodos(initialTodos.filter(todo => todo.id !== todoId));
-      setDeletingCardId(null);
-      inputRef.current?.focus();
-    } catch {
-      setHasError(Errors.UnableToDelete);
-      setIsDeleting(false);
-      setDeletingCardId(null);
-    }
-  };
 
   const handleComplete = async () => {
     const currTodo = initialTodos.find(todo => todo.id === todoId);
@@ -117,7 +100,7 @@ export const TodoCard: React.FC<Props> = props => {
 
 
     if(!editTitleQuery.trim()) {
-      await handleDelete();
+      await handleDelete(todoId);
       setIsUpdating(false);
       setIsUpdateRunning(false);
 
@@ -132,11 +115,6 @@ export const TodoCard: React.FC<Props> = props => {
       return;
     }
 
-
-
-
-
-
     try {
 
       if (currTodo) {
@@ -172,9 +150,6 @@ export const TodoCard: React.FC<Props> = props => {
         setIsEditStatus(false);
         setEditTitleQuery(title);
       }
-
-
-
     };
 
   const handleOnblur = (event: React.FocusEvent<HTMLInputElement, Element>) => {
@@ -186,6 +161,10 @@ export const TodoCard: React.FC<Props> = props => {
     return;
   };
 
+  const isLoaderVisible = (isDeleting && deletingCardId === todoId) ||
+  (isUpdating && updatingTodoId === todoId) ||
+  toggleCompleteAll;
+
   return (
     <div data-cy="Todo" className={cn('todo', { completed: isCompleted })}>
       <label className="todo__status-label">
@@ -231,7 +210,7 @@ export const TodoCard: React.FC<Props> = props => {
             type="button"
             className="todo__remove"
             data-cy="TodoDelete"
-            onClick={handleDelete}
+            onClick={() => handleDelete(todoId)}
           >
             ×
           </button>
@@ -241,11 +220,7 @@ export const TodoCard: React.FC<Props> = props => {
       <div
         data-cy="TodoLoader"
         className={cn('modal overlay', {
-          'is-active':
-
-            (isDeleting && deletingCardId === todoId) ||
-            (isUpdating && updatingTodoId === todoId) ||
-            toggleCompleteAll,
+          'is-active': isLoaderVisible
         })}
       >
         <div className="modal-background has-background-white-ter" />
diff --git a/src/components/TodoCard/TodoCardTemplate.tsx b/src/components/TodoCard/TodoCardTemplate.tsx
index 3b7d444627..8b4ba6a308 100644
--- a/src/components/TodoCard/TodoCardTemplate.tsx
+++ b/src/components/TodoCard/TodoCardTemplate.tsx
@@ -9,12 +9,7 @@ export const TodoCardTemplate: React.FC<Props> = props => {
   return (
     <div data-cy="Todo" className="todo">
       <label className="todo__status-label">
-        <input
-          data-cy="TodoStatus"
-          type="checkbox"
-          className="todo__status"
-          checked
-        />
+        <input data-cy="TodoStatus" type="checkbox" className="todo__status" />
       </label>
 
       <span data-cy="TodoTitle" className="todo__title">
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index 570e9c1175..1b16a99ae1 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -1,5 +1,5 @@
 import { Todo } from '../../types/Todo';
-import { Errors } from '../../utils/Errors';
+import { Errors } from '../../types/Errors';
 import { TodoCard } from '../TodoCard/TodoCard';
 import { TodoCardTemplate } from '../TodoCard/TodoCardTemplate';
 
@@ -10,13 +10,14 @@ interface Props {
   setIsDeleting: (isDeleting: boolean) => void;
   setTodos: (todos: Todo[]) => void;
   setHasError: (hasError: Errors) => void;
-  inputRef: React.RefObject<HTMLInputElement>;
   initialTodos: Todo[];
   isUpdating: boolean;
   setIsUpdating: (isUpdating: boolean) => void;
   updatingTodoId: number | null;
   setUpdatingTodoId: (updatingTodoId: number | null) => void;
   toggleCompleteAll: boolean;
+  handleDelete: (todoId: number) => void;
+  deletingCardId: number | null;
 }
 export const TodoList: React.FC<Props> = props => {
   const {
@@ -26,13 +27,14 @@ export const TodoList: React.FC<Props> = props => {
     setIsDeleting,
     setTodos,
     setHasError,
-    inputRef,
     initialTodos,
     isUpdating,
     setIsUpdating,
     updatingTodoId,
     setUpdatingTodoId,
     toggleCompleteAll,
+    handleDelete,
+    deletingCardId,
   } = props;
 
   return (
@@ -43,20 +45,19 @@ export const TodoList: React.FC<Props> = props => {
             key={todo.id}
             title={todo.title}
             isCompleted={todo.completed}
-            isTempTodo={false}
             isDeleting={isDeleting}
             todoId={todo.id}
             setIsDeleting={setIsDeleting}
-            todos={todos}
             setTodos={setTodos}
             setHasError={setHasError}
-            inputRef={inputRef}
             initialTodos={initialTodos}
             isUpdating={isUpdating}
             setIsUpdating={setIsUpdating}
             updatingTodoId={updatingTodoId}
             setUpdatingTodoId={setUpdatingTodoId}
             toggleCompleteAll={toggleCompleteAll}
+            handleDelete={handleDelete}
+            deletingCardId={deletingCardId}
           />
         );
       })}
diff --git a/src/utils/Errors.ts b/src/types/Errors.ts
similarity index 100%
rename from src/utils/Errors.ts
rename to src/types/Errors.ts
diff --git a/src/types/FilterTodosBy.ts b/src/types/FilterTodosBy.ts
new file mode 100644
index 0000000000..39d3eed61c
--- /dev/null
+++ b/src/types/FilterTodosBy.ts
@@ -0,0 +1,5 @@
+export enum FilterTodosBy {
+  All = 'All',
+  Active = 'Active',
+  Completed = 'Completed',
+}
diff --git a/src/utils/FilterTodosBy.ts b/src/utils/FilterTodosBy.ts
deleted file mode 100644
index 33ad5e9d1c..0000000000
--- a/src/utils/FilterTodosBy.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum FilterTodosBy {
-  All = 'all',
-  Active = 'active',
-  Completed = 'completed',
-}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000000..cdc867f034
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,15 @@
+import { FilterTodosBy } from '../types/FilterTodosBy';
+import { Todo } from '../types/Todo';
+
+export const filterTodos = (todos: Todo[], filterBy: FilterTodosBy) => {
+  return todos.filter(todo => {
+    switch (filterBy) {
+      case FilterTodosBy.Active:
+        return !todo.completed;
+      case FilterTodosBy.Completed:
+        return todo.completed;
+      default:
+        return true;
+    }
+  });
+};