From 30f65bdbdce27734c8b6c12a2c8711cfe8b6f0c3 Mon Sep 17 00:00:00 2001
From: vanvalera <115824927+vanvalera@users.noreply.github.com>
Date: Thu, 3 Oct 2024 09:43:33 +0300
Subject: [PATCH] task done?&)

---
 src/components/header.tsx | 25 ++-----------------------
 src/components/state.tsx  | 30 +++++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index f012970f6..143e7d76a 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,11 +1,9 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext } from 'react';
 import { MyContext } from './state';
 import { Todo } from '../Types/Todo';
 
 export const Header = () => {
-  const { todos, setTodos, title, setTitle } = useContext(MyContext);
-
-  const inputRef = useRef<HTMLInputElement>(null);
+  const { todos, setTodos, title, setTitle, inputRef } = useContext(MyContext);
 
   const isAllCompleted = todos.every((todo: Todo) => todo.completed);
 
@@ -27,25 +25,6 @@ export const Header = () => {
     setTitle('');
   }
 
-  useEffect(() => {
-    const savedTodos = localStorage.getItem('todos');
-
-    if (savedTodos) {
-      setTodos(JSON.parse(savedTodos));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    localStorage.setItem('todos', JSON.stringify(todos));
-  }, [todos]);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [todos]);
-
   return (
     <header className="todoapp__header">
       {todos.length > 0 ? (
diff --git a/src/components/state.tsx b/src/components/state.tsx
index 0d45ba54e..880f685a2 100644
--- a/src/components/state.tsx
+++ b/src/components/state.tsx
@@ -1,5 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState, createContext, ReactNode } from 'react';
+import React, {
+  useState,
+  createContext,
+  ReactNode,
+  useEffect,
+  useRef,
+} from 'react';
 import { Todo } from '../Types/Todo';
 import { Filter } from '../Types/Filter';
 
@@ -19,6 +25,27 @@ export const MyProvider = ({ children }: MyProviderProps) => {
     setTodos(currentTodos => currentTodos.filter(todo => todo.id !== id));
   }
 
+  useEffect(() => {
+    const savedTodos = localStorage.getItem('todos');
+
+    if (savedTodos) {
+      setTodos(JSON.parse(savedTodos));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('todos', JSON.stringify(todos));
+  }, [todos]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [todos]);
+
   return (
     <MyContext.Provider
       value={{
@@ -31,6 +58,7 @@ export const MyProvider = ({ children }: MyProviderProps) => {
         editingTodoId,
         setEditingTodoId,
         deleteTodo,
+        inputRef,
       }}
     >
       {children}