create todo app

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

src/App.tsx

@@ -1,93 +1,18 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import { TodosFilter } from './Components/Footer/TodosFilter';
+import { Header } from './Components/Header/Header';
+import { Main } from './Components/Main/Main';
+import { TodosProvider } from './Context/TodosContext';
 
 export const App: React.FC = () => {
   return (
     <div className="todoapp">
-      <header className="header">
-        <h1>todos</h1>
+      <TodosProvider>
+        <Header />
 
-        <form>
-          <input
-            type="text"
-            data-cy="createTodo"
-            className="new-todo"
-            placeholder="What needs to be done?"
-          />
-        </form>
-      </header>
+        <Main />
 
-      <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>
+        <TodosFilter />
+      </TodosProvider>
     </div>
   );
 };

src/Components/Footer/TodosFilter.tsx

@@ -0,0 +1,75 @@
+import cn from 'classnames';
+import React, { useContext } from 'react';
+import { TodosContext } from '../../Context/TodosContext';
+import { Status } from '../../Types/Status';
+import Todos from '../../Types/Todos';
+
+export const TodosFilter: React.FC = () => {
+  const {
+    todos,
+    handleStatus,
+    handleDeleteCompleted,
+    status,
+  } = useContext(TodosContext);
+
+  const activeLength = todos.filter((todo: Todos) => !todo.completed);
+
+  const clearButton = activeLength.length > 0;
+
+  return (
+    <footer className="footer">
+      <span className="todo-count" data-cy="todosCounter">
+        {`${activeLength.length} items left`}
+      </span>
+
+      <ul className="filters">
+        <li>
+          <a
+            href={Status.all}
+            className={cn({
+              selected: status === Status.all,
+            })}
+            onClick={() => handleStatus(Status.all)}
+          >
+            All
+          </a>
+        </li>
+
+        <li>
+          <a
+            href={Status.active}
+            className={cn({
+              selected: status === Status.active,
+            })}
+            onClick={() => handleStatus(Status.active)}
+          >
+            Active
+          </a>
+        </li>
+
+        <li>
+          <a
+            href={Status.completed}
+            className={cn({
+              selected: status === Status.completed,
+            })}
+            onClick={() => handleStatus(Status.completed)}
+          >
+            Completed
+          </a>
+        </li>
+      </ul>
+
+      {clearButton && (
+        <button
+          type="button"
+          className="clear-completed"
+          onClick={handleDeleteCompleted}
+        >
+          Clear completed
+        </button>
+      )}
+
+    </footer>
+  );
+};

src/Components/Header/Header.tsx

@@ -0,0 +1,11 @@
+import { HeaderForm } from './HeaderForm/HeaderForm';
+
+export const Header: React.FC = () => {
+  return (
+    <header className="header">
+      <h1>todos</h1>
+
+      <HeaderForm />
+    </header>
+  );
+};

src/Components/Header/HeaderForm/HeaderForm.tsx

@@ -0,0 +1,35 @@
+import React, { useContext, useState } from 'react';
+import { TodosContext } from '../../../Context/TodosContext';
+
+export const HeaderForm : React.FC = () => {
+  const [message, setMessage] = useState('');
+
+  const { handleTodo } = useContext(TodosContext);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setMessage(event.target.value);
+  };
+
+  const handleKeyDown = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (message.trim()) {
+      handleTodo(message);
+
+      setMessage('');
+    }
+  };
+
+  return (
+    <form onSubmit={handleKeyDown}>
+      <input
+        type="text"
+        data-cy="createTodo"
+        className="new-todo"
+        value={message}
+        placeholder="What needs to be done?"
+        onChange={handleChange}
+      />
+    </form>
+  );
+};

src/Components/Main/Main.tsx

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { TodosContext } from '../../Context/TodosContext';
+import { TodoList } from './TodoList/TodoList';
+
+export const Main: React.FC = () => {
+  const {
+    handleAllCompleted,
+  } = useContext(TodosContext);
+
+  return (
+    <section className="main">
+      <input
+        type="checkbox"
+        id="toggle-all"
+        className="toggle-all"
+        data-cy="toggleAll"
+        onClick={handleAllCompleted}
+      />
+      <label htmlFor="toggle-all">Mark all as complete</label>
+
+      <TodoList />
+    </section>
+  );
+};

src/Components/Main/TodoItem/TodoItem.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import cn from 'classnames';
+import React, {
+  useContext, useEffect, useRef, useState,
+} from 'react';
+import { TodosContext } from '../../../Context/TodosContext';
+import Todos from '../../../Types/Todos';
+
+type Props = {
+  todo: Todos
+};
+
+export const TodoItem: React.FC<Props> = ({ todo }) => {
+  const {
+    handleCompleted,
+    handleUpdateTodo,
+    handleDeleteTodo,
+  } = useContext(TodosContext);
+
+  const [isEdit, setIsEdit] = useState(false);
+  const [editingText, setEditingText] = useState(todo.title);
+
+  const inputFocus = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputFocus.current) {
+      inputFocus.current.focus();
+    }
+  }, [isEdit]);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && editingText) {
+      setIsEdit(false);
+      handleUpdateTodo(todo.id, editingText);
+    }
+
+    if (event.key === 'Enter' && !editingText) {
+      setIsEdit(false);
+      handleDeleteTodo(todo.id);
+    }
+  };
+
+  const handleBlur = () => {
+    if (editingText) {
+      setIsEdit(false);
+      handleUpdateTodo(todo.id, editingText);
+    }
+
+    if (!editingText) {
+      setIsEdit(false);
+      handleDeleteTodo(todo.id);
+    }
+  };
+
+  const handleOnKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      setIsEdit(false);
+      setEditingText(todo.title);
+      handleUpdateTodo(todo.id, todo.title);
+    }
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEditingText(event.target.value);
+  };
+
+  const handleLable = () => {
+    setIsEdit(true);
+  };
+
+  return (
+    <li
+      className={cn({
+        completed: todo.completed,
+        editing: isEdit,
+      })}
+      key={todo.id}
+    >
+      <div>
+        <input
+          type="checkbox"
+          checked={todo.completed}
+          className="toggle"
+          id={`${todo.id}`}
+          onChange={() => handleCompleted(todo.id)}
+        />
+
+        {isEdit
+          ? (
+            <input
+              type="text"
+              className="edit"
+              name="editingField"
+              ref={inputFocus}
+              value={editingText}
+              onChange={handleInputChange}
+              onKeyDown={handleKeyDown}
+              onKeyUp={handleOnKeyUp}
+              tabIndex={0}
+              onBlur={handleBlur}
+            />
+          )
+          : (
+            <label
+              onDoubleClick={handleLable}
+            >
+              {todo.title}
+            </label>
+          )}
+
+        <button
+          type="button"
+          className="destroy"
+          data-cy="deleteTodo"
+          onClick={() => handleDeleteTodo(todo.id)}
+        />
+      </div>
+    </li>
+  );
+};