add task solution

README.md

@@ -53,4 +53,4 @@ Implement a simple [TODO app](http://todomvc.com/examples/vanillajs/) working as
 - 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).
 - Open one more 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://MariaSnegireva.github.io/react_todo-app/) and add it to the PR description.

src/App.tsx

@@ -1,93 +1,12 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
+import { TodoProvider } from './contexts/TodosContext';
+import { TodoApp } from './components/TodoApp';
 
 export const App: React.FC = () => {
   return (
-    <div className="todoapp">
-      <header className="header">
-        <h1>todos</h1>
-
-        <form>
-          <input
-            type="text"
-            data-cy="createTodo"
-            className="new-todo"
-            placeholder="What needs to be done?"
-          />
-        </form>
-      </header>
-
-      <section className="main">
-        <input
-          type="checkbox"
-          id="toggle-all"
-          className="toggle-all"
-          data-cy="toggleAll"
-        />
-        <label htmlFor="toggle-all">Mark all as complete</label>
-
-        <ul className="todo-list" data-cy="todoList">
-          <li>
-            <div className="view">
-              <input type="checkbox" className="toggle" id="toggle-view" />
-              <label htmlFor="toggle-view">asdfghj</label>
-              <button type="button" className="destroy" data-cy="deleteTodo" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
-
-          <li className="completed">
-            <div className="view">
-              <input type="checkbox" className="toggle" id="toggle-completed" />
-              <label htmlFor="toggle-completed">qwertyuio</label>
-              <button type="button" className="destroy" data-cy="deleteTodo" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
-
-          <li className="editing">
-            <div className="view">
-              <input type="checkbox" className="toggle" id="toggle-editing" />
-              <label htmlFor="toggle-editing">zxcvbnm</label>
-              <button type="button" className="destroy" data-cy="deleteTodo" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
-
-          <li>
-            <div className="view">
-              <input type="checkbox" className="toggle" id="toggle-view2" />
-              <label htmlFor="toggle-view2">1234567890</label>
-              <button type="button" className="destroy" data-cy="deleteTodo" />
-            </div>
-            <input type="text" className="edit" />
-          </li>
-        </ul>
-      </section>
-
-      <footer className="footer">
-        <span className="todo-count" data-cy="todosCounter">
-          3 items left
-        </span>
-
-        <ul className="filters">
-          <li>
-            <a href="#/" className="selected">All</a>
-          </li>
-
-          <li>
-            <a href="#/active">Active</a>
-          </li>
-
-          <li>
-            <a href="#/completed">Completed</a>
-          </li>
-        </ul>
-
-        <button type="button" className="clear-completed">
-          Clear completed
-        </button>
-      </footer>
-    </div>
+    <TodoProvider>
+      <TodoApp />
+    </TodoProvider>
   );
 };

src/components/ClearComplitedButton.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+
+export const ClearCompletedButton: React.FC = () => {
+  const { todos, setTodos } = useContext(TodosContext);
+
+  const handleClear = () => {
+    const modifiedTodos = todos.filter(todo => !todo.completed);
+
+    setTodos(modifiedTodos);
+  };
+
+  return (
+    <button
+      type="button"
+      className="clear-completed"
+      onClick={handleClear}
+    >
+      Clear completed
+    </button>
+  );
+};

src/components/Footer.tsx

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { TodoCount } from './TodoCount';
+import { ClearCompletedButton } from './ClearComplitedButton';
+import { TodosContext } from '../contexts/TodosContext';
+import { TodosFilter } from './TodosFilter';
+
+export const Footer: React.FC = () => {
+  const { todos } = useContext(TodosContext);
+  const isAreCompleted = todos.filter(todo => todo.completed).length > 0;
+
+  return (
+    <footer className="footer">
+      <TodoCount />
+      <TodosFilter />
+      {isAreCompleted && <ClearCompletedButton />}
+    </footer>
+  );
+};

src/components/Header.tsx

@@ -0,0 +1,45 @@
+import React, { useContext, useState } from 'react';
+import { Todo } from '../types/Todo';
+import { TodosContext } from '../contexts/TodosContext';
+
+export const Header: React.FC = () => {
+  const [title, setTitle] = useState('');
+  const { todos, setTodos } = useContext(TodosContext);
+
+  const handleSabmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (title.trim()) {
+      const newTodo: Todo = {
+        id: +(new Date()),
+        title,
+        completed: false,
+      };
+
+      setTitle('');
+
+      setTodos([...todos, newTodo]);
+    }
+  };
+
+  const handleSetTitle = (event:React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(event.target.value);
+  };
+
+  return (
+    <header className="header">
+      <h1>todos</h1>
+
+      <form onSubmit={handleSabmit}>
+        <input
+          type="text"
+          data-cy="createTodo"
+          value={title}
+          className="new-todo"
+          placeholder="What needs to be done?"
+          onChange={handleSetTitle}
+        />
+      </form>
+    </header>
+  );
+};

src/components/Main.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { TodoList } from './TodoList';
+import { TodosContext } from '../contexts/TodosContext';
+
+export const Main: React.FC = () => {
+  const { todos, setTodos } = useContext(TodosContext);
+
+  const isChecked = todos.every(todo => todo.completed);
+
+  const handleToggleAll = () => {
+    const isAllCompleted = todos.every(todo => todo.completed);
+    const modifiedTodos = todos.map(todo => ({
+      ...todo,
+      completed: !isAllCompleted,
+    }));
+
+    setTodos(modifiedTodos);
+  };
+
+  return (
+    <section className="main">
+      <input
+        type="checkbox"
+        id="toggle-all"
+        className="toggle-all"
+        data-cy="toggleAll"
+        onClick={handleToggleAll}
+        checked={isChecked}
+      />
+      <label htmlFor="toggle-all">Mark all as complete</label>
+
+      <TodoList />
+    </section>
+  );
+};

src/components/TodoApp.tsx

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+import { Header } from './Header';
+import { Main } from './Main';
+import { Footer } from './Footer';
+
+export const TodoApp: React.FC = () => {
+  const { todos } = useContext(TodosContext);
+
+  const isContentDisplayed = todos.length > 0;
+
+  return (
+    <div className="todoapp">
+      <Header />
+      {isContentDisplayed && (
+        <>
+          <Main />
+          <Footer />
+        </>
+      )}
+    </div>
+  );
+};

src/components/TodoCount.tsx

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+import { TodosContext } from '../contexts/TodosContext';
+
+export const TodoCount: React.FC = () => {
+  const { todos } = useContext(TodosContext);
+  const todosLeft = todos.filter(todo => !todo.completed).length;
+
+  return (
+    <span className="todo-count" data-cy="todosCounter">
+      {`${todosLeft} ${todosLeft === 1 ? 'item' : 'items'} left`}
+    </span>
+  );
+};

src/components/TodoItem.tsx

@@ -0,0 +1,128 @@
+import React, { useContext, useState, useRef } from 'react';
+import { Todo } from '../types/Todo';
+import { TodoStatus } from '../types/TodoStatus';
+import { TodosContext } from '../contexts/TodosContext';
+
+type Props = {
+  todo: Todo;
+};
+
+export const TodoItem: React.FC<Props> = ({ todo }) => {
+  const { todos, setTodos } = useContext(TodosContext);
+  const [newTitle, setNewTitle] = useState(todo.title);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const { id, title, completed } = todo;
+
+  const editInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDelete = (todoId: number) => {
+    const filteredTodo = todos.filter(currentTodo => currentTodo.id !== todoId);
+
+    setTodos(filteredTodo);
+  };
+
+  const handleToggle = () => {
+    const modifiedTodos = todos.map(currentTodo => {
+      return currentTodo.id === id
+        ? {
+          ...currentTodo,
+          completed: !currentTodo.completed,
+        }
+        : currentTodo;
+    });
+
+    setTodos(modifiedTodos);
+  };
+
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+
+    setTimeout(() => {
+      editInputRef.current?.focus();
+    }, 1);
+  };
+
+  const saveChanges = (titleToSet: string) => {
+    if (!titleToSet) {
+      handleDelete(todo.id);
+    } else {
+      const modifiedTodos = todos.map(currentTodo => {
+        if (currentTodo.id === todo.id) {
+          return {
+            ...currentTodo,
+            title: titleToSet,
+          };
+        }
+
+        return currentTodo;
+      });
+
+      setTodos(modifiedTodos);
+    }
+
+    setIsEditing(false);
+  };
+
+  const discardChanges = () => {
+    setNewTitle(todo.title);
+    setIsEditing(false);
+  };
+
+  const handleBlur = () => {
+    saveChanges(newTitle);
+  };
+
+  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleBlur();
+    }
+
+    if (event.key === 'Escape') {
+      discardChanges();
+      handleBlur();
+    }
+  };
+
+  let todoClassName = TodoStatus.View;
+
+  if (isEditing) {
+    todoClassName = TodoStatus.Editing;
+  } else if (completed) {
+    todoClassName = TodoStatus.Completed;
+  }
+
+  return (
+    <li className={todoClassName}>
+      <div className="view">
+        <input
+          type="checkbox"
+          className="toggle"
+          onChange={handleToggle}
+          checked={todo.completed}
+        />
+        <label
+          onDoubleClick={handleDoubleClick}
+        >
+          {title}
+        </label>
+        <button
+          type="button"
+          aria-label="delete"
+          className="destroy"
+          data-cy="deleteTodo"
+          onClick={() => handleDelete(id)}
+        />
+      </div>
+      <input
+        type="text"
+        className="edit"
+        value={newTitle}
+        onBlur={handleBlur}
+        onKeyUp={handleKeyUp}
+        onChange={event => setNewTitle(event.target.value)}
+        ref={editInputRef}
+      />
+    </li>
+  );
+};