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

src/App.tsx

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

src/TodosContext.tsx

@@ -0,0 +1,23 @@
+import { createContext } from 'react';
+import { useLocaleStorage } from './hooks/useLocalStorage';
+import { Todo } from './types/Todo';
+import { Todos } from './types/Todos';
+
+export const TodosContext = createContext<Todos>({
+  todos: [],
+  setTodos: () => {},
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const TodosProvider: React.FC<Props> = ({ children }) => {
+  const [todos, setTodos] = useLocaleStorage<Todo[]>('todos', []);
+
+  return (
+    <TodosContext.Provider value={{ todos, setTodos }}>
+      {children}
+    </TodosContext.Provider>
+  );
+};

src/components/TodoApp/TodoApp.tsx

@@ -0,0 +1,137 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { TodosContext } from '../../TodosContext';
+import { TodoList } from '../TodoList';
+import { TodosFilter } from '../TodosFilter';
+import { Filter } from '../../types/Filter';
+
+export const TodoApp: React.FC = () => {
+  const [todoTitle, setTodoTitle] = useState('');
+  const { todos, setTodos } = useContext(TodosContext);
+  const [filterStatus, setFilterStatus] = useState(Filter.ALL);
+  const [count, setCount] = useState(0);
+
+  const handleTodoAdd = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (todoTitle.trim()) {
+      setTodos([
+        {
+          title: todoTitle,
+          id: +new Date(),
+          completed: false,
+        },
+        ...todos,
+      ]);
+    }
+
+    setTodoTitle('');
+  };
+
+  const handleCompleteAll = () => {
+    const someComepleted = todos.some(todo => !todo.completed);
+
+    if (someComepleted) {
+      const updatedTodos = todos.map(todo => ({
+        ...todo,
+        completed: true,
+      }));
+
+      setTodos(updatedTodos);
+    } else {
+      const updatedTodos = todos.map(todo => ({
+        ...todo,
+        completed: false,
+      }));
+
+      setTodos(updatedTodos);
+    }
+  };
+
+  const filteredTodos = todos.filter(todo => {
+    switch (filterStatus) {
+      case Filter.COMPLETED:
+        return todo.completed;
+      case Filter.ACTIVE:
+        return !todo.completed;
+      default:
+        return todo;
+    }
+  });
+
+  useEffect(() => {
+    setCount(todos.filter(todo => !todo.completed).length);
+  }, [todos]);
+
+  const handleClearCompletedTodos = () => {
+    const activeTodos = [...todos].filter(todo => !todo.completed);
+
+    setTodos(activeTodos);
+  };
+
+  const isVisibleClearButton = todos.some(todo => todo.completed);
+
+  return (
+    <div className="todoapp">
+      <header className="header">
+        <h1>todos</h1>
+
+        <form onSubmit={handleTodoAdd}>
+          <input
+            type="text"
+            data-cy="createTodo"
+            className="new-todo"
+            placeholder="What needs to be done?"
+            value={todoTitle}
+            onChange={(event) => setTodoTitle(event.target.value)}
+          />
+        </form>
+      </header>
+
+      {!!todos.length
+        && (
+          <section className="main">
+            <input
+              type="checkbox"
+              id="toggle-all"
+              className="toggle-all"
+              data-cy="toggleAll"
+              onChange={handleCompleteAll}
+              checked={filteredTodos.length !== count}
+            />
+
+            <label htmlFor="toggle-all">Mark all as complete</label>
+            <TodoList todos={filteredTodos} />
+          </section>
+        )}
+
+      {!!todos.length && (
+        <footer className="footer">
+          <span className="todo-count" data-cy="todosCounter">
+            {count === 1
+              ? (
+                `${count} item left`
+              ) : (
+                `${count} items left`
+              )}
+          </span>
+
+          <TodosFilter
+            filterStatus={filterStatus}
+            onFilterChange={(status: Filter) => setFilterStatus(status)}
+          />
+
+          {isVisibleClearButton
+            && (
+              <button
+                type="button"
+                className="clear-completed"
+                onClick={handleClearCompletedTodos}
+              >
+                Clear completed
+              </button>
+            )}
+        </footer>
+      )}
+    </div>
+  );
+};

src/components/TodoApp/index.ts

@@ -0,0 +1 @@
+export * from './TodoApp';