From 1738fbbb53ccb6efcadb3f92d0c820e84d060d38 Mon Sep 17 00:00:00 2001
From: Oleksandr Rad <clavigo365@gmail.com>
Date: Wed, 29 Jan 2025 11:15:58 +0200
Subject: [PATCH] add solution

---
 src/App.tsx                 | 19 +++----------------
 src/components/Footer.tsx   |  7 -------
 src/components/Header.tsx   |  6 ------
 src/components/TodoItem.tsx |  6 ++----
 src/components/TodoList.tsx | 15 +--------------
 src/utils/todos.ts          | 38 +++++++++++++++++++------------------
 6 files changed, 26 insertions(+), 65 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 78c9eb306..3d2eb2921 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,24 +12,11 @@ export const App: React.FC = () => {
         <h1 className="todoapp__title">todos</h1>
 
         <div className="todoapp__content">
-          <Header
-          // todos={todos}
-          // handleAddTodo={handleAddTodo}
-          // handleToggling={handleToggling}
-          />
+          <Header />
 
-          <TodoList
-          // todos={visibleTodos}
-          // handleDeleteTodo={handleDeleteTodo}
-          // handleUpdateTodo={handleUpdateTodo}
-          />
+          <TodoList />
 
-          <Footer
-          // todos={todos}
-          // todosType={todosType}
-          // handleTodosTypeChange={handleTodosTypeChange}
-          // handleDeleteTodo={handleDeleteTodo}
-          />
+          <Footer />
         </div>
       </div>
     </TodoProvider>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index cd1d41a81..cbe323b50 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,13 +3,6 @@ import { FilterType } from '../types/FilterType';
 import { useContext } from 'react';
 import { TodoContext } from '../context/TodoContext';
 
-// interface FooterProps {
-//   todos: Todo[];
-//   todosType: FilterType;
-//   handleTodosTypeChange: (todosType: FilterType) => void;
-//   handleDeleteTodo: (todoId: number) => void;
-// }
-
 export const Footer: React.FC = () => {
   const { todos, todosType, handleDeleteTodo, handleTodosTypeChange } =
     useContext(TodoContext)!;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e4743ae46..c607a7c74 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,12 +2,6 @@ import { useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { TodoContext } from '../context/TodoContext';
 
-// interface HeaderProps {
-//   todos: Todo[];
-//   handleAddTodo: (query: string) => void;
-//   handleToggling: (todosToToggle: Todo[]) => void;
-// }
-
 export const Header: React.FC = () => {
   const { todos, handleAddTodo, handleToggling } = useContext(TodoContext)!;
   const [query, setQuery] = useState('');
diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
index 3f2668059..a863e73cb 100644
--- a/src/components/TodoItem.tsx
+++ b/src/components/TodoItem.tsx
@@ -51,10 +51,8 @@ export const TodoItem: React.FC<TodoItemProps> = ({
   };
 
   const handleOnBlur = () => {
-    setTimeout(() => {
-      setIsEditing(false);
-      handleSubmit();
-    }, 100);
+    setIsEditing(false);
+    handleSubmit();
   };
 
   return (
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
index 90e92a7ec..067726e12 100644
--- a/src/components/TodoList.tsx
+++ b/src/components/TodoList.tsx
@@ -2,26 +2,13 @@ import { useContext } from 'react';
 import { TodoItem } from './TodoItem';
 import { TodoContext } from '../context/TodoContext';
 
-// interface TodoListProps {
-//   todos: Todo[];
-//   handleDeleteTodo: (todoId: number) => void;
-//   handleUpdateTodo: (updatedTodo: Todo) => void;
-// }
-
 export const TodoList: React.FC = () => {
   const { visibleTodos } = useContext(TodoContext)!;
 
   return (
     <section className="todoapp__main" data-cy="TodoList">
       {visibleTodos.map(todo => {
-        return (
-          <TodoItem
-            key={todo.id}
-            todo={todo}
-            // handleDeleteTodo={handleDeleteTodo}
-            // handleUpdateTodo={handleUpdateTodo}
-          />
-        );
+        return <TodoItem key={todo.id} todo={todo} />;
       })}
     </section>
   );
diff --git a/src/utils/todos.ts b/src/utils/todos.ts
index 26fc64e4a..682dfee8f 100644
--- a/src/utils/todos.ts
+++ b/src/utils/todos.ts
@@ -1,34 +1,36 @@
 import { Todo } from '../types/Todo';
 
 export const getAllTodos = (): Todo[] => {
-  const todos: Todo[] = [];
+  const items = localStorage.getItem('todos');
 
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
+  if (items) {
+    return JSON.parse(items);
+  } else {
+    localStorage.setItem('todos', JSON.stringify([]));
 
-    if (key) {
-      const item = localStorage.getItem(key);
-
-      if (item) {
-        const todo: Todo = JSON.parse(item);
-
-        todos.push(todo);
-      }
-    }
+    return [];
   }
-
-  return todos.sort((todo1, todo2) => todo1.id - todo2.id);
 };
 
 export const addTodo = (todo: Todo) => {
-  localStorage.setItem(`${todo.id}`, JSON.stringify(todo));
+  const todosArray = getAllTodos();
+
+  todosArray.push(todo);
+  localStorage.setItem('todos', JSON.stringify(todosArray));
 };
 
 export const deleteTodo = (todoId: number) => {
-  localStorage.removeItem(`${todoId}`);
+  const todosArray = getAllTodos();
+  const updatedTodos = todosArray.filter(todo => todo.id !== todoId);
+
+  localStorage.setItem('todos', JSON.stringify(updatedTodos));
 };
 
 export const updateTodo = (updatedTodo: Todo) => {
-  localStorage.removeItem(`${updatedTodo.id}`);
-  localStorage.setItem(`${updatedTodo.id}`, JSON.stringify(updatedTodo));
+  const todosArray = getAllTodos();
+  const updatedTodos = todosArray.map(todo =>
+    todo.id === updatedTodo.id ? updatedTodo : todo,
+  );
+
+  localStorage.setItem('todos', JSON.stringify(updatedTodos));
 };