completed task react_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://denischakhalian.github.io/react_todo-app/) and add it to the PR description.

src/App.tsx

@@ -1,93 +1,10 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import { TodoApp } from './components/TodoApp/TodoApp';
+import { TodosContextProvider } from './context/TodosContext';
 
 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>
+    <TodosContextProvider>
+      <TodoApp />
+    </TodosContextProvider>
   );
 };

src/components/TodoApp/TodoApp.tsx

@@ -0,0 +1,115 @@
+import React, { useContext, useMemo, useState } from 'react';
+import { DispatchTodosContext, TodosContext } from '../../context/TodosContext';
+import { TodoList } from '../TodoList/TodoList';
+import { TodosFilter } from '../TodosFilter/TodosFilter';
+import { StatusEnum } from '../../interfaces/StatusEnum';
+
+export const TodoApp: React.FC = () => {
+  const dispatch = useContext(DispatchTodosContext);
+  const todos = useContext(TodosContext);
+
+  const [todoTitle, setTodoTitle] = useState('');
+
+  const [filter, setFilter] = useState<StatusEnum>(
+    window.location.hash.slice(2) as StatusEnum || StatusEnum.All,
+  );
+
+  const handleChangeFilter = (newFilter: StatusEnum) => {
+    setFilter(newFilter);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (todoTitle.trim()) {
+      dispatch({
+        type: 'add',
+        todo: { id: +new Date(), completed: false, title: todoTitle },
+      });
+    }
+
+    setTodoTitle('');
+  };
+
+  const handleSetTodoTitle = (event:React.ChangeEvent<HTMLInputElement>) => {
+    setTodoTitle(event.target.value);
+  };
+
+  const isCompletedAll = useMemo(() => {
+    return todos.every(todo => todo.completed);
+  }, [todos]);
+
+  const handleChangeCompletedStatus = () => {
+    dispatch({ type: 'change completed status for all', isCompletedAll });
+  };
+
+  const handleClearCompleted = () => {
+    dispatch({ type: 'delete completed' });
+  };
+
+  const notCompletedTodosLength = useMemo(() => {
+    return todos.filter(todo => !todo.completed).length;
+  }, [todos]);
+
+  const hasCompletedTodo = useMemo(() => {
+    return todos.some(todo => todo.completed);
+  }, [todos]);
+
+  return (
+    <div className="todoapp">
+      <header className="header">
+        <h1>todos</h1>
+
+        <form onSubmit={handleSubmit}>
+          <input
+            type="text"
+            value={todoTitle}
+            data-cy="createTodo"
+            className="new-todo"
+            placeholder="What needs to be done?"
+            onChange={handleSetTodoTitle}
+          />
+        </form>
+      </header>
+
+      {!!todos.length && (
+        <>
+          <section className="main">
+            <input
+              type="checkbox"
+              id="toggle-all"
+              className="toggle-all"
+              data-cy="toggleAll"
+              checked={isCompletedAll}
+              onChange={handleChangeCompletedStatus}
+            />
+
+            <label htmlFor="toggle-all">Mark all as complete</label>
+
+            <TodoList filter={filter} />
+
+          </section>
+
+          <footer className="footer">
+            <span className="todo-count" data-cy="todosCounter">
+              {`${notCompletedTodosLength} items left`}
+            </span>
+
+            <TodosFilter filter={filter} onChangeFilter={handleChangeFilter} />
+
+            { hasCompletedTodo && (
+              <button
+                type="button"
+                className="clear-completed"
+                onClick={handleClearCompleted}
+              >
+                Clear completed
+              </button>
+            )}
+
+          </footer>
+        </>
+      )}
+    </div>
+  );
+};

src/components/TodoItem/TodoItem.tsx

@@ -0,0 +1,114 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import {
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+} from 'react';
+import classnames from 'classnames';
+import { Todo } from '../../interfaces/Todo';
+import { DispatchTodosContext } from '../../context/TodosContext';
+
+type Props = {
+  todo: Todo;
+};
+
+export const TodoItem:React.FC<Props> = ({ todo }) => {
+  const { completed, title, id } = todo;
+  const dispatch = useContext(DispatchTodosContext);
+
+  const editInput = useRef<HTMLInputElement>(null);
+
+  const [editingTitle, setEditingTitle] = useState(title);
+  const [isEdit, setIsEdit] = useState(false);
+
+  useEffect(() => {
+    if (editInput.current) {
+      editInput.current.focus();
+    }
+  }, [isEdit]);
+
+  const handleChangeCompletedStatus = () => {
+    dispatch({ type: 'change completed status', todoId: id });
+  };
+
+  const handleDelete = () => {
+    dispatch({ type: 'delete', todoId: id });
+  };
+
+  const handleEditing = () => {
+    setIsEdit(true);
+  };
+
+  const saveChange = () => {
+    if (!editingTitle.trim()) {
+      dispatch({ type: 'delete', todoId: id });
+    } else {
+      dispatch({ type: 'change title', todoId: id, newTitle: editingTitle });
+    }
+
+    setIsEdit(false);
+  };
+
+  const handleEditingKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      setIsEdit(false);
+      setEditingTitle(title);
+    }
+
+    if (event.key === 'Enter') {
+      saveChange();
+    }
+  };
+
+  const handleEditingBlur = () => {
+    if (isEdit) {
+      saveChange();
+    }
+  };
+
+  const handleEditingChange
+  = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    setEditingTitle(event.target.value);
+  };
+
+  return (
+    <li className={classnames({
+      completed,
+      editing: isEdit,
+    })}
+    >
+      <div className="view">
+        <input
+          type="checkbox"
+          className="toggle"
+          id={`toggle-view-${id}`}
+          onChange={handleChangeCompletedStatus}
+          checked={completed}
+        />
+
+        <label
+          onDoubleClick={handleEditing}
+        >
+          {title}
+        </label>
+
+        <button
+          type="button"
+          className="destroy"
+          data-cy="deleteTodo"
+          onClick={handleDelete}
+        />
+      </div>
+      <input
+        type="text"
+        className="edit"
+        value={editingTitle}
+        ref={editInput}
+        onChange={handleEditingChange}
+        onKeyUp={handleEditingKeyUp}
+        onBlur={handleEditingBlur}
+      />
+    </li>
+  );
+};

src/components/TodoList/TodoList.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import { TodosContext } from '../../context/TodosContext';
+import { Todo } from '../../interfaces/Todo';
+import { TodoItem } from '../TodoItem/TodoItem';
+import { StatusEnum } from '../../interfaces/StatusEnum';
+
+type Props = {
+  filter: StatusEnum;
+};
+
+export const TodoList: React.FC<Props> = ({ filter }) => {
+  const todos = useContext(TodosContext);
+
+  return (
+    <ul className="todo-list" data-cy="todosList">
+      {[...todos.filter(todo => {
+        switch (filter) {
+          case StatusEnum.Active:
+            return !todo.completed;
+          case StatusEnum.Completed:
+            return todo.completed;
+          case StatusEnum.All:
+          default:
+            return todo;
+        }
+      })].map((todo: Todo) => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </ul>
+  );
+};