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://andrmar1939.github.io/react_todo-app-with-api/) and add it to the PR description.

src/App.tsx

@@ -1,24 +1,21 @@
-/* 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 { TodosProvider } from './Context';
+import USER_ID from './helpers/USER_ID';
+
+// components
+import { UserWarning } from './Pages/Auth/UserWarning';
+import { Application } from './Pages/Application/Application';
 
 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>
+    <TodosProvider>
+      <Application />
+    </TodosProvider>
   );
 };

src/Components/Footer/Footer.tsx

@@ -0,0 +1,97 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+
+import { FiltersType } from '../../types/filterTypes';
+import { TodosContext, ApiErrorContext, FormFocusContext } from '../../Context';
+import { deleteTodo } from '../../api/todos';
+import {
+  deleteTodoAction,
+  setIsSpinningAction,
+  removeIsSpinningAction,
+} from '../../Context/actions/actionCreators';
+
+import { getActiveTodos, getCompletedTodos } from '../../helpers/getTodos';
+
+export const Footer: React.FC = () => {
+  const { setIsFocused } = useContext(FormFocusContext);
+  const {
+    todos,
+    filter,
+    setFilter,
+    dispatch,
+  } = useContext(TodosContext);
+  const { setApiError } = useContext(ApiErrorContext);
+
+  const activeTodosNumber = getActiveTodos(todos).length;
+  const completedTodos = getCompletedTodos(todos);
+  const isClearCompletedInvisible = completedTodos.length === 0;
+
+  const handleClearCompletedClick = () => {
+    setIsFocused(false);
+
+    completedTodos.forEach(({ id }) => {
+      const isSpinningAction = setIsSpinningAction(id);
+
+      dispatch(isSpinningAction);
+      deleteTodo(id)
+        .then(() => {
+          const deleteAction = deleteTodoAction(id);
+
+          dispatch(deleteAction);
+        })
+        .catch((error) => {
+          const removeAction = removeIsSpinningAction(id);
+
+          dispatch(removeAction);
+          setApiError(error);
+        })
+        .finally(() => {
+          setIsFocused(true);
+        });
+    });
+  };
+
+  return (
+    <footer className="todoapp__footer" data-cy="Footer">
+      <span className="todo-count" data-cy="TodosCounter">
+        {`${activeTodosNumber} items left`}
+      </span>
+
+      <nav className="filter" data-cy="Filter">
+        {(Object.entries(FiltersType))
+          .map(([key, value]) => {
+            const url = value === FiltersType.ALL
+              ? ''
+              : value.toLowerCase();
+
+            return (
+              <a
+                data-cy={`FilterLink${value}`}
+                href={`#/${url}`}
+                key={key}
+                className={cn('filter__link', {
+                  selected: filter === value,
+                })}
+                onClick={() => setFilter(value)}
+              >
+                {value}
+              </a>
+            );
+          })}
+      </nav>
+
+      <button
+        data-cy="ClearCompletedButton"
+        type="button"
+        className={cn('todoapp__clear-completed', {
+          'is-invisible': isClearCompletedInvisible,
+        })}
+        onClick={handleClearCompletedClick}
+        disabled={isClearCompletedInvisible}
+      >
+        Clear completed
+      </button>
+
+    </footer>
+  );
+};

src/Components/Footer/index.ts

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

src/Components/Form/Form.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+type Props = {
+  placeholder: string,
+  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
+  value: string,
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void,
+  forCypress: string,
+  className: string,
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void,
+  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+
+type Ref = HTMLInputElement | null;
+
+export const Form = React.forwardRef<Ref, Props>(({
+  placeholder,
+  onInputChange,
+  value,
+  onSubmit,
+  forCypress,
+  className,
+  onBlur = () => {},
+  onKeyUp = () => {},
+}, ref) => (
+  <form onSubmit={onSubmit}>
+    <input
+      data-cy={forCypress}
+      type="text"
+      className={className}
+      placeholder={placeholder}
+      onChange={onInputChange}
+      ref={ref}
+      value={value}
+      onBlur={onBlur}
+      onKeyUp={onKeyUp}
+    />
+  </form>
+));

src/Components/Form/index.ts

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

src/Components/Header/Header.tsx

@@ -0,0 +1,141 @@
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import cn from 'classnames';
+
+import { TodosContext, ApiErrorContext, FormFocusContext } from '../../Context';
+import { Form } from '../Form';
+import USER_ID from '../../helpers/USER_ID';
+import { addTodo, patchTodo } from '../../api/todos';
+import {
+  postTodoAction,
+  removeIsSpinningAction,
+  patchTodoAction,
+  setIsSpinningAction,
+} from '../../Context/actions/actionCreators';
+import { emptyInputError } from '../../types/apiErrorsType';
+import { getActiveTodos } from '../../helpers/getTodos';
+
+// Component
+export const Header: React.FC = () => {
+  const { todos, setTempTodo, dispatch } = useContext(TodosContext);
+  const { isFocused } = useContext(FormFocusContext);
+  const { setApiError } = useContext(ApiErrorContext);
+  const ref = useRef<HTMLInputElement>(null);
+  const [inputValue, setInputValue] = useState('');
+
+  const isToggleVisible = todos.length > 0;
+  const isToggleActive = todos.every(todo => todo.completed);
+
+  useEffect(() => {
+    if (ref.current && isFocused) {
+      ref.current.focus();
+    }
+  }, [ref, isFocused]);
+
+  // handlers
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const preparedInputValue = inputValue.trim();
+
+    if (!preparedInputValue.length) {
+      setApiError(new Error(emptyInputError));
+
+      return;
+    }
+
+    const data = {
+      userId: USER_ID,
+      title: preparedInputValue,
+      completed: false,
+    };
+
+    setTempTodo({ ...data, id: 0 });
+
+    if (ref.current) {
+      ref.current.blur();
+      ref.current.disabled = true;
+    }
+
+    addTodo(data)
+      .then((newTodo) => {
+        const actionPost = postTodoAction(newTodo);
+
+        dispatch(actionPost);
+        setInputValue('');
+      })
+      .catch(error => setApiError(error))
+      .finally(() => {
+        setTempTodo(null);
+
+        if (ref.current && isFocused) {
+          ref.current.disabled = false;
+          ref.current.focus();
+        }
+      });
+  };
+
+  const handleAllToggle = () => {
+    const todosForToggle = isToggleActive
+      ? todos
+      : getActiveTodos(todos);
+
+    todosForToggle.forEach(({ id }) => {
+      const isSpinningAction = setIsSpinningAction(id);
+      const data = { completed: !isToggleActive };
+
+      dispatch(isSpinningAction);
+
+      patchTodo(id, data)
+        .then((patchedTodo) => {
+          const patchAction = patchTodoAction(patchedTodo);
+
+          dispatch(patchAction);
+        })
+        .catch((error) => {
+          setApiError(error);
+        })
+        .finally(() => {
+          const removeAction = removeIsSpinningAction(id);
+
+          dispatch(removeAction);
+        });
+    });
+  };
+
+  // render
+
+  return (
+    <header className="todoapp__header">
+      {/* eslint-disable jsx-a11y/control-has-associated-label */}
+      {isToggleVisible && (
+        <button
+          type="button"
+          className={cn('todoapp__toggle-all', {
+            active: isToggleActive,
+          })}
+          data-cy="ToggleAllButton"
+          onClick={handleAllToggle}
+        />
+      )}
+
+      <Form
+        forCypress="NewTodoField"
+        ref={ref}
+        placeholder="What needs to be done?"
+        className="todoapp__new-todo"
+        onInputChange={handleInputChange}
+        value={inputValue}
+        onSubmit={handleSubmit}
+      />
+    </header>
+  );
+};

src/Components/Header/index.ts

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