implement update logic, failed from 2 to 5 tests, every time different. Work in progress

src/App.tsx

@@ -1,24 +1,62 @@
-/* eslint-disable max-len */
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
+
 import { UserWarning } from './UserWarning';
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
+import { ErrorNotification } from './components/ErrorNotification';
 
-const USER_ID = 0;
+import { getTodos } from './api/todos';
+import { USER_ID } from './utils/variables';
+import { TodoList } from './components/TodoList';
+import { ErrorMessage, TodosContext } from './components/TodosContext';
 
 export const App: React.FC = () => {
+  const {
+    todos,
+    setTodos,
+    setFilteredTodos,
+    setAlarm,
+  } = useContext(TodosContext);
+
+  useEffect(() => {
+    if (USER_ID) {
+      getTodos(USER_ID)
+        .then(todosFromServer => {
+          setTodos(todosFromServer);
+          setFilteredTodos(todosFromServer);
+          setAlarm(ErrorMessage.Default);
+        })
+        .catch(errorMessage => {
+          // eslint-disable-next-line no-console
+          console.log(errorMessage);
+          setAlarm(ErrorMessage.isLoadTodoError);
+          setTodos([]);
+        });
+    }
+  }, [USER_ID]);
+
   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 />
+
+        {!!todos.length && (
+          <>
+            <TodoList />
+
+            <Footer />
+          </>
+        )}
+      </div>
+
+      <ErrorNotification />
+    </div>
   );
 };

src/api/todos.ts

@@ -0,0 +1,18 @@
+import { Todo } from '../types/Todo';
+import { client } from '../utils/fetchClient';
+
+export const getTodos = (userId: number) => {
+  return client.get<Todo[]>(`/todos?userId=${userId}`);
+};
+
+export const createTodo = ({ title, userId, completed }: Omit<Todo, 'id'>) => {
+  return client.post<Todo>('/todos', { title, userId, completed });
+};
+
+export const removeTodo = (postId: number) => {
+  return client.delete(`/todos/${postId}`);
+};
+
+export const updateTodo = (todo: Todo) => {
+  return client.patch(`/todos/${todo.id}`, todo);
+};

src/components/ErrorNotification/ErrorNotification.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { useContext, useEffect, useRef } from 'react';
+import cn from 'classnames';
+import { ErrorMessage, TodosContext } from '../TodosContext';
+
+type Props = {};
+
+export const ErrorNotification: React.FC<Props> = () => {
+  const {
+    alarm,
+    setAlarm,
+  } = useContext(TodosContext);
+
+  const timerId = useRef<number>(0);
+
+  useEffect(() => {
+    if (timerId.current) {
+      window.clearTimeout(timerId.current);
+    }
+
+    timerId.current = window.setTimeout(() => {
+      setAlarm(ErrorMessage.Default);
+    }, 3000);
+  }, [alarm]);
+
+  return (
+    <div
+      data-cy="ErrorNotification"
+      className={cn(
+        'notification',
+        'is-light',
+        'is-danger',
+        'has-text-weight-normal',
+        { hidden: !alarm },
+      )}
+    >
+      <button
+        data-cy="HideErrorButton"
+        type="button"
+        className="delete"
+        onClick={() => setAlarm(ErrorMessage.Default)}
+      />
+      {alarm}
+    </div>
+  );
+};

src/components/ErrorNotification/index.tsx

@@ -0,0 +1 @@
+export * from './ErrorNotification';

src/components/Footer/Footer.tsx

@@ -0,0 +1,110 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { useContext, useEffect, useState } from 'react';
+import cn from 'classnames';
+import { Todo } from '../../types/Todo';
+import { TodosContext } from '../TodosContext';
+
+enum FilterOption {
+  Default = '',
+  All = 'All',
+  Active = 'Active',
+  Completed = 'Completed',
+}
+
+type Props = {};
+
+function filterTodos(option: FilterOption, todos: Todo[]) {
+  const filteredTodos = todos.filter(todo => {
+    switch (option) {
+      case FilterOption.Active: {
+        return todo.completed === false;
+      }
+
+      case FilterOption.Completed: {
+        return todo.completed === true;
+      }
+
+      default: {
+        return todo;
+      }
+    }
+  });
+
+  return filteredTodos;
+}
+
+const OPTIONS = [FilterOption.All, FilterOption.Completed, FilterOption.Active];
+
+export const Footer: React.FC<Props> = () => {
+  const {
+    todos,
+    setFilteredTodos,
+    handleRemoveTodo,
+    isTodoChange,
+    changingItems,
+  } = useContext(TodosContext);
+  const [selectedOption, setSelectedOption] = useState(FilterOption.Default);
+  const [hasCompleted, setHasCompleted] = useState(false);
+
+  useEffect(() => {
+    setSelectedOption(FilterOption.All);
+  }, []);
+
+  useEffect(() => {
+    setFilteredTodos(filterTodos(selectedOption, todos));
+    setHasCompleted(todos.some(todo => todo.completed));
+  }, [selectedOption, isTodoChange, changingItems]);
+
+  const handleFilterTodos = (option: FilterOption) => {
+    setFilteredTodos(filterTodos(option, todos));
+    setSelectedOption(option);
+  };
+
+  const removeAllCompletedTodos = () => {
+    const completedTodos = filterTodos(FilterOption.Completed, todos);
+
+    completedTodos.forEach(todo => handleRemoveTodo(todo));
+    setHasCompleted(false);
+  };
+
+  const counterTodos = todos.filter(todo => !todo.completed).length;
+
+  return (
+    <footer className="todoapp__footer" data-cy="Footer">
+      <span className="todo-count" data-cy="TodosCounter">
+        {`${counterTodos} items left`}
+      </span>
+
+      <nav className="filter" data-cy="Filter">
+        {OPTIONS.map(option => {
+          const isSelected = selectedOption === option;
+
+          return (
+            <a
+              key={option}
+              href={`#/${option.toLowerCase()}`}
+              data-cy={`FilterLink${option}`}
+              className={cn(
+                'filter__link',
+                { selected: isSelected },
+              )}
+              onClick={() => handleFilterTodos(option)}
+            >
+              {option}
+            </a>
+          );
+        })}
+      </nav>
+
+      <button
+        data-cy="ClearCompletedButton"
+        type="button"
+        className="todoapp__clear-completed"
+        disabled={!hasCompleted}
+        onClick={removeAllCompletedTodos}
+      >
+        Clear completed
+      </button>
+    </footer>
+  );
+};

src/components/Footer/index.tsx

@@ -0,0 +1 @@
+export * from './Footer';