Develop

README.md

@@ -41,4 +41,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://Koliras.github.io/react_todo-app-with-api/) and add it to the PR description.

src/App.tsx

@@ -1,24 +1,25 @@
-/* eslint-disable max-len */
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
 import { UserWarning } from './UserWarning';
-
-const USER_ID = 0;
+import { TodoApp } from './components/TodoApp/TodoApp';
+import {
+  TodosContextProvider,
+} from './components/TodosContextProvider/TodosContextProvider';
+import { USER_ID } from './utils/UserId';
+import {
+  ErrorContextProvider,
+} from './components/ErrorContextProvider/ErrorContextProvider';
 
 export const App: React.FC = () => {
   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>
+    <TodosContextProvider>
+      <ErrorContextProvider>
+        <TodoApp />
+      </ErrorContextProvider>
+    </TodosContextProvider>
   );
 };

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 postTodo = (data: Omit<Todo, 'id'>) => {
+  return client.post<Todo>('/todos', data);
+};
+
+export const deleteTodo = (todoId: number) => {
+  return client.delete(`/todos/${todoId}`);
+};
+
+export const updateTodo = (todoId: number, changes: object) => {
+  return client.patch(`/todos/${todoId}`, changes);
+};

src/components/ErrorContextProvider/ErrorContextProvider.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+export const ErrorContext = React.createContext({
+  errorMessage: '',
+  setErrorMessage: () => {},
+  hasError: false,
+  setHasError: () => {},
+  onNewError: () => {},
+} as ErrorContextProps);
+
+type ErrorContextProps = {
+  errorMessage: string,
+  setErrorMessage: React.Dispatch<React.SetStateAction<string>>,
+  hasError: boolean,
+  setHasError: React.Dispatch<React.SetStateAction<boolean>>,
+  onNewError: (error: string) => void,
+};
+
+type Props = {
+  children: React.ReactNode,
+};
+
+export const ErrorContextProvider: React.FC<Props> = ({ children }) => {
+  const [errorMessage, setErrorMessage] = useState('');
+  const [hasError, setHasError] = useState(false);
+
+  const onNewError = (error: string) => {
+    setErrorMessage(error);
+    setHasError(true);
+
+    setTimeout(() => {
+      setHasError(false);
+    }, 3000);
+  };
+
+  const initialValue = {
+    errorMessage,
+    setErrorMessage,
+    hasError,
+    setHasError,
+    onNewError,
+  };
+
+  return (
+    <ErrorContext.Provider value={initialValue}>
+      {children}
+    </ErrorContext.Provider>
+  );
+};

src/components/Filter/Filter.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FilterKey } from '../../types/FilterKey';
+
+type Props = {
+  filterKey: FilterKey,
+  onClick: (key: FilterKey) => void
+};
+
+export const Filter: React.FC<Props> = ({ filterKey, onClick }) => {
+  return (
+    <nav className="filter" data-cy="Filter">
+      <a
+        data-cy="FilterLinkAll"
+        href="#/"
+        className={classNames('filter__link', {
+          selected: filterKey === FilterKey.All,
+        })}
+        onClick={() => onClick(FilterKey.All)}
+      >
+        All
+      </a>
+
+      <a
+        data-cy="FilterLinkActive"
+        href="#/active"
+        className={classNames('filter__link', {
+          selected: filterKey === FilterKey.Active,
+        })}
+        onClick={() => onClick(FilterKey.Active)}
+      >
+        Active
+      </a>
+
+      <a
+        data-cy="FilterLinkCompleted"
+        href="#/completed"
+        className={classNames('filter__link', {
+          selected: filterKey === FilterKey.Completed,
+        })}
+        onClick={() => onClick(FilterKey.Completed)}
+      >
+        Completed
+      </a>
+    </nav>
+  );
+};

src/components/NewTodo/NewTodo.tsx

@@ -0,0 +1,75 @@
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Todo } from '../../types/Todo';
+import { postTodo } from '../../api/todos';
+import { TodosContext } from '../TodosContextProvider/TodosContextProvider';
+import { USER_ID } from '../../utils/UserId';
+import { ErrorContext } from '../ErrorContextProvider/ErrorContextProvider';
+
+type Props = {
+  setTempTodo: (todo: Todo | null) => void,
+  tempTodo: Todo | null,
+};
+
+export const NewTodo: React.FC<Props> = ({
+  setTempTodo, tempTodo,
+}) => {
+  const { onNewError } = useContext(ErrorContext);
+  const { setTodos, todos } = useContext(TodosContext);
+  const [newTodoTitle, setNewTodoTitle] = useState('');
+  const titleInput = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (titleInput.current) {
+      titleInput.current.focus();
+    }
+  }, [todos, tempTodo]);
+
+  const handleAddingTodo = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!newTodoTitle.trim()) {
+      onNewError('Title should not be empty');
+
+      return;
+    }
+
+    const newTodo: Omit<Todo, 'id'> = {
+      userId: USER_ID,
+      title: newTodoTitle.trim(),
+      completed: false,
+    };
+
+    postTodo(newTodo)
+      .then((response) => {
+        setNewTodoTitle('');
+        setTodos((prevTodos) => [...prevTodos, response]);
+      })
+      .catch(() => onNewError('Unable to add a todo'))
+      .finally(() => setTempTodo(null));
+
+    setTempTodo({
+      ...newTodo,
+      id: 0,
+    });
+  };
+
+  return (
+    <form onSubmit={handleAddingTodo}>
+      <input
+        data-cy="NewTodoField"
+        ref={titleInput}
+        type="text"
+        className="todoapp__new-todo"
+        placeholder="What needs to be done?"
+        value={newTodoTitle}
+        onChange={(event) => setNewTodoTitle(event.target.value)}
+        disabled={!!tempTodo}
+      />
+    </form>
+  );
+};

src/components/TodoApp/TodoApp.tsx

@@ -0,0 +1,156 @@
+import {
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import classNames from 'classnames';
+import { Filter } from '../Filter/Filter';
+import { NewTodo } from '../NewTodo/NewTodo';
+import { TodoList } from '../TodoList/TodoList';
+import {
+  TodosContext,
+} from '../TodosContextProvider/TodosContextProvider';
+import { TodoError } from '../TodoError/TodoError';
+import { deleteTodo, getTodos, updateTodo } from '../../api/todos';
+import { FilterKey } from '../../types/FilterKey';
+import { Todo } from '../../types/Todo';
+import { USER_ID } from '../../utils/UserId';
+import { ErrorContext } from '../ErrorContextProvider/ErrorContextProvider';
+
+function getFilteredTodos(key: FilterKey, todos: Todo[]) {
+  switch (key) {
+    case FilterKey.All:
+      return todos;
+    case FilterKey.Active:
+      return todos.filter(({ completed }) => !completed);
+    case FilterKey.Completed:
+      return todos.filter(({ completed }) => completed);
+    default:
+      return todos;
+  }
+}
+
+export const TodoApp = () => {
+  const { onNewError } = useContext(ErrorContext);
+  const { todos, setTodos, setTodoIdsWithLoader } = useContext(TodosContext);
+  const [filterKey, setFilterKey] = useState<FilterKey>(FilterKey.All);
+  const [tempTodo, setTempTodo] = useState<Todo | null>(null);
+
+  const areAllTodosCompleted = todos.every(({ completed }) => completed);
+  const visibleTodos = useMemo(
+    () => getFilteredTodos(filterKey, todos),
+    [todos, filterKey],
+  );
+  const activeTodos = todos.filter(({ completed }) => !completed);
+  const hasCompletedTodo = todos.some(({ completed }) => completed);
+
+  useEffect(() => {
+    getTodos(USER_ID)
+      .then(setTodos)
+      .catch(() => onNewError('Unable to load todos'));
+  }, []);
+
+  const handleAllTodosToggle = () => {
+    const todosToUpdate = todos.filter(
+      ({ completed }) => completed === areAllTodosCompleted,
+    );
+
+    setTodoIdsWithLoader(
+      prevTodoIds => [...prevTodoIds, ...todosToUpdate.map(({ id }) => id)],
+    );
+
+    todosToUpdate.forEach(todo => {
+      updateTodo(todo.id, { completed: !todo.completed })
+        .then(() => {
+          const todosCopy = [...todos];
+          const searchedTodo = todos.find(
+            ({ id }) => todo.id === id,
+          ) as Todo;
+
+          searchedTodo.completed = !searchedTodo.completed;
+
+          setTodos(todosCopy);
+        })
+        .catch(() => onNewError('Unable to update a todo'))
+        .finally(() => setTodoIdsWithLoader(
+          prevTodoIds => prevTodoIds.filter((todoId) => todoId !== todo.id),
+        ));
+    });
+  };
+
+  const handleCompletedTodosDelete = () => {
+    const completedTodos = todos.filter(({ completed }) => completed);
+
+    setTodoIdsWithLoader(prevTodoIds => {
+      return [...prevTodoIds, ...completedTodos.map(({ id }) => id)];
+    });
+
+    completedTodos.forEach(todo => {
+      deleteTodo(todo.id)
+        .then(() => {
+          setTodos(prevTodos => prevTodos.filter(({ id }) => id !== todo.id));
+        })
+        .catch(() => onNewError('Unable to delete a todo'))
+        .finally(() => setTodoIdsWithLoader(
+          prevTodoIds => prevTodoIds.filter((id) => todo.id !== id),
+        ));
+    });
+  };
+
+  return (
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
+      <div className="todoapp__content">
+        <header className="todoapp__header">
+          {!!todos.length && (
+            <button
+              type="button"
+              data-cy="ToggleAllButton"
+              className={classNames('todoapp__toggle-all', {
+                active: areAllTodosCompleted,
+              })}
+              aria-label="toggle_all_todos"
+              onClick={handleAllTodosToggle}
+            />
+          )}
+
+          <NewTodo
+            setTempTodo={setTempTodo}
+            tempTodo={tempTodo}
+          />
+        </header>
+
+        <TodoList
+          todos={visibleTodos}
+          tempTodo={tempTodo}
+        />
+
+        {!!todos.length && (
+          <footer className="todoapp__footer" data-cy="Footer">
+            <span className="todo-count" data-cy="TodosCounter">
+              {`${activeTodos.length} items left`}
+            </span>
+            <Filter
+              filterKey={filterKey}
+              onClick={setFilterKey}
+            />
+            <button
+              type="button"
+              data-cy="ClearCompletedButton"
+              className={classNames('todoapp__clear-completed', {
+                'is-invisible': !hasCompletedTodo,
+              })}
+              onClick={handleCompletedTodosDelete}
+              disabled={!hasCompletedTodo}
+            >
+              Clear completed
+            </button>
+          </footer>
+        )}
+
+        <TodoError />
+      </div>
+    </div>
+  );
+};