add task solution

README.md

@@ -33,4 +33,4 @@ Implement a simple [TODO app](https://mate-academy.github.io/react_todo-app/) th
 - Implement a solution following the [React task guidelines](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).
 - Open another terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your GitHub username in the [DEMO LINK](https://<your_account>.github.io/react_todo-app/) and add it to the PR description.
+- Replace `<your_account>` with your GitHub username in the [DEMO LINK](https://timurradkevic.github.io/react_todo-app/) and add it to the PR description.

src/app/App.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React from 'react';
+import { TodoFooter, TodoHeader, TodoList } from '../features/todos';
+import { TodosProvider } from '../features/todos/providers/TodosProvider';
+
+export const App: React.FC = () => {
+  return (
+    <div className="todoapp">
+      <TodosProvider>
+        <h1 className="todoapp__title">todos</h1>
+
+        <div className="todoapp__content">
+          <TodoHeader />
+
+          <TodoList />
+
+          <TodoFooter />
+        </div>
+      </TodosProvider>
+    </div>
+  );
+};

src/features/todos/components/TodoFooter/TodoFooter.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+
+import classNames from 'classnames';
+import { QueryTodos } from '../../constants/queryTodos';
+import { useTodos } from '../../providers/TodosProvider';
+
+export const TodoFooter = () => {
+  const {
+    query,
+    todos,
+    uncompletedTodosLength,
+    setQuery,
+    setTodos,
+    focusHeaderInput,
+  } = useTodos();
+
+  if (!todos.length) {
+    return null;
+  }
+
+  const handleClearCompletedTodos = () => {
+    setTodos(prev => prev.filter(todo => !todo.completed));
+  };
+
+  return (
+    <footer className="todoapp__footer" data-cy="Footer">
+      {/* hide footer if no todos */}
+      <span className="todo-count" data-cy="TodosCounter">
+        {uncompletedTodosLength} items left
+      </span>
+      {/* Active link should have the 'selected' class */}
+      <nav className="filter" data-cy="Filter">
+        <a
+          href="#"
+          className={classNames('filter__link', {
+            // eslint-disable-next-line prettier/prettier
+            selected: query === QueryTodos.All,
+          })}
+          data-cy="FilterLinkAll"
+          onClick={() => setQuery(QueryTodos.All)}
+        >
+          All
+        </a>
+
+        <a
+          href="#active"
+          className={classNames('filter__link', {
+            // eslint-disable-next-line prettier/prettier
+            selected: query === QueryTodos.Active,
+          })}
+          data-cy="FilterLinkActive"
+          onClick={() => setQuery(QueryTodos.Active)}
+        >
+          Active
+        </a>
+
+        <a
+          href="#completed"
+          className={classNames('filter__link', {
+            // eslint-disable-next-line prettier/prettier
+            selected: query === QueryTodos.Completed,
+          })}
+          data-cy="FilterLinkCompleted"
+          onClick={() => setQuery(QueryTodos.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={uncompletedTodosLength === todos.length}
+        onClick={() => {
+          handleClearCompletedTodos();
+          focusHeaderInput();
+        }}
+      >
+        Clear completed
+      </button>
+    </footer>
+  );
+};

src/features/todos/components/TodoFooter/index.ts

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

src/features/todos/components/TodoHeader/TodoHeader.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import { useTodos } from '../../providers/TodosProvider';
+import React, { useState } from 'react';
+
+export const TodoHeader = () => {
+  const { todos, completedAllTodos, setTodos, headerInputRef } = useTodos();
+  const [title, setTitle] = useState('');
+
+  const handleCompletedAllTodos = () => {
+    setTodos(prev =>
+      prev.map(todo => ({ ...todo, completed: !completedAllTodos })),
+    );
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!title.trim()) {
+      return;
+    }
+
+    setTodos(prev => [
+      ...prev,
+      { id: +new Date(), title: title.trim(), completed: false },
+    ]);
+    setTitle('');
+  };
+
+  return (
+    <header className="todoapp__header">
+      {/* this button should have `active` class only if all todos are completed */}
+      {todos.length !== 0 && (
+        <button
+          type="button"
+          className={classNames('todoapp__toggle-all', {
+            // eslint-disable-next-line prettier/prettier
+            active: completedAllTodos,
+          })}
+          data-cy="ToggleAllButton"
+          onClick={handleCompletedAllTodos}
+        />
+      )}
+
+      {/* Add a todo on form submit */}
+      <form onSubmit={handleSubmit}>
+        <input
+          data-cy="NewTodoField"
+          type="text"
+          className="todoapp__new-todo"
+          placeholder="What needs to be done?"
+          value={title}
+          onChange={event => setTitle(event.target.value)}
+          autoFocus
+          ref={headerInputRef}
+        />
+      </form>
+    </header>
+  );
+};

src/features/todos/components/TodoHeader/index.ts

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