Solution

package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.tsx

@@ -1,26 +1,149 @@
 /* eslint-disable max-len */
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { UserWarning } from './UserWarning';
-
-const USER_ID = 0;
+import { deleteTodos, getTodos, patchTodos, USER_ID } from './api/todos';
+import { Todo } from './types/Todo';
+import { FilterMethods } from './types/FilterMethods';
+import { Header, HeaderRef } from './components/Header/Header';
+import { TodoList } from './components/TodoList/TodoList';
+import { Footer } from './components/Footer/Footer';
+import { ErrorNotification } from './components/ErrorNotification/ErrorNotification';
+import { UpdateTodoData } from './types/UpdateTodoData';
+import { ErrorMessage } from './types/ErrorMessage';
 
 export const App: React.FC = () => {
+  const [todosFromServer, setTodosFromServer] = useState<Todo[]>([]);
+  const [tempTodo, setTempTodo] = useState<Todo | null>(null);
+  const [errorMessage, setErrorMessage] = useState<ErrorMessage | null>(null);
+  const [filteringMethod, setFilteringMethod] = useState<FilterMethods>('All');
+  const [loadingIds, setLoadingIds] = useState<number[]>([]);
+  const isAllTodosCompleted = todosFromServer.every(
+    todo => todo.completed === true,
+  );
+  const headerRef = useRef<HeaderRef>(null);
+
+  const loadTodos = () => {
+    return getTodos()
+      .then(setTodosFromServer)
+      .catch(() => {
+        setErrorMessage(ErrorMessage.LoadError);
+        setTimeout(() => setErrorMessage(null), 3000);
+      });
+  };
+
+  useEffect(() => {
+    loadTodos();
+  }, []);
+
+  const visibleTodos = useMemo(() => {
+    switch (filteringMethod) {
+      case 'Active':
+        return todosFromServer.filter(todo => !todo.completed);
+      case 'Completed':
+        return todosFromServer.filter(todo => todo.completed);
+      case 'All':
+      default:
+        return todosFromServer;
+    }
+  }, [todosFromServer, filteringMethod]);
+
   if (!USER_ID) {
     return <UserWarning />;
   }
 
+  const deleteTodo = (currentId: number) => {
+    setLoadingIds(prev => [...prev, currentId]);
+
+    return deleteTodos(currentId)
+      .then(() => {
+        setTodosFromServer(prev => prev.filter(todo => todo.id !== currentId));
+        headerRef.current?.focusInput();
+      })
+      .catch(() => {
+        setErrorMessage(ErrorMessage.DeleteError);
+        setTimeout(() => setErrorMessage(null), 3000);
+      })
+      .finally(() => {
+        setLoadingIds(prev => prev.filter(id => id !== currentId));
+      });
+  };
+
+  const deleteCompleted = () => {
+    const completed = todosFromServer.filter(todo => todo.completed);
+
+    Promise.all(completed.map(todo => deleteTodo(todo.id))).then(() => {
+      headerRef.current?.focusInput();
+    });
+  };
+
+  const updateTodos = async (id: number, data: UpdateTodoData) => {
+    setLoadingIds(prev => [...prev, id]);
+
+    try {
+      await patchTodos(id, data);
+
+      setTodosFromServer(prev =>
+        prev.map(todo => (todo.id === id ? { ...todo, ...data } : todo)),
+      );
+    } catch (error) {
+      setErrorMessage(ErrorMessage.UpdateError);
+      setTimeout(() => setErrorMessage(null), 3000);
+
+      throw error;
+    } finally {
+      setLoadingIds(prev => prev.filter(filterId => filterId !== id));
+    }
+  };
+
+  const toggleAll = () => {
+    const filtredTodos = todosFromServer.filter(
+      todo => todo.completed === false,
+    );
+
+    if (filtredTodos.length >= 1) {
+      filtredTodos.map(todo =>
+        updateTodos(todo.id, { completed: !todo.completed }),
+      );
+    } else {
+      todosFromServer.map(todo =>
+        updateTodos(todo.id, { completed: !todo.completed }),
+      );
+    }
+  };
+
   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
+          setTodosFromServer={setTodosFromServer}
+          todosFromServer={todosFromServer}
+          setErrorMessage={setErrorMessage}
+          setTempTodo={setTempTodo}
+          toggleAll={toggleAll}
+          allCompleted={isAllTodosCompleted}
+          ref={headerRef}
+        />
+
+        <TodoList
+          tempTodo={tempTodo}
+          todos={visibleTodos}
+          onDelete={deleteTodo}
+          loadingTodoIds={loadingIds}
+          updateTodo={updateTodos}
+        />
+
+        {/* Hide the footer if there are no todos */}
+        <Footer
+          todos={todosFromServer}
+          filteringMethod={filteringMethod}
+          setFilteringMethod={setFilteringMethod}
+          deleteCompleted={deleteCompleted}
+        />
+      </div>
+      <ErrorNotification errorMessage={errorMessage} />
+    </div>
   );
 };

src/api/todos.ts

@@ -0,0 +1,23 @@
+import { Todo } from '../types/Todo';
+import { client } from '../utils/fetchClient';
+
+export const USER_ID = 3603;
+
+const TODOS_URL: string = `/todos`;
+
+export const getTodos = () => {
+  return client.get<Todo[]>(`${TODOS_URL}?userId=${USER_ID}`);
+};
+
+// Add more methods here
+export const postTodo = (data: Omit<Todo, 'id'>): Promise<Todo> => {
+  return client.post(TODOS_URL, data);
+};
+
+export const deleteTodos = (id: number) => {
+  return client.delete(`${TODOS_URL}/${id}`);
+};
+
+export const patchTodos = (id: number, data: {}) => {
+  return client.patch(`${TODOS_URL}/${id}`, data);
+};

src/components/ErrorNotification/ErrorNotification.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ErrorMessage } from '../../types/ErrorMessage';
+
+interface Props {
+  errorMessage: ErrorMessage | null;
+}
+
+export const ErrorNotification: React.FC<Props> = ({ errorMessage }) => {
+  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" />
+      {errorMessage}
+    </div>
+  );
+};

src/components/Footer/Footer.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Todo } from '../../types/Todo';
+import { FilterMethods } from '../../types/FilterMethods';
+
+interface Props {
+  todos: Todo[];
+  filteringMethod: FilterMethods;
+  setFilteringMethod: (f_method: FilterMethods) => void;
+  deleteCompleted: () => void;
+}
+
+export const Footer: React.FC<Props> = ({
+  todos,
+  filteringMethod,
+  setFilteringMethod,
+  deleteCompleted,
+}) => {
+  const hasCompleted = todos.some(todo => todo.completed);
+  /* Hide the footer if there are no todos */
+
+  return (
+    todos.length > 0 && (
+      <footer className="todoapp__footer" data-cy="Footer">
+        <span className="todo-count" data-cy="TodosCounter">
+          {todos.filter(todo => !todo.completed).length} items left
+        </span>
+
+        {/* Active link should have the 'selected' class */}
+        <nav className="filter" data-cy="Filter">
+          <a
+            href="#/"
+            className={`filter__link ${filteringMethod === 'All' ? 'selected' : ''}`}
+            data-cy="FilterLinkAll"
+            onClick={() => setFilteringMethod('All')}
+          >
+            All
+          </a>
+
+          <a
+            href="#/active"
+            className={`filter__link ${filteringMethod === 'Active' ? 'selected' : ''}`}
+            data-cy="FilterLinkActive"
+            onClick={() => setFilteringMethod('Active')}
+          >
+            Active
+          </a>
+
+          <a
+            href="#/completed"
+            className={`filter__link ${filteringMethod === 'Completed' ? 'selected' : ''}`}
+            data-cy="FilterLinkCompleted"
+            onClick={() => setFilteringMethod('Completed')}
+          >
+            Completed
+          </a>
+        </nav>
+
+        {/* this button should be disabled if there are no completed todos */}
+        <button
+          type="button"
+          className="todoapp__clear-completed"
+          data-cy="ClearCompletedButton"
+          disabled={!hasCompleted}
+          onClick={() => deleteCompleted()}
+        >
+          Clear completed
+        </button>
+      </footer>
+    )
+  );
+};