add task solution

src/components/App/App.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { useEffect } from 'react';
+import { Header } from '../Header/Header';
+import { TodoList } from '../TodoList/TodoList';
+import { Footer } from '../Footer/Footer';
+import { useTodoContext } from '../../context/TodoContext'
+import { getTodos } from '../../storage/localStorage';
+
+
+export const App: React.FC = () => {
+  const { todos, setTodos } = useTodoContext();
+
+  useEffect(() => {
+    setTodos(getTodos());
+  }, [setTodos]);
+
+  return (
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
+
+      <div className="todoapp__content">
+        <Header />
+        {todos.length > 0 && (
+          <>
+          <TodoList />
+          <Footer />
+          </>
+        )}
+
+      </div>
+    </div>
+  );
+};

src/components/Footer/Footer.tsx

@@ -0,0 +1,60 @@
+import { useTodoContext } from '../../context/TodoContext';
+import { FilterType } from '../../types/FilterTypes';
+import { FilterTypes } from '../../types/FilterTypes';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+  const { todos, setTodos, filter, setFilter } = useTodoContext();
+
+  const activeTodosCount = todos.filter(todo => !todo.completed).length;
+
+  const handleFilterChange = (newFilter: FilterType) => {
+    setFilter(newFilter);
+  };
+
+  const clearCompleted = () => {
+    const todosCompleted = todos.filter(todo => !todo.completed);
+
+    setTodos(todosCompleted);
+    localStorage.setItem('todos', JSON.stringify(todosCompleted));
+
+    const inputField = document.querySelector(".todoapp__new-todo") as HTMLInputElement;
+    inputField!.focus();
+  };
+
+  return (
+    <footer className="todoapp__footer" data-cy="Footer">
+      <span className="todo-count" data-cy="TodosCounter">
+        {activeTodosCount} items left
+      </span>
+
+      {/* Active link should have the 'selected' class */}
+      <nav className="filter" data-cy="Filter">
+        {Object.values(FilterTypes).map(filterType => (
+          <a
+          key={filterType}
+          href={`#/${filterType}`}
+          className={classNames("filter__link", { selected: filter === filterType })}
+          data-cy={`FilterLink${filterType.charAt(0).toUpperCase() + filterType.slice(1)}`}
+          onClick={() => handleFilterChange(filterType)}
+          >
+            {filterType.charAt(0).toUpperCase() + filterType.slice(1)}
+          </a>
+        ))}
+      </nav>
+
+      {/* this button should be disabled if there are no completed todos */}
+      {todos.length > 0 && (
+        <button
+        type="button"
+        className="todoapp__clear-completed"
+        data-cy="ClearCompletedButton"
+        disabled={!todos.some(todo => todo.completed)}
+        onClick={clearCompleted}
+      >
+        Clear completed
+      </button>
+      )}
+    </footer>
+  )
+}

src/components/Header/Header.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useTodoContext } from '../../context/TodoContext';
+import { Todo } from '../../types/Todo';
+import classNames from 'classnames';
+
+
+export const Header: React.FC = () => {
+  const { todos, setTodos, title, setTitle } = useTodoContext();
+
+  const addTodo = (text: string) => {
+    const newTodo: Todo = { id: Date.now(), title: text, completed: false};
+
+    setTodos([...todos, newTodo]);
+    localStorage.setItem('todos', JSON.stringify([...todos, newTodo]));
+  }
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!title.trim()) {
+      return;
+    }
+
+    addTodo(title.trim());
+    setTitle('');
+  };
+
+  const toogleAllTodos = () => {
+    const allCompleted = todos.every(todo => todo.completed);
+
+    const updatedTodos = todos.map(todo => ({
+      ...todo,
+      completed: !allCompleted,
+    }));
+
+    setTodos(updatedTodos);
+    localStorage.setItem('todos', JSON.stringify(updatedTodos));
+  }
+
+  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', {
+          active: todos.every(todo => todo.completed),
+          })}
+        data-cy="ToggleAllButton"
+        onClick={toogleAllTodos}
+      />
+      )}
+      {/* 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={(e) => setTitle(e.target.value)}
+            autoFocus
+          />
+        </form>
+    </header>
+  )
+}