add solution

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>

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)!;

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('');

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 (

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>
   );

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));
 };