Develop

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://Marinakyrychynska.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 React, { useContext } from 'react';
+import { Header } from './Components/Header/Header';
+import { Main } from './Components/Main/Main';
+import { TodoContext } from './Data/Store';
+import { Footer } from './Components/Footer/Footer';
 
 export const App: React.FC = () => {
+  const { todos } = useContext(TodoContext);
+
   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>
+      <Header />
+      <Main />
+      {todos !== null && todos.length !== 0 && <Footer />}
     </div>
   );
 };

src/Components/Footer/Footer.tsx

@@ -0,0 +1,75 @@
+import React, { useContext, useEffect } from 'react';
+import { DispatchContext, TodoContext } from '../../Data/Store';
+
+export const Footer: React.FC = () => {
+  const {
+    todos,
+    filterActive,
+    selectedAll,
+    selectedCompleted,
+  } = useContext(TodoContext);
+
+  const dispatch = useContext(DispatchContext);
+  const todosNotCompleted = todos.filter(todo => todo.completed === false);
+  const numberItemsLeft = todosNotCompleted.length;
+
+  useEffect(() => {
+    dispatch({ type: 'selectedAll' });
+  }, [dispatch]);
+
+  return (
+    <footer className="footer">
+      <span className="todo-count" data-cy="todosCounter">
+        {`${numberItemsLeft} items left`}
+      </span>
+
+      <ul className="filters">
+        <li>
+          <a
+            href="#/"
+            className={`${selectedAll && 'selected'}`}
+            onClick={() => {
+              dispatch({ type: 'selectedAll' });
+            }}
+          >
+            All
+          </a>
+        </li>
+
+        <li>
+          <a
+            href="#/active"
+            className={`${filterActive && 'selected'}`}
+            onClick={() => {
+              dispatch({ type: 'filterActive' });
+            }}
+          >
+            Active
+          </a>
+        </li>
+
+        <li>
+          <a
+            href="#/completed"
+            className={`${selectedCompleted && 'selected'}`}
+            onClick={() => {
+              dispatch({ type: 'selectedCompleted' });
+            }}
+          >
+            Completed
+          </a>
+        </li>
+      </ul>
+
+      <button
+        type="button"
+        className="clear-completed"
+        onClick={() => {
+          dispatch({ type: 'clearCompleted' });
+        }}
+      >
+        Clear completed
+      </button>
+    </footer>
+  );
+};

src/Components/Header/Header.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import { DispatchContext, TodoContext } from '../../Data/Store';
+
+export const Header: React.FC = () => {
+  const { value } = useContext(TodoContext);
+  const dispatch = useContext(DispatchContext);
+
+  const addTodo = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      const todoTitle = event.currentTarget.value.trim();
+
+      if (todoTitle) {
+        dispatch({
+          type: 'addTodo',
+          payLoad: event.currentTarget.value,
+        });
+
+        dispatch({
+          type: 'changeValue',
+          payLoad: '',
+        });
+      }
+    }
+  };
+
+  const changeValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch({
+      type: 'changeValue',
+      payLoad: event.target.value,
+    });
+  };
+
+  return (
+    <header className="header">
+      <h1>todos</h1>
+
+      <form onSubmit={(event) => event.preventDefault()}>
+        <input
+          onKeyUp={addTodo}
+          onChange={changeValue}
+          value={value}
+          type="text"
+          data-cy="createTodo"
+          className="new-todo"
+          placeholder="What needs to be done?"
+        />
+      </form>
+    </header>
+  );
+};

src/Components/Main/Main.tsx

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import { DispatchContext, TodoContext } from '../../Data/Store';
+import { Todo } from '../../Types/Todo';
+import { TodoList } from '../TodoList/TodoList';
+
+export const Main: React.FC = () => {
+  const {
+    todos,
+    todosCompleted,
+    filterActive,
+    selectedCompleted,
+  } = useContext(TodoContext);
+
+  const dispatch = useContext(DispatchContext);
+
+  const handleChange = () => {
+    dispatch({ type: 'toggleCompleted' });
+
+    if (!todosCompleted) {
+      dispatch({ type: 'changeTotoCompletedTrue' });
+    }
+
+    if (todosCompleted) {
+      dispatch({ type: 'changeTodoCompletedFalse' });
+    }
+  };
+
+  const filterTodos = (todoItems: Todo[]) => {
+    if (filterActive) {
+      const activeTodos = todoItems.filter(todo => todo.completed === false);
+
+      return activeTodos;
+    }
+
+    if (selectedCompleted) {
+      const completedTodos = todoItems.filter(todo => todo.completed === true);
+
+      return completedTodos;
+    }
+
+    return todoItems;
+  };
+
+  return (
+    <section className="main">
+      <input
+        onChange={handleChange}
+        checked={todosCompleted}
+        type="checkbox"
+        id="toggle-all"
+        className="toggle-all"
+        data-cy="toggleAll"
+      />
+      <label htmlFor="toggle-all">Mark all as complete</label>
+
+      <TodoList
+        items={filterTodos(todos)}
+      />
+    </section>
+  );
+};

src/Components/TodoItem/TodoItem.tsx

@@ -0,0 +1,95 @@
+import React, { useContext, useRef, useEffect } from 'react';
+import { Todo } from '../../Types/Todo';
+import { DispatchContext, TodoContext } from '../../Data/Store';
+
+interface Props {
+  title: string,
+  completed: boolean,
+  todo: Todo,
+}
+
+export const TodoItem: React.FC<Props> = ({ title, completed, todo }) => {
+  const dispatch = useContext(DispatchContext);
+  const { edit } = useContext(TodoContext);
+
+  const titleField = useRef<HTMLInputElement>(null);
+  const pressedEnter = (key: string) => key === 'Enter';
+
+  const handleChange = () => {
+    dispatch({
+      type: 'todoCompleted',
+      payLoad: todo,
+    });
+  };
+
+  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (pressedEnter(event.key) && !event.currentTarget.value) {
+      dispatch({ type: 'removeTodo', payLoad: todo });
+    }
+
+    if (pressedEnter(event.key)) {
+      dispatch({
+        type: 'newTitleTodo',
+        payLoad: todo,
+        newTitle: event.currentTarget.value,
+      });
+    }
+
+    if (event.key === 'Escape') {
+      dispatch({ type: 'removeEdit' });
+    }
+  };
+
+  useEffect(() => {
+    if (edit) {
+      titleField.current?.focus();
+    }
+  }, [edit]);
+
+  return (
+    <li className={`${edit === todo.id && 'editing'} ${completed && 'completed'}`}>
+      <div className="view">
+        <input
+          type="checkbox"
+          className="toggle"
+          id="toggle-view"
+          onChange={handleChange}
+          checked={completed === true}
+        />
+
+        <label
+          onDoubleClick={() => {
+            dispatch({ type: 'edit', payLoad: todo });
+          }}
+        >
+          {title}
+        </label>
+
+        <button
+          aria-label={title}
+          type="button"
+          className="destroy"
+          data-cy="deleteTodo"
+          onClick={() => {
+            dispatch({ type: 'removeTodo', payLoad: todo });
+          }}
+        />
+
+      </div>
+      <input
+        ref={titleField}
+        type="text"
+        className="edit"
+        defaultValue={title}
+        onKeyUp={handleKeyUp}
+        onBlur={() => {
+          dispatch({
+            type: 'newTitleTodo',
+            payLoad: todo,
+            newTitle: title,
+          });
+        }}
+      />
+    </li>
+  );
+};