done

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,289 @@
-/* eslint-disable max-len */
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { UserWarning } from './UserWarning';
+import {
+  addTodo,
+  deleteTodo,
+  getTodos,
+  updateTodo,
+  USER_ID,
+} from './api/todos';
+import { Todo } from './types/Todo';
+import classNames from 'classnames';
+import { TodoList } from './components/TodoList';
+import { TodoItem } from './components/TodoItem';
+import { ErrorNotification } from './components/ErrorNotification';
+import { useError } from './hooks/useError';
 
-const USER_ID = 0;
+type Status = 'all' | 'active' | 'completed';
 
 export const App: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [tempTodo, setTempTodo] = useState<Todo | null>(null);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [updatingId, setUpdatingId] = useState<number | null>(null);
+  const [editingId, setEditingId] = useState<number | null>(null);
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [status, setStatus] = useState<Status>('all');
+  const [isAdding, setIsAdding] = useState(false);
+
+  const [title, setTitle] = useState('');
+
+  const { error, setError } = useError();
+
+  const activeTodos = todos.filter(todo => !todo.completed);
+  const hasCompleted = todos.some(todo => todo.completed);
+  const allCompleted = todos.every(todo => todo.completed);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const completedTodos: Todo[] = todos.filter(todo => todo.completed);
+
+  const filteredTodos = todos.filter(todo => {
+    if (status === 'active') {
+      return !todo.completed;
+    }
+
+    if (status === 'completed') {
+      return todo.completed;
+    }
+
+    return true;
+  });
+
+  function handleDelete(id: number) {
+    setDeletingId(id);
+
+    deleteTodo(id)
+      .then(() => {
+        setTodos(prev => prev.filter(todo => todo.id !== id));
+        inputRef.current?.focus();
+      })
+      .catch(() => {
+        setError('delete');
+      })
+      .finally(() => {
+        setDeletingId(null);
+      });
+  }
+
+  function handleClearCompleted() {
+    completedTodos.forEach(todo => {
+      handleDelete(todo.id);
+    });
+  }
+
+  function handleUpdate(id: number, newTitle?: string, completed?: boolean) {
+    setUpdatingId(id);
+
+    const updatedData: Partial<Todo> = {};
+
+    if (newTitle !== undefined) {
+      updatedData.title = newTitle.trim();
+    }
+
+    if (completed !== undefined) {
+      updatedData.completed = completed;
+    }
+
+    updateTodo(id, updatedData)
+      .then(() => {
+        setTodos(prev =>
+          prev.map(item =>
+            item.id === id ? { ...item, ...updatedData } : item,
+          ),
+        );
+        setEditingId(null);
+        inputRef.current?.focus();
+      })
+      .catch(() => {
+        setError('update');
+      })
+      .finally(() => {
+        setUpdatingId(null);
+      });
+  }
+
+  function handleToggleAll() {
+    const newCompleted = !allCompleted;
+
+    todos.forEach(todo => {
+      if (todo.completed !== newCompleted) {
+        handleUpdate(todo.id, undefined, newCompleted);
+      }
+    });
+  }
+
+  useEffect(() => {
+    setIsLoading(true);
+
+    getTodos()
+      .then((data: React.SetStateAction<Todo[]>) => {
+        setTodos(data);
+      })
+      .catch(() => {
+        setError('load');
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [setError]);
+
+  useEffect(() => {
+    if (!isAdding && !error) {
+      inputRef.current?.focus();
+    }
+  }, [isAdding, error]);
+
   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">
+          {!isLoading && todos.length > 0 && (
+            <button
+              type="button"
+              className={classNames('todoapp__toggle-all', {
+                active: allCompleted,
+              })}
+              onClick={handleToggleAll}
+              data-cy="ToggleAllButton"
+            />
+          )}
+
+          {/* Add a todo on form submit */}
+          <form
+            onSubmit={event => {
+              event.preventDefault();
+
+              if (!title.trim()) {
+                setError('title');
+
+                return;
+              }
+
+              const trimmedTitle = title.trim();
+
+              const newTodo = {
+                title: trimmedTitle,
+                completed: false,
+                userId: USER_ID,
+              };
+
+              const uiTodo = {
+                id: 0,
+                title: trimmedTitle,
+                completed: false,
+                userId: USER_ID,
+              };
+
+              setTempTodo(uiTodo);
+
+              setIsAdding(true);
+
+              addTodo(newTodo)
+                .then((todoFromServer: Todo) => {
+                  setTodos(prev => [...prev, todoFromServer]);
+                  setTitle('');
+                  setTempTodo(null);
+                  setDeletingId(null);
+                })
+                .catch(() => {
+                  setError('add');
+                  setTempTodo(null);
+                })
+                .finally(() => {
+                  setIsAdding(false);
+                });
+            }}
+          >
+            <input
+              ref={inputRef}
+              data-cy="NewTodoField"
+              type="text"
+              className="todoapp__new-todo"
+              placeholder="What needs to be done?"
+              disabled={isAdding}
+              value={title}
+              onChange={event => {
+                setTitle(event.target.value);
+              }}
+            />
+          </form>
+        </header>
+        {!isLoading && (
+          <TodoList
+            todos={filteredTodos}
+            handleDelete={handleDelete}
+            deletingId={deletingId}
+            handleUpdate={handleUpdate}
+            updatingId={updatingId}
+            editingId={editingId}
+            setEditingId={setEditingId}
+          />
+        )}
+        {tempTodo && <TodoItem todo={tempTodo} isLoading={true} />}
+
+        {todos.length > 0 && (
+          <footer className="todoapp__footer" data-cy="Footer">
+            <span className="todo-count" data-cy="TodosCounter">
+              {activeTodos.length} items left
+            </span>
+
+            <nav className="filter" data-cy="Filter">
+              <a
+                href="#/"
+                className={classNames('filter__link', {
+                  selected: status === 'all',
+                })}
+                data-cy="FilterLinkAll"
+                onClick={() => setStatus('all')}
+              >
+                All
+              </a>
+
+              <a
+                href="#/active"
+                className={classNames('filter__link', {
+                  selected: status === 'active',
+                })}
+                data-cy="FilterLinkActive"
+                onClick={() => setStatus('active')}
+              >
+                Active
+              </a>
+
+              <a
+                href="#/completed"
+                className={classNames('filter__link', {
+                  selected: status === 'completed',
+                })}
+                data-cy="FilterLinkCompleted"
+                onClick={() => setStatus('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={handleClearCompleted}
+            >
+              Clear completed
+            </button>
+          </footer>
+        )}
+      </div>
+
+      <ErrorNotification error={error} onClose={() => setError('')} />
+    </div>
   );
-};
+};

src/api/todos.ts

@@ -0,0 +1,22 @@
+import { Todo } from '../types/Todo';
+import { client } from '../utils/fetchClient';
+
+export const USER_ID = 4093;
+
+export const getTodos = () => {
+  return client.get<Todo[]>(`/todos?userId=${USER_ID}`);
+};
+
+export const addTodo = (todo: Omit<Todo, 'id'>) => {
+  return client.post<Todo>('/todos', todo);
+};
+
+export const deleteTodo = (id: number) => {
+  return client.delete(`/todos/${id}`);
+};
+
+export const updateTodo = (id: number, data: Partial<Todo>) => {
+  return client.patch(`/todos/${id}`, data);
+};
+
+// Add more methods here

src/components/ErrorNotification.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import { ErrorType } from '../types/Error';
+import React from 'react';
+
+type Props = {
+  error: ErrorType;
+  onClose: () => void;
+};
+
+export const ErrorNotification: React.FC<Props> = ({ error, onClose }) => {
+  return (
+    <div
+      data-cy="ErrorNotification"
+      className={classNames(
+        'notification',
+        'is-danger',
+        'is-light',
+        'has-text-weight-normal',
+        {
+          hidden: !error,
+        },
+      )}
+    >
+      {error === 'load' && 'Unable to load todos'}
+      {error === 'title' && 'Title should not be empty'}
+      {error === 'add' && 'Unable to add a todo'}
+      {error === 'delete' && 'Unable to delete a todo'}
+      {error === 'update' && 'Unable to update a todo'}
+      <button
+        data-cy="HideErrorButton"
+        type="button"
+        className="delete"
+        onClick={() => {
+          onClose();
+        }}
+      />
+    </div>
+  );
+};