diff --git a/README.md b/README.md
index 47a1add059..ad2768008f 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ and implement the ability to toggle and rename todos.
 ## Toggling a todo status
 
 Toggle the `completed` status on `TodoStatus` change:
+
 - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 - covered the todo with a loader overlay while waiting for API response;
 - the status should be changed on success;
@@ -38,6 +39,7 @@ Implement the ability to edit a todo title on double click:
 - or the deletion error message if we tried to delete the todo.
 
 ## If you want to enable tests
+
 - open `cypress/integration/page.spec.js`
 - replace `describe.skip` with `describe` for the root `describe`
 
@@ -47,4 +49,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://freelinex.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 81e011f432..e5990e9c40 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,375 @@
 /* eslint-disable max-len */
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { UserWarning } from './UserWarning';
+import {
+  createTodo,
+  deleteTodo,
+  makeCompleted,
+  updateTodo,
+  getTodos,
+  USER_ID,
+} from './api/todos';
 
-const USER_ID = 0;
+import { ErrorMessages, FilterStatus, Todo } from './types/Types';
+import { TodoList } from './components/TodoList';
+import { Footer } from './components/Footer';
+import { ErrorNotifications } from './components/ErrorNotifications';
+import {
+  getCompletedTodos,
+  getFilteredTodos,
+  getHasCompletedTodos,
+  getIsAllTodosCompleted,
+  getTodosToToggle,
+} from './utils/functions';
 
 export const App: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [filter, setFilter] = useState<FilterStatus>('all');
+  const [errorMessage, setErrorMessage] = useState<ErrorMessages>(
+    ErrorMessages.empty,
+  );
+  const [title, setTitle] = useState('');
+  const [isSubmiting, setIsSubmiting] = useState(false);
+  const [tempTodo, setTempTodo] = useState<Todo | null>(null);
+  const [deletingTodoIds, setDeletingTodoIds] = useState<number[]>([]);
+  const [checkedTodoId, setCheckedTodoId] = useState<number[]>([]);
+  const [editingTodoId, setEditingTodoId] = useState<number | null>(null);
+  const [editedTitle, setEditedTitle] = useState('');
+
+  const showError = (message: ErrorMessages) => {
+    setErrorMessage(message);
+
+    setTimeout(() => {
+      setErrorMessage(ErrorMessages.empty);
+    }, 3000);
+  };
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const checkCompleteAll = getIsAllTodosCompleted(todos);
+
+  const checkComplete = getHasCompletedTodos(todos);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setErrorMessage(ErrorMessages.empty);
+
+    const trimmedTitle = title.trim();
+
+    if (!trimmedTitle) {
+      showError(ErrorMessages.notBeEmpty);
+      inputRef.current?.focus();
+
+      return;
+    }
+
+    setIsSubmiting(true);
+    setTempTodo({
+      id: 0,
+      title: trimmedTitle,
+      userId: USER_ID,
+      completed: false,
+    });
+
+    createTodo({
+      title: trimmedTitle,
+      userId: USER_ID,
+      completed: false,
+    })
+      .then(newTodo => {
+        setTodos(current => [...current, newTodo]);
+        setTitle('');
+      })
+      .catch(() => {
+        showError(ErrorMessages.addError);
+      })
+      .finally(() => {
+        setIsSubmiting(false);
+        setTempTodo(null);
+      });
+  };
+
+  const handleDelete = (todoId: number) => {
+    setDeletingTodoIds(current => [...current, todoId]);
+    setErrorMessage(ErrorMessages.empty);
+
+    deleteTodo(todoId)
+      .then(() => {
+        setTodos(current => current.filter(todo => todo.id !== todoId));
+      })
+      .catch(() => {
+        showError(ErrorMessages.deleteError);
+      })
+      .finally(() => {
+        setDeletingTodoIds(current => current.filter(id => id !== todoId));
+        inputRef.current?.focus();
+      });
+  };
+
+  const handleClearCompleted = () => {
+    const completedTodos = getCompletedTodos(todos);
+
+    if (completedTodos.length === 0) {
+      return;
+    }
+
+    const completedIds = completedTodos.map(todo => todo.id);
+
+    setErrorMessage(ErrorMessages.empty);
+    setDeletingTodoIds(current => [...current, ...completedIds]);
+
+    Promise.allSettled(completedTodos.map(todo => deleteTodo(todo.id)))
+      .then(results => {
+        const successfulIds = completedTodos
+          .filter((_, index) => results[index].status === 'fulfilled')
+          .map(todo => todo.id);
+
+        const hasError = results.some(result => result.status === 'rejected');
+
+        if (successfulIds.length > 0) {
+          setTodos(current =>
+            current.filter(todo => !successfulIds.includes(todo.id)),
+          );
+        }
+
+        if (hasError) {
+          showError(ErrorMessages.deleteError);
+        }
+      })
+      .finally(() => {
+        setDeletingTodoIds(current =>
+          current.filter(id => !completedIds.includes(id)),
+        );
+        inputRef.current?.focus();
+      });
+  };
+
+  const handleMakeChecked = (updatedTodo: Todo) => {
+    setCheckedTodoId(current => [...current, updatedTodo.id]);
+
+    const toggledTodo = {
+      ...updatedTodo,
+      completed: !updatedTodo.completed,
+    };
+
+    makeCompleted(toggledTodo)
+      .then(() => {
+        setTodos(currentTodo => {
+          return currentTodo.map(todo =>
+            todo.id === toggledTodo.id ? toggledTodo : todo,
+          );
+        });
+      })
+      .catch(() => {
+        showError(ErrorMessages.updateError);
+      })
+      .finally(() => {
+        setCheckedTodoId(current =>
+          current.filter(id => id !== updatedTodo.id),
+        );
+      });
+  };
+
+  const handleStartEditing = (todo: Todo) => {
+    setEditingTodoId(todo.id);
+    setEditedTitle(todo.title);
+    setErrorMessage(ErrorMessages.empty);
+  };
+
+  const handleCancelEditing = () => {
+    setEditingTodoId(null);
+    setEditedTitle('');
+  };
+
+  const handleSubmitEditing = (todo: Todo) => {
+    if (editingTodoId !== todo.id) {
+      return;
+    }
+
+    if (checkedTodoId.includes(todo.id) || deletingTodoIds.includes(todo.id)) {
+      return;
+    }
+
+    const trimmedTitle = editedTitle.trim();
+
+    if (trimmedTitle === todo.title) {
+      handleCancelEditing();
+
+      return;
+    }
+
+    if (!trimmedTitle) {
+      setDeletingTodoIds(current => [...current, todo.id]);
+      setErrorMessage(ErrorMessages.empty);
+
+      deleteTodo(todo.id)
+        .then(() => {
+          setTodos(current =>
+            current.filter(currentTodo => currentTodo.id !== todo.id),
+          );
+          handleCancelEditing();
+        })
+        .catch(() => {
+          showError(ErrorMessages.deleteError);
+        })
+        .finally(() => {
+          setDeletingTodoIds(current => current.filter(id => id !== todo.id));
+        });
+
+      return;
+    }
+
+    setCheckedTodoId(current => [...current, todo.id]);
+    setErrorMessage(ErrorMessages.empty);
+
+    updateTodo({ ...todo, title: trimmedTitle })
+      .then(updatedTodo => {
+        setTodos(current =>
+          current.map(currentTodo =>
+            currentTodo.id === todo.id ? updatedTodo : currentTodo,
+          ),
+        );
+        handleCancelEditing();
+      })
+      .catch(() => {
+        showError(ErrorMessages.updateError);
+      })
+      .finally(() => {
+        setCheckedTodoId(current => current.filter(id => id !== todo.id));
+      });
+  };
+
+  const switchCompleteAll = () => {
+    const todosToToggle = getTodosToToggle(todos, checkCompleteAll);
+
+    const toggledTodoIds = todosToToggle.map(todo => todo.id);
+
+    setCheckedTodoId(current => [...current, ...toggledTodoIds]);
+
+    Promise.allSettled(
+      todosToToggle.map(todo =>
+        makeCompleted({
+          ...todo,
+          completed: !checkCompleteAll,
+        }),
+      ),
+    )
+      .then(results => {
+        const successfulIds = todosToToggle
+          .filter((_, index) => results[index].status === 'fulfilled')
+          .map(todo => todo.id);
+
+        const hasError = results.some(result => result.status === 'rejected');
+
+        if (successfulIds.length > 0) {
+          setTodos(current =>
+            current.map(todo =>
+              successfulIds.includes(todo.id)
+                ? { ...todo, completed: !checkCompleteAll }
+                : todo,
+            ),
+          );
+        }
+
+        if (hasError) {
+          showError(ErrorMessages.updateError);
+        }
+      })
+      .finally(() => {
+        setCheckedTodoId(current =>
+          current.filter(id => !toggledTodoIds.includes(id)),
+        );
+      });
+  };
+
+  const filteredTodos = getFilteredTodos(todos, filter);
+
+  useLayoutEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    setErrorMessage(ErrorMessages.empty);
+    getTodos()
+      .then(data => setTodos(data))
+      .catch(() => showError(ErrorMessages.loadError));
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!isSubmiting) {
+      inputRef.current?.focus();
+    }
+  }, [isSubmiting]);
+
   if (!USER_ID) {
     return <UserWarning />;
   }
 
   return (
-    <section className="section container">
-      <p className="title is-4">
-        Copy all you need from the prev task:
-        <br />
-        <a href="https://github.com/mate-academy/react_todo-app-add-and-delete#react-todo-app-add-and-delete">
-          React Todo App - Add and Delete
-        </a>
-      </p>
-
-      <p className="subtitle">Styles are already copied</p>
-    </section>
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
+
+      <div className="todoapp__content">
+        <header className="todoapp__header">
+          {todos.length > 0 && (
+            <button
+              type="button"
+              className={
+                checkCompleteAll
+                  ? 'todoapp__toggle-all active'
+                  : 'todoapp__toggle-all'
+              }
+              data-cy="ToggleAllButton"
+              onClick={switchCompleteAll}
+            />
+          )}
+
+          <form onSubmit={handleSubmit}>
+            <input
+              autoFocus
+              ref={inputRef}
+              data-cy="NewTodoField"
+              type="text"
+              className="todoapp__new-todo"
+              placeholder="What needs to be done?"
+              value={title}
+              onChange={event => setTitle(event.target.value)}
+              disabled={isSubmiting}
+            />
+          </form>
+        </header>
+
+        <TodoList
+          filteredTodos={filteredTodos}
+          handleDelete={handleDelete}
+          deletingTodoIds={deletingTodoIds}
+          checkedTodoId={checkedTodoId}
+          tempTodo={tempTodo}
+          handleMakeChecked={handleMakeChecked}
+          editingTodoId={editingTodoId}
+          editedTitle={editedTitle}
+          handleStartEditing={handleStartEditing}
+          handleEditedTitleChange={setEditedTitle}
+          handleCancelEditing={handleCancelEditing}
+          handleSubmitEditing={handleSubmitEditing}
+        />
+
+        {todos.length > 0 && (
+          <Footer
+            todos={todos}
+            filter={filter}
+            setFilter={setFilter}
+            checkComplete={checkComplete}
+            handleClearCompleted={handleClearCompleted}
+          />
+        )}
+      </div>
+
+      <ErrorNotifications
+        errorMessage={errorMessage}
+        setErrorMessage={setErrorMessage}
+      />
+    </div>
   );
 };
diff --git a/src/api/todos.ts b/src/api/todos.ts
new file mode 100644
index 0000000000..fdce288884
--- /dev/null
+++ b/src/api/todos.ts
@@ -0,0 +1,33 @@
+import { Todo } from '../types/Types';
+import { client } from '../utils/fetchClient';
+
+export const USER_ID = 3207;
+
+export const getTodos = () => {
+  return client.get<Todo[]>(`/todos?userId=${USER_ID}`);
+};
+
+export const createTodo = ({ title, userId, completed }: Omit<Todo, 'id'>) => {
+  return client.post<Todo>('/todos', {
+    title,
+    userId,
+    completed,
+  });
+};
+
+export const deleteTodo = (todoId: number) => {
+  return client.delete(`/todos/${todoId}`);
+};
+
+export const makeCompleted = ({ id, completed }: Todo) => {
+  return client.patch<Todo>(`/todos/${id}`, {
+    completed,
+  });
+};
+
+export const updateTodo = ({ id, title }: Todo) => {
+  return client.patch<Todo>(`/todos/${id}`, {
+    title,
+  });
+};
+// Add more methods here
diff --git a/src/components/ErrorNotifications.tsx b/src/components/ErrorNotifications.tsx
new file mode 100644
index 0000000000..ba28211b57
--- /dev/null
+++ b/src/components/ErrorNotifications.tsx
@@ -0,0 +1,23 @@
+import { ErrorMessages, ErrorNotificationsProps } from '../types/Types';
+
+export const ErrorNotifications: React.FC<ErrorNotificationsProps> = ({
+  errorMessage,
+  setErrorMessage,
+}) => {
+  return (
+    <div
+      data-cy="ErrorNotification"
+      className={`notification is-danger is-light has-text-weight-normal ${
+        errorMessage ? '' : 'hidden'
+      }`}
+    >
+      <button
+        data-cy="HideErrorButton"
+        type="button"
+        className="delete"
+        onClick={() => setErrorMessage(ErrorMessages.empty)}
+      />
+      {errorMessage}
+    </div>
+  );
+};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000000..541cbc697c
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,63 @@
+import { getActiveTodosCount } from '../utils/functions';
+import { FilterPatterns, FooterProps } from '../types/Types';
+
+export const Footer: React.FC<FooterProps> = ({
+  todos,
+  filter,
+  setFilter,
+  checkComplete,
+  handleClearCompleted,
+}) => {
+  return (
+    <footer className="todoapp__footer" data-cy="Footer">
+      <span className="todo-count" data-cy="TodosCounter">
+        {`${getActiveTodosCount(todos)} items left`}
+      </span>
+
+      <nav className="filter" data-cy="Filter">
+        <a
+          href="#/"
+          className={
+            filter === 'all' ? 'filter__link selected' : 'filter__link'
+          }
+          data-cy="FilterLinkAll"
+          onClick={() => setFilter(FilterPatterns.all)}
+        >
+          All
+        </a>
+
+        <a
+          href="#/active"
+          className={
+            filter === 'active' ? 'filter__link selected' : 'filter__link'
+          }
+          data-cy="FilterLinkActive"
+          onClick={() => setFilter(FilterPatterns.active)}
+        >
+          Active
+        </a>
+
+        <a
+          href="#/completed"
+          className={
+            filter === 'completed' ? 'filter__link selected' : 'filter__link'
+          }
+          data-cy="FilterLinkCompleted"
+          onClick={() => setFilter(FilterPatterns.completed)}
+        >
+          Completed
+        </a>
+      </nav>
+
+      <button
+        type="button"
+        className="todoapp__clear-completed"
+        data-cy="ClearCompletedButton"
+        disabled={!checkComplete}
+        onClick={handleClearCompleted}
+      >
+        Clear completed
+      </button>
+    </footer>
+  );
+};
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
new file mode 100644
index 0000000000..3f93dcb0cd
--- /dev/null
+++ b/src/components/TodoList.tsx
@@ -0,0 +1,140 @@
+import React, { useEffect, useRef } from 'react';
+import { Todo, TodoListProps } from '../types/Types';
+
+export const TodoList: React.FC<TodoListProps> = ({
+  filteredTodos,
+  deletingTodoIds,
+  checkedTodoId,
+  tempTodo,
+  editingTodoId,
+  editedTitle,
+  handleDelete,
+  handleMakeChecked,
+  handleStartEditing,
+  handleEditedTitleChange,
+  handleCancelEditing,
+  handleSubmitEditing,
+}) => {
+  const editInputRef = useRef<HTMLInputElement>(null);
+
+  const cancelEdit = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      handleCancelEditing();
+    }
+  };
+
+  const submitEdit = (event: React.FormEvent<HTMLFormElement>, todo: Todo) => {
+    event.preventDefault();
+    handleSubmitEditing(todo);
+  };
+
+  useEffect(() => {
+    if (editingTodoId !== null) {
+      editInputRef.current?.focus();
+      editInputRef.current?.select();
+    }
+  }, [editingTodoId]);
+
+  return (
+    <section className="todoapp__main" data-cy="TodoList">
+      {filteredTodos.map(todo => (
+        <div
+          data-cy="Todo"
+          className={
+            todo.completed
+              ? `todo completed ${editingTodoId === todo.id ? 'editing' : ''}`
+              : `todo ${editingTodoId === todo.id ? 'editing' : ''}`
+          }
+          key={todo.id}
+        >
+          <label className="todo__status-label">
+            <input
+              data-cy="TodoStatus"
+              type="checkbox"
+              className="todo__status"
+              checked={todo.completed}
+              aria-label={`Mark "${todo.title}" as completed`}
+              onChange={() => handleMakeChecked(todo)}
+            />
+          </label>
+
+          {editingTodoId === todo.id ? (
+            <form onSubmit={event => submitEdit(event, todo)}>
+              <input
+                ref={editInputRef}
+                data-cy="TodoTitleField"
+                type="text"
+                className="todo__title-field"
+                placeholder="Empty todo will be deleted"
+                value={editedTitle}
+                onChange={event => handleEditedTitleChange(event.target.value)}
+                onBlur={() => handleSubmitEditing(todo)}
+                onKeyUp={cancelEdit}
+              />
+            </form>
+          ) : (
+            <>
+              <span
+                data-cy="TodoTitle"
+                className="todo__title"
+                onDoubleClick={() => handleStartEditing(todo)}
+              >
+                {todo.title}
+              </span>
+              <button
+                type="button"
+                className="todo__remove"
+                data-cy="TodoDelete"
+                onClick={() => handleDelete(todo.id)}
+              >
+                ×
+              </button>
+            </>
+          )}
+
+          <div
+            data-cy="TodoLoader"
+            className={
+              deletingTodoIds.includes(todo.id) ||
+              checkedTodoId.includes(todo.id)
+                ? 'modal overlay is-active'
+                : 'modal overlay'
+            }
+          >
+            <div className="modal-background has-background-white-ter" />
+            <div className="loader" />
+          </div>
+        </div>
+      ))}
+
+      {tempTodo && (
+        <div
+          data-cy="Todo"
+          className={tempTodo.completed ? 'todo completed' : 'todo'}
+        >
+          <label className="todo__status-label">
+            <input
+              data-cy="TodoStatus"
+              type="checkbox"
+              className="todo__status"
+              aria-label={`Mark "${tempTodo.title}" as completed`}
+              readOnly
+            />
+          </label>
+
+          <span data-cy="TodoTitle" className="todo__title">
+            {tempTodo.title}
+          </span>
+          <button type="button" className="todo__remove" data-cy="TodoDelete">
+            ×
+          </button>
+
+          <div data-cy="TodoLoader" className="modal overlay is-active">
+            <div className="modal-background has-background-white-ter" />
+            <div className="loader" />
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};
diff --git a/src/types/Types.ts b/src/types/Types.ts
new file mode 100644
index 0000000000..5fc514b09c
--- /dev/null
+++ b/src/types/Types.ts
@@ -0,0 +1,53 @@
+import type { Dispatch, SetStateAction } from 'react';
+
+export interface Todo {
+  id: number;
+  userId: number;
+  title: string;
+  completed: boolean;
+}
+
+export type FilterStatus = 'all' | 'active' | 'completed';
+
+export enum ErrorMessages {
+  empty = '',
+  notBeEmpty = 'Title should not be empty',
+  addError = 'Unable to add a todo',
+  deleteError = 'Unable to delete a todo',
+  loadError = 'Unable to load todos',
+  updateError = `Unable to update a todo`,
+}
+
+export enum FilterPatterns {
+  all = 'all',
+  active = 'active',
+  completed = 'completed',
+}
+
+export type TodoListProps = {
+  filteredTodos: Todo[];
+  deletingTodoIds: number[];
+  checkedTodoId: number[];
+  tempTodo: Todo | null;
+  editingTodoId: number | null;
+  editedTitle: string;
+  handleDelete: (TodoId: number) => void;
+  handleMakeChecked: (updatedTodo: Todo) => void;
+  handleStartEditing: (todo: Todo) => void;
+  handleEditedTitleChange: (value: string) => void;
+  handleCancelEditing: () => void;
+  handleSubmitEditing: (todo: Todo) => void;
+};
+
+export type FooterProps = {
+  todos: Todo[];
+  filter: FilterStatus;
+  setFilter: (filter: FilterStatus) => void;
+  checkComplete: boolean;
+  handleClearCompleted: () => void;
+};
+
+export type ErrorNotificationsProps = {
+  errorMessage: ErrorMessages;
+  setErrorMessage: Dispatch<SetStateAction<ErrorMessages>>;
+};
diff --git a/src/utils/fetchClient.ts b/src/utils/fetchClient.ts
new file mode 100644
index 0000000000..86f3ff6776
--- /dev/null
+++ b/src/utils/fetchClient.ts
@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const BASE_URL = 'https://mate.academy/students-api';
+
+// returns a promise resolved after a given delay
+function wait(delay: number) {
+  return new Promise(resolve => {
+    setTimeout(resolve, delay);
+  });
+}
+
+// To have autocompletion and avoid mistypes
+type RequestMethod = 'GET' | 'POST' | 'PATCH' | 'DELETE';
+
+function request<T>(
+  url: string,
+  method: RequestMethod = 'GET',
+  data: any = null, // we can send any data to the server
+): Promise<T> {
+  const options: RequestInit = { method };
+
+  if (data) {
+    // We add body and Content-Type only for the requests with data
+    options.body = JSON.stringify(data);
+    options.headers = {
+      'Content-Type': 'application/json; charset=UTF-8',
+    };
+  }
+
+  // DON'T change the delay it is required for tests
+  return wait(100)
+    .then(() => fetch(BASE_URL + url, options))
+    .then(response => {
+      if (!response.ok) {
+        throw new Error();
+      }
+
+      if (response.status === 204) {
+        return null as T;
+      }
+
+      return response.text().then(text => {
+        return text ? (JSON.parse(text) as T) : (null as T);
+      });
+    });
+}
+
+export const client = {
+  get: <T>(url: string) => request<T>(url),
+  post: <T>(url: string, data: any) => request<T>(url, 'POST', data),
+  patch: <T>(url: string, data: any) => request<T>(url, 'PATCH', data),
+  delete: (url: string) => request(url, 'DELETE'),
+};
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
new file mode 100644
index 0000000000..11b22dbd50
--- /dev/null
+++ b/src/utils/functions.ts
@@ -0,0 +1,34 @@
+import { FilterStatus, Todo } from '../types/Types';
+
+export const getIsAllTodosCompleted = (todos: Todo[]) => {
+  return todos.length > 0 && todos.every(todo => todo.completed);
+};
+
+export const getHasCompletedTodos = (todos: Todo[]) => {
+  return todos.some(todo => todo.completed);
+};
+
+export const getCompletedTodos = (todos: Todo[]) => {
+  return todos.filter(todo => todo.completed);
+};
+
+export const getActiveTodosCount = (todos: Todo[]) => {
+  return todos.filter(todo => !todo.completed).length;
+};
+
+export const getFilteredTodos = (todos: Todo[], filter: FilterStatus) => {
+  switch (filter) {
+    case 'active':
+      return todos.filter(todo => !todo.completed);
+
+    case 'completed':
+      return todos.filter(todo => todo.completed);
+
+    default:
+      return todos;
+  }
+};
+
+export const getTodosToToggle = (todos: Todo[], isAllCompleted: boolean) => {
+  return isAllCompleted ? todos : todos.filter(todo => !todo.completed);
+};