From 8ea49d47217577ae8359929c68694331d6283f48 Mon Sep 17 00:00:00 2001
From: Dmytro Loboda <dmytro.loboda@gmail.com>
Date: Sat, 1 Jun 2024 03:31:11 +0800
Subject: [PATCH 1/5] todo app solution

---
 src/App.tsx                  | 176 ++++++------------------------
 src/Storage/storageFiles.tsx | 200 +++++++++++++++++++++++++++++++++++
 src/components/Footer.tsx    |  66 ++++++++++++
 src/components/Header.tsx    |  68 ++++++++++++
 src/components/Todos.tsx     |  97 +++++++++++++++++
 src/index.tsx                |  11 +-
 src/styles/index.scss        |   4 +
 src/types/Todo.ts            |   6 ++
 8 files changed, 480 insertions(+), 148 deletions(-)
 create mode 100644 src/Storage/storageFiles.tsx
 create mode 100644 src/components/Footer.tsx
 create mode 100644 src/components/Header.tsx
 create mode 100644 src/components/Todos.tsx
 create mode 100644 src/types/Todo.ts

diff --git a/src/App.tsx b/src/App.tsx
index a399287bd..9de3c734e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,156 +1,44 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
+import { Todos } from './components/Todos';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { DispatchContext, StateContext } from './Storage/storageFiles';
+import { Todo } from './types/Todo';
 
-export const App: React.FC = () => {
-  return (
-    <div className="todoapp">
-      <h1 className="todoapp__title">todos</h1>
-
-      <div className="todoapp__content">
-        <header className="todoapp__header">
-          {/* this button should have `active` class only if all todos are completed */}
-          <button
-            type="button"
-            className="todoapp__toggle-all active"
-            data-cy="ToggleAllButton"
-          />
-
-          {/* Add a todo on form submit */}
-          <form>
-            <input
-              data-cy="NewTodoField"
-              type="text"
-              className="todoapp__new-todo"
-              placeholder="What needs to be done?"
-            />
-          </form>
-        </header>
-
-        <section className="todoapp__main" data-cy="TodoList">
-          {/* This is a completed todo */}
-          <div data-cy="Todo" className="todo completed">
-            <label className="todo__status-label">
-              <input
-                data-cy="TodoStatus"
-                type="checkbox"
-                className="todo__status"
-                checked
-              />
-            </label>
-
-            <span data-cy="TodoTitle" className="todo__title">
-              Completed Todo
-            </span>
-
-            {/* Remove button appears only on hover */}
-            <button type="button" className="todo__remove" data-cy="TodoDelete">
-              ×
-            </button>
-          </div>
-
-          {/* This todo is an active todo */}
-          <div data-cy="Todo" className="todo">
-            <label className="todo__status-label">
-              <input
-                data-cy="TodoStatus"
-                type="checkbox"
-                className="todo__status"
-              />
-            </label>
+const getTodosFromLocalStorage: Todo[] = JSON.parse(
+  localStorage.getItem('todos') || '[]',
+);
 
-            <span data-cy="TodoTitle" className="todo__title">
-              Not Completed Todo
-            </span>
-
-            <button type="button" className="todo__remove" data-cy="TodoDelete">
-              ×
-            </button>
-          </div>
-
-          {/* This todo is being edited */}
-          <div data-cy="Todo" className="todo">
-            <label className="todo__status-label">
-              <input
-                data-cy="TodoStatus"
-                type="checkbox"
-                className="todo__status"
-              />
-            </label>
-
-            {/* This form is shown instead of the title and remove button */}
-            <form>
-              <input
-                data-cy="TodoTitleField"
-                type="text"
-                className="todo__title-field"
-                placeholder="Empty todo will be deleted"
-                value="Todo is being edited now"
-              />
-            </form>
-          </div>
-
-          {/* This todo is in loadind state */}
-          <div data-cy="Todo" className="todo">
-            <label className="todo__status-label">
-              <input
-                data-cy="TodoStatus"
-                type="checkbox"
-                className="todo__status"
-              />
-            </label>
-
-            <span data-cy="TodoTitle" className="todo__title">
-              Todo is being saved now
-            </span>
+export const App: React.FC = () => {
+  const { todos } = useContext(StateContext);
+  const dispatch = useContext(DispatchContext);
 
-            <button type="button" className="todo__remove" data-cy="TodoDelete">
-              ×
-            </button>
-          </div>
-        </section>
+  useEffect(() => {
+    if (todos.length === 0) {
+      dispatch({ type: 'setTodos', tod: getTodosFromLocalStorage });
+    }
+  }, []);
+  const temper = useRef(true);
 
-        {/* Hide the footer if there are no todos */}
-        <footer className="todoapp__footer" data-cy="Footer">
-          <span className="todo-count" data-cy="TodosCounter">
-            3 items left
-          </span>
+  useEffect(() => {
+    if (temper.current) {
+      temper.current = false;
 
-          {/* Active link should have the 'selected' class */}
-          <nav className="filter" data-cy="Filter">
-            <a
-              href="#/"
-              className="filter__link selected"
-              data-cy="FilterLinkAll"
-            >
-              All
-            </a>
+      return;
+    }
 
-            <a
-              href="#/active"
-              className="filter__link"
-              data-cy="FilterLinkActive"
-            >
-              Active
-            </a>
+    localStorage.setItem('todos', JSON.stringify(todos));
+  }, [todos]);
 
-            <a
-              href="#/completed"
-              className="filter__link"
-              data-cy="FilterLinkCompleted"
-            >
-              Completed
-            </a>
-          </nav>
+  return (
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
 
-          {/* this button should be disabled if there are no completed todos */}
-          <button
-            type="button"
-            className="todoapp__clear-completed"
-            data-cy="ClearCompletedButton"
-          >
-            Clear completed
-          </button>
-        </footer>
+      <div className="todoapp__content">
+        <Header />
+        <Todos />
+        <Footer />
       </div>
     </div>
   );
diff --git a/src/Storage/storageFiles.tsx b/src/Storage/storageFiles.tsx
new file mode 100644
index 000000000..740199045
--- /dev/null
+++ b/src/Storage/storageFiles.tsx
@@ -0,0 +1,200 @@
+import React, { useReducer } from 'react';
+import { Todo } from '../types/Todo';
+
+interface State {
+  todos: Todo[];
+  newTodo: string;
+  focusNewTodo: boolean;
+  useTodos: 'All' | 'Active' | 'Completed';
+  changerTodo: string;
+}
+
+type Action =
+  | { type: 'add' }
+  | { type: 'changeTodo'; text: string }
+  | { type: 'remove'; id: number }
+  | { type: 'checked'; id: number }
+  | { type: 'setChanged'; id: number }
+  | { type: 'changed'; id: number; text: string }
+  | { type: 'setAllCompleate'; use: boolean }
+  | { type: 'setUseTodos'; name: 'All' | 'Active' | 'Completed' }
+  | { type: 'clearAll' }
+  | { type: 'setTodos'; tod: Todo[] }
+  | { type: 'setFocudNewTodo' }
+  | { type: 'escapeChangedText'; id: number };
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'changeTodo':
+      return {
+        ...state,
+        newTodo: action.text,
+      };
+
+    case 'add':
+      return {
+        ...state,
+        todos: [
+          ...state.todos,
+          {
+            id: +new Date(),
+            title: state.newTodo.trim(),
+            completed: false,
+            changed: false,
+          },
+        ],
+      };
+
+    case 'remove':
+      return {
+        ...state,
+        todos: [...state.todos.filter(todo => todo.id !== action.id)],
+        focusNewTodo: !state.focusNewTodo,
+      };
+
+    case 'checked':
+      return {
+        ...state,
+        todos: [
+          ...state.todos.map(todo => {
+            if (todo.id === action.id) {
+              return {
+                ...todo,
+                completed: !todo.completed,
+              };
+            } else {
+              return todo;
+            }
+          }),
+        ],
+      };
+
+    case 'setChanged':
+      return {
+        ...state,
+        todos: [
+          ...state.todos
+            .map(todo => {
+              if (todo.id === action.id) {
+                return {
+                  ...todo,
+                  changed: !todo.changed,
+                  title: todo.title.trim(),
+                };
+              } else {
+                return todo;
+              }
+            })
+            .filter(todo => todo.title),
+        ],
+        changerTodo:
+          state.todos.find(todo => todo.id === action.id)?.title || '',
+      };
+
+    case 'changed':
+      return {
+        ...state,
+        todos: [
+          ...state.todos.map(todo => {
+            if (todo.id === action.id) {
+              return {
+                ...todo,
+                title: action.text,
+              };
+            } else {
+              return todo;
+            }
+          }),
+        ],
+      };
+
+    case 'setAllCompleate':
+      return {
+        ...state,
+        todos: [
+          ...state.todos.map(todo => {
+            return {
+              ...todo,
+              completed: !action.use,
+            };
+          }),
+        ],
+      };
+
+    case 'setUseTodos':
+      return {
+        ...state,
+        useTodos: action.name,
+      };
+
+    case 'clearAll':
+      return {
+        ...state,
+        todos: [
+          ...state.todos.filter(todo => {
+            return !todo.completed;
+          }),
+        ],
+        focusNewTodo: !state.focusNewTodo,
+      };
+
+    case 'setTodos':
+      return {
+        ...state,
+        todos: [...action.tod],
+      };
+
+    case 'setFocudNewTodo':
+      return {
+        ...state,
+        focusNewTodo: !state.focusNewTodo,
+      };
+
+    case 'escapeChangedText':
+      return {
+        ...state,
+        todos: [
+          ...state.todos.map(todo => {
+            if (todo.id === action.id) {
+              return {
+                ...todo,
+                title: state.changerTodo,
+              };
+            } else {
+              return todo;
+            }
+          }),
+        ],
+      };
+
+    default:
+      return state;
+  }
+};
+
+const initialState: State = {
+  todos: [],
+  newTodo: '',
+  useTodos: 'All',
+  focusNewTodo: true,
+  changerTodo: '',
+};
+
+const defaultDispatch: React.Dispatch<Action> = () => {};
+
+export const StateContext = React.createContext(initialState);
+export const DispatchContext = React.createContext(defaultDispatch);
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const GlobalstateProvider: React.FC<Props> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <DispatchContext.Provider value={dispatch}>
+      <StateContext.Provider value={state}>{children}</StateContext.Provider>
+    </DispatchContext.Provider>
+  );
+};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 000000000..2f297bc4c
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,66 @@
+import { useContext } from 'react';
+import { DispatchContext, StateContext } from '../Storage/storageFiles';
+import cn from 'classnames';
+
+export const Footer = () => {
+  const { todos, useTodos } = useContext(StateContext);
+  const dispatch = useContext(DispatchContext);
+  const todosLeft = todos.filter(todo => !todo.completed).length;
+
+  return (
+    <>
+      {todos.length !== 0 && (
+        <footer className="todoapp__footer" data-cy="Footer">
+          <span className="todo-count" data-cy="TodosCounter">
+            {todosLeft} items left
+          </span>
+
+          <nav className="filter" data-cy="Filter">
+            <a
+              href="#/"
+              className={cn('filter__link', { selected: useTodos === 'All' })}
+              data-cy="FilterLinkAll"
+              onClick={() => dispatch({ type: 'setUseTodos', name: 'All' })}
+            >
+              All
+            </a>
+
+            <a
+              href="#/active"
+              className={cn('filter__link', {
+                selected: useTodos === 'Active',
+              })}
+              data-cy="FilterLinkActive"
+              onClick={() => dispatch({ type: 'setUseTodos', name: 'Active' })}
+            >
+              Active
+            </a>
+
+            <a
+              href="#/completed"
+              className={cn('filter__link', {
+                selected: useTodos === 'Completed',
+              })}
+              data-cy="FilterLinkCompleted"
+              onClick={() =>
+                dispatch({ type: 'setUseTodos', name: 'Completed' })
+              }
+            >
+              Completed
+            </a>
+          </nav>
+
+          <button
+            type="button"
+            className="todoapp__clear-completed"
+            data-cy="ClearCompletedButton"
+            onClick={() => dispatch({ type: 'clearAll' })}
+            disabled={todosLeft === todos.length}
+          >
+            Clear completed
+          </button>
+        </footer>
+      )}
+    </>
+  );
+};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 000000000..ab77ab5cc
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,68 @@
+import React, { useContext, useRef } from 'react';
+import { DispatchContext, StateContext } from '../Storage/storageFiles';
+import cn from 'classnames';
+
+export const Header = () => {
+  const dispatch = useContext(DispatchContext);
+  const { todos, newTodo, focusNewTodo } = useContext(StateContext);
+
+  const allTodosComplete = todos.reduce((prev, todo) => {
+    return prev && todo.completed;
+  }, true);
+
+  const addNewTodo = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (newTodo.trim()) {
+      dispatch({ type: 'add' });
+      dispatch({
+        type: 'changeTodo',
+        text: '',
+      });
+    }
+  };
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  if (focusNewTodo) {
+    inputRef.current?.focus();
+  } else {
+    inputRef.current?.blur();
+  }
+
+  return (
+    <header className="todoapp__header">
+      {todos.length > 0 && (
+        <button
+          type="button"
+          className={cn('todoapp__toggle-all', {
+            active: allTodosComplete,
+          })}
+          data-cy="ToggleAllButton"
+          onClick={() =>
+            dispatch({ type: 'setAllCompleate', use: allTodosComplete })
+          }
+        />
+      )}
+
+      <form onSubmit={addNewTodo}>
+        <input
+          ref={inputRef}
+          data-cy="NewTodoField"
+          type="text"
+          className="todoapp__new-todo"
+          placeholder="What needs to be done?"
+          value={newTodo}
+          onClick={() => dispatch({ type: 'setFocudNewTodo' })}
+          onBlur={() => dispatch({ type: 'setFocudNewTodo' })}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            dispatch({
+              type: 'changeTodo',
+              text: e.target.value.toString(),
+            })
+          }
+        />
+      </form>
+    </header>
+  );
+};
diff --git a/src/components/Todos.tsx b/src/components/Todos.tsx
new file mode 100644
index 000000000..8c3f47782
--- /dev/null
+++ b/src/components/Todos.tsx
@@ -0,0 +1,97 @@
+import { useContext } from 'react';
+import { DispatchContext, StateContext } from '../Storage/storageFiles';
+import cn from 'classnames';
+
+export const Todos = () => {
+  const dispatch = useContext(DispatchContext);
+  const { todos, useTodos } = useContext(StateContext);
+
+  const todosFilter = todos.filter(todo => {
+    if (useTodos === 'Active') {
+      return !todo.completed;
+    }
+
+    if (useTodos === 'Completed') {
+      return todo.completed;
+    }
+
+    return true;
+  });
+
+  return (
+    <section className="todoapp__main" data-cy="TodoList">
+      {todosFilter.map(todo => (
+        <div
+          data-cy="Todo"
+          className={cn('todo', { completed: todo.completed })}
+          key={todo.id}
+        >
+          <label className="todo__status-label">
+            <input
+              data-cy="TodoStatus"
+              type="checkbox"
+              className="todo__status"
+              checked={todo.completed}
+              onChange={() => dispatch({ type: 'checked', id: todo.id })}
+            />
+          </label>
+
+          {!todo.changed && (
+            <span
+              data-cy="TodoTitle"
+              className="todo__title"
+              onDoubleClick={() =>
+                dispatch({ type: 'setChanged', id: todo.id })
+              }
+            >
+              {todo.title}
+            </span>
+          )}
+
+          {todo.changed && (
+            <form
+              onSubmit={e => {
+                e.preventDefault();
+                dispatch({ type: 'setChanged', id: todo.id });
+              }}
+            >
+              <input
+                data-cy="TodoTitleField"
+                type="text"
+                className="todo__title-field"
+                placeholder="Empty todo will be deleted"
+                value={todo.title}
+                onKeyUp={e => {
+                  if (e.key === 'Escape') {
+                    dispatch({ type: 'escapeChangedText', id: todo.id });
+                    dispatch({ type: 'setChanged', id: todo.id });
+                  }
+                }}
+                autoFocus
+                onChange={e =>
+                  dispatch({
+                    type: 'changed',
+                    id: todo.id,
+                    text: e.target.value,
+                  })
+                }
+                onBlur={() => dispatch({ type: 'setChanged', id: todo.id })}
+              />
+            </form>
+          )}
+
+          {!todo.changed && (
+            <button
+              type="button"
+              className="todo__remove"
+              data-cy="TodoDelete"
+              onClick={() => dispatch({ type: 'remove', id: todo.id })}
+            >
+              ×
+            </button>
+          )}
+        </div>
+      ))}
+    </section>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
index a9689cb38..0310f3210 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,11 +1,14 @@
 import { createRoot } from 'react-dom/client';
 
-import './styles/index.css';
-import './styles/todo-list.css';
-import './styles/filters.css';
+import './styles/index.scss';
 
 import { App } from './App';
+import { GlobalstateProvider } from './Storage/storageFiles';
 
 const container = document.getElementById('root') as HTMLDivElement;
 
-createRoot(container).render(<App />);
+createRoot(container).render(
+  <GlobalstateProvider>
+    <App />
+  </GlobalstateProvider>,
+);
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a34eec7c6..72904c4f1 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 iframe {
   display: none;
 }
diff --git a/src/types/Todo.ts b/src/types/Todo.ts
new file mode 100644
index 000000000..03abaacf5
--- /dev/null
+++ b/src/types/Todo.ts
@@ -0,0 +1,6 @@
+export type Todo = {
+  id: number;
+  title: string;
+  completed: boolean;
+  changed: boolean;
+};

From c47ade5613fddecae3c9056592cf0eb905ea904c Mon Sep 17 00:00:00 2001
From: Dmytro Loboda <dmytro.loboda@gmail.com>
Date: Wed, 25 Sep 2024 03:53:30 +0800
Subject: [PATCH 2/5] TodoApp v.2

---
 src/App.tsx               | 23 +++++-----
 src/components/Footer.tsx |  7 ++-
 src/components/Header.tsx | 16 +++----
 src/components/Todo.tsx   | 87 ++++++++++++++++++++++++++++++++++++
 src/components/Todos.tsx  | 94 ++++++++++-----------------------------
 5 files changed, 137 insertions(+), 90 deletions(-)
 create mode 100644 src/components/Todo.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 9de3c734e..69ce14bd6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,28 +6,29 @@ import { Footer } from './components/Footer';
 import { DispatchContext, StateContext } from './Storage/storageFiles';
 import { Todo } from './types/Todo';
 
-const getTodosFromLocalStorage: Todo[] = JSON.parse(
-  localStorage.getItem('todos') || '[]',
-);
-
 export const App: React.FC = () => {
   const { todos } = useContext(StateContext);
   const dispatch = useContext(DispatchContext);
-
-  useEffect(() => {
-    if (todos.length === 0) {
-      dispatch({ type: 'setTodos', tod: getTodosFromLocalStorage });
-    }
-  }, []);
   const temper = useRef(true);
 
   useEffect(() => {
     if (temper.current) {
       temper.current = false;
 
-      return;
+      try {
+        const storedTodos: Todo[] = JSON.parse(
+          localStorage.getItem('todos') || '[]',
+        );
+
+        dispatch({ type: 'setTodos', tod: storedTodos });
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to load todos from localStorage:', error);
+      }
     }
+  }, [dispatch]);
 
+  useEffect(() => {
     localStorage.setItem('todos', JSON.stringify(todos));
   }, [todos]);
 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2f297bc4c..fa3d607cf 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -12,7 +12,7 @@ export const Footer = () => {
       {todos.length !== 0 && (
         <footer className="todoapp__footer" data-cy="Footer">
           <span className="todo-count" data-cy="TodosCounter">
-            {todosLeft} items left
+            {`${todosLeft} ${todosLeft === 1 ? 'item left' : 'items left'}`}
           </span>
 
           <nav className="filter" data-cy="Filter">
@@ -56,6 +56,11 @@ export const Footer = () => {
             data-cy="ClearCompletedButton"
             onClick={() => dispatch({ type: 'clearAll' })}
             disabled={todosLeft === todos.length}
+            style={{
+              visibility: todos.some(todo => todo.completed)
+                ? 'visible'
+                : 'hidden',
+            }}
           >
             Clear completed
           </button>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ab77ab5cc..270564c9d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { DispatchContext, StateContext } from '../Storage/storageFiles';
 import cn from 'classnames';
 
@@ -24,11 +24,13 @@ export const Header = () => {
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  if (focusNewTodo) {
-    inputRef.current?.focus();
-  } else {
-    inputRef.current?.blur();
-  }
+  useEffect(() => {
+    if (focusNewTodo) {
+      inputRef.current?.focus();
+    } else {
+      inputRef.current?.blur();
+    }
+  }, [focusNewTodo]);
 
   return (
     <header className="todoapp__header">
@@ -53,8 +55,6 @@ export const Header = () => {
           className="todoapp__new-todo"
           placeholder="What needs to be done?"
           value={newTodo}
-          onClick={() => dispatch({ type: 'setFocudNewTodo' })}
-          onBlur={() => dispatch({ type: 'setFocudNewTodo' })}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
             dispatch({
               type: 'changeTodo',
diff --git a/src/components/Todo.tsx b/src/components/Todo.tsx
new file mode 100644
index 000000000..3fed222a7
--- /dev/null
+++ b/src/components/Todo.tsx
@@ -0,0 +1,87 @@
+import React, { useContext } from 'react';
+import { DispatchContext } from '../Storage/storageFiles';
+import cn from 'classnames';
+
+interface TodoItemProps {
+  todo: {
+    id: number;
+    title: string;
+    completed: boolean;
+    changed: boolean;
+  };
+  handleKeyUp: (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    todoId: number,
+  ) => void;
+  handleFormSubmit: (
+    e: React.FormEvent<HTMLFormElement>,
+    todoId: number,
+  ) => void;
+}
+
+export const TodoItem: React.FC<TodoItemProps> = ({
+  todo,
+  handleKeyUp,
+  handleFormSubmit,
+}) => {
+  const dispatch = useContext(DispatchContext);
+
+  return (
+    <div
+      data-cy="Todo"
+      className={cn('todo', { completed: todo.completed })}
+      key={todo.id}
+    >
+      <label className="todo__status-label">
+        <input
+          data-cy="TodoStatus"
+          type="checkbox"
+          className="todo__status"
+          checked={todo.completed}
+          onChange={() => dispatch({ type: 'checked', id: todo.id })}
+        />
+      </label>
+
+      <span
+        data-cy="TodoTitle"
+        className="todo__title"
+        onDoubleClick={() => dispatch({ type: 'setChanged', id: todo.id })}
+      >
+        {todo.changed ? null : todo.title}
+      </span>
+
+      {todo.changed ? (
+        <form onSubmit={e => handleFormSubmit(e, todo.id)}>
+          <input
+            data-cy="TodoTitleField"
+            type="text"
+            className="todo__title-field"
+            placeholder="Empty todo will be deleted"
+            value={todo.title}
+            onKeyUp={e => handleKeyUp(e, todo.id)}
+            autoFocus
+            onChange={e =>
+              dispatch({
+                type: 'changed',
+                id: todo.id,
+                text: e.target.value,
+              })
+            }
+            onBlur={() => dispatch({ type: 'setChanged', id: todo.id })}
+          />
+        </form>
+      ) : null}
+
+      {!todo.changed ? (
+        <button
+          type="button"
+          className="todo__remove"
+          data-cy="TodoDelete"
+          onClick={() => dispatch({ type: 'remove', id: todo.id })}
+        >
+          ×
+        </button>
+      ) : null}
+    </div>
+  );
+};
diff --git a/src/components/Todos.tsx b/src/components/Todos.tsx
index 8c3f47782..22ef51851 100644
--- a/src/components/Todos.tsx
+++ b/src/components/Todos.tsx
@@ -1,11 +1,29 @@
 import { useContext } from 'react';
 import { DispatchContext, StateContext } from '../Storage/storageFiles';
-import cn from 'classnames';
+import { TodoItem } from './Todo';
 
 export const Todos = () => {
   const dispatch = useContext(DispatchContext);
   const { todos, useTodos } = useContext(StateContext);
 
+  const handleFormSubmit = (
+    e: React.FormEvent<HTMLFormElement>,
+    todoId: number,
+  ) => {
+    e.preventDefault();
+    dispatch({ type: 'setChanged', id: todoId });
+  };
+
+  const handleKeyUp = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    todoId: number,
+  ) => {
+    if (e.key === 'Escape') {
+      dispatch({ type: 'escapeChangedText', id: todoId });
+      dispatch({ type: 'setChanged', id: todoId });
+    }
+  };
+
   const todosFilter = todos.filter(todo => {
     if (useTodos === 'Active') {
       return !todo.completed;
@@ -21,76 +39,12 @@ export const Todos = () => {
   return (
     <section className="todoapp__main" data-cy="TodoList">
       {todosFilter.map(todo => (
-        <div
-          data-cy="Todo"
-          className={cn('todo', { completed: todo.completed })}
+        <TodoItem
           key={todo.id}
-        >
-          <label className="todo__status-label">
-            <input
-              data-cy="TodoStatus"
-              type="checkbox"
-              className="todo__status"
-              checked={todo.completed}
-              onChange={() => dispatch({ type: 'checked', id: todo.id })}
-            />
-          </label>
-
-          {!todo.changed && (
-            <span
-              data-cy="TodoTitle"
-              className="todo__title"
-              onDoubleClick={() =>
-                dispatch({ type: 'setChanged', id: todo.id })
-              }
-            >
-              {todo.title}
-            </span>
-          )}
-
-          {todo.changed && (
-            <form
-              onSubmit={e => {
-                e.preventDefault();
-                dispatch({ type: 'setChanged', id: todo.id });
-              }}
-            >
-              <input
-                data-cy="TodoTitleField"
-                type="text"
-                className="todo__title-field"
-                placeholder="Empty todo will be deleted"
-                value={todo.title}
-                onKeyUp={e => {
-                  if (e.key === 'Escape') {
-                    dispatch({ type: 'escapeChangedText', id: todo.id });
-                    dispatch({ type: 'setChanged', id: todo.id });
-                  }
-                }}
-                autoFocus
-                onChange={e =>
-                  dispatch({
-                    type: 'changed',
-                    id: todo.id,
-                    text: e.target.value,
-                  })
-                }
-                onBlur={() => dispatch({ type: 'setChanged', id: todo.id })}
-              />
-            </form>
-          )}
-
-          {!todo.changed && (
-            <button
-              type="button"
-              className="todo__remove"
-              data-cy="TodoDelete"
-              onClick={() => dispatch({ type: 'remove', id: todo.id })}
-            >
-              ×
-            </button>
-          )}
-        </div>
+          todo={todo}
+          handleKeyUp={handleKeyUp}
+          handleFormSubmit={handleFormSubmit}
+        />
       ))}
     </section>
   );

From 1d796f77fdf3cfa147a13492f4433e77d31e91b2 Mon Sep 17 00:00:00 2001
From: Dmytro Loboda <dmytro.loboda@gmail.com>
Date: Wed, 25 Sep 2024 05:59:09 +0800
Subject: [PATCH 3/5] react app v.2

---
 src/Storage/storageFiles.tsx |  2 +-
 src/components/Header.tsx    | 22 +++++++++-------------
 src/components/Todos.tsx     |  2 +-
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/Storage/storageFiles.tsx b/src/Storage/storageFiles.tsx
index 740199045..b61edb4d2 100644
--- a/src/Storage/storageFiles.tsx
+++ b/src/Storage/storageFiles.tsx
@@ -49,7 +49,7 @@ const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         todos: [...state.todos.filter(todo => todo.id !== action.id)],
-        focusNewTodo: !state.focusNewTodo,
+        focusNewTodo: true,
       };
 
     case 'checked':
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 270564c9d..f82081518 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,25 +5,21 @@ import cn from 'classnames';
 export const Header = () => {
   const dispatch = useContext(DispatchContext);
   const { todos, newTodo, focusNewTodo } = useContext(StateContext);
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const allTodosComplete = todos.reduce((prev, todo) => {
-    return prev && todo.completed;
-  }, true);
+  const allTodosComplete = todos.reduce(
+    (prev, todo) => prev && todo.completed,
+    true,
+  );
 
   const addNewTodo = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
     if (newTodo.trim()) {
       dispatch({ type: 'add' });
-      dispatch({
-        type: 'changeTodo',
-        text: '',
-      });
+      dispatch({ type: 'changeTodo', text: '' });
     }
   };
 
-  const inputRef = useRef<HTMLInputElement>(null);
-
   useEffect(() => {
     if (focusNewTodo) {
       inputRef.current?.focus();
@@ -37,9 +33,7 @@ export const Header = () => {
       {todos.length > 0 && (
         <button
           type="button"
-          className={cn('todoapp__toggle-all', {
-            active: allTodosComplete,
-          })}
+          className={cn('todoapp__toggle-all', { active: allTodosComplete })}
           data-cy="ToggleAllButton"
           onClick={() =>
             dispatch({ type: 'setAllCompleate', use: allTodosComplete })
@@ -55,6 +49,8 @@ export const Header = () => {
           className="todoapp__new-todo"
           placeholder="What needs to be done?"
           value={newTodo}
+          onClick={() => dispatch({ type: 'setFocudNewTodo' })}
+          onBlur={() => dispatch({ type: 'setFocudNewTodo' })}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
             dispatch({
               type: 'changeTodo',
diff --git a/src/components/Todos.tsx b/src/components/Todos.tsx
index 22ef51851..e40723654 100644
--- a/src/components/Todos.tsx
+++ b/src/components/Todos.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import { DispatchContext, StateContext } from '../Storage/storageFiles';
 import { TodoItem } from './Todo';
 

From cb397117616cf77dda8436ea455297ca348a70bd Mon Sep 17 00:00:00 2001
From: Dmytro Loboda <dmytro.loboda@gmail.com>
Date: Wed, 25 Sep 2024 06:34:14 +0800
Subject: [PATCH 4/5] some improvements to pass test

---
 src/components/Header.tsx | 20 +++++++++++++-------
 src/components/Todo.tsx   | 18 +++++++++---------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f82081518..29cef306e 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -20,13 +20,19 @@ export const Header = () => {
     }
   };
 
-  useEffect(() => {
-    if (focusNewTodo) {
-      inputRef.current?.focus();
-    } else {
-      inputRef.current?.blur();
-    }
-  }, [focusNewTodo]);
+  // useEffect(() => {
+  //   if (focusNewTodo) {
+  //     inputRef.current?.focus();
+  //   } else {
+  //     inputRef.current?.blur();
+  //   }
+  // }, [focusNewTodo]);
+
+  if (focusNewTodo) {
+    inputRef.current?.focus();
+  } else {
+    inputRef.current?.blur();
+  }
 
   return (
     <header className="todoapp__header">
diff --git a/src/components/Todo.tsx b/src/components/Todo.tsx
index 3fed222a7..58e198773 100644
--- a/src/components/Todo.tsx
+++ b/src/components/Todo.tsx
@@ -42,14 +42,6 @@ export const TodoItem: React.FC<TodoItemProps> = ({
         />
       </label>
 
-      <span
-        data-cy="TodoTitle"
-        className="todo__title"
-        onDoubleClick={() => dispatch({ type: 'setChanged', id: todo.id })}
-      >
-        {todo.changed ? null : todo.title}
-      </span>
-
       {todo.changed ? (
         <form onSubmit={e => handleFormSubmit(e, todo.id)}>
           <input
@@ -70,7 +62,15 @@ export const TodoItem: React.FC<TodoItemProps> = ({
             onBlur={() => dispatch({ type: 'setChanged', id: todo.id })}
           />
         </form>
-      ) : null}
+      ) : (
+        <span
+          data-cy="TodoTitle"
+          className="todo__title"
+          onDoubleClick={() => dispatch({ type: 'setChanged', id: todo.id })}
+        >
+          {todo.title}
+        </span>
+      )}
 
       {!todo.changed ? (
         <button

From 92ff03b97516e58c646e6e233b7fedff3b6b8d8d Mon Sep 17 00:00:00 2001
From: Dmytro Loboda <dmytro.loboda@gmail.com>
Date: Wed, 25 Sep 2024 06:36:58 +0800
Subject: [PATCH 5/5] some improvements to pass test

---
 src/components/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 29cef306e..3b79e90f7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import { DispatchContext, StateContext } from '../Storage/storageFiles';
 import cn from 'classnames';