From fc3c9685b8b293a5fb3cd8fcfa202bbebee6af6c Mon Sep 17 00:00:00 2001
From: Maksym Mohyla <greenparksquad@gmail.com>
Date: Thu, 7 Nov 2024 08:42:01 +0200
Subject: [PATCH] fixed bugs

---
 src/App.tsx                                   | 24 ++++++++++---------
 src/components/TodoList/TodoItem/TodoItem.tsx |  3 +--
 src/index.tsx                                 |  7 +++++-
 src/services/TodoHooks.ts                     |  1 +
 src/services/TodosContext&Provider.tsx        |  4 ++--
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 98cf468d4..ccc904c40 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,26 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Header } from './components/Header';
 import { TodoList } from './components/TodoList';
 import { Footer } from './components/Footer';
-import { TodosContext, TodosProvider } from './services/TodosContext&Provider';
+import { TodosContext } from './services/TodosContext&Provider';
 
 export const App: React.FC = () => {
   const { todos } = useContext(TodosContext);
 
+  useEffect(() => {
+    console.log(todos);
+  }, [todos]);
+
   return (
-    <TodosProvider>
-      <div className="todoapp">
-        <h1 className="todoapp__title">todos</h1>
-        <Header />
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
+      <Header />
 
-        <div className="todoapp__content">
-          <TodoList />
+      <div className="todoapp__content">
+        <TodoList />
 
-          {!!todos.length && <Footer />}
-        </div>
+        {!!todos.length && <Footer />}
       </div>
-    </TodosProvider>
+    </div>
   );
 };
diff --git a/src/components/TodoList/TodoItem/TodoItem.tsx b/src/components/TodoList/TodoItem/TodoItem.tsx
index 17b310871..74a105b19 100644
--- a/src/components/TodoList/TodoItem/TodoItem.tsx
+++ b/src/components/TodoList/TodoItem/TodoItem.tsx
@@ -69,11 +69,10 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
           type="checkbox"
           className="todo__status"
           checked={todo.completed}
-          onClick={() => toggleTodo(todo.id)}
+          onChange={() => toggleTodo(todo.id)}
         />
       </label>
 
-      {/* This form is shown instead of the title and remove button upon editing todo*/}
       {selectedTodo === todo ? (
         <form
           onSubmit={ev => {
diff --git a/src/index.tsx b/src/index.tsx
index b2c38a17a..09bc4d81b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,7 +3,12 @@ import { createRoot } from 'react-dom/client';
 import './styles/index.scss';
 
 import { App } from './App';
+import { TodosProvider } from './services/TodosContext&Provider';
 
 const container = document.getElementById('root') as HTMLDivElement;
 
-createRoot(container).render(<App />);
+createRoot(container).render(
+  <TodosProvider>
+    <App />
+  </TodosProvider>,
+);
diff --git a/src/services/TodoHooks.ts b/src/services/TodoHooks.ts
index f9c4bd3c0..d3655a409 100644
--- a/src/services/TodoHooks.ts
+++ b/src/services/TodoHooks.ts
@@ -52,6 +52,7 @@ export const useTodo = () => {
 
   return {
     todos,
+    setTodos,
     addTodo,
     removeTodo,
     clearCompleted,
diff --git a/src/services/TodosContext&Provider.tsx b/src/services/TodosContext&Provider.tsx
index c4d27e109..b70060f2b 100644
--- a/src/services/TodosContext&Provider.tsx
+++ b/src/services/TodosContext&Provider.tsx
@@ -9,10 +9,10 @@ type TodosContextType = {
   setSelectedFilter: (filter: TodoFilter) => void;
 };
 
-const storedTodos = localStorage.getItem('todos');
+export const storedTodos = localStorage.getItem('todos');
 
 export const TodosContext = React.createContext<TodosContextType>({
-  todos: JSON.parse(storedTodos),
+  todos: storedTodos ? JSON.parse(storedTodos) : [],
   setTodos: () => {},
   selectedFilter: TodoFilter.All,
   setSelectedFilter: () => {},