From 9d404a7b9fffc38c89630d0083523237f6eb0721 Mon Sep 17 00:00:00 2001
From: Anna Maksai <annamaksai99@gmail.com>
Date: Tue, 22 Oct 2024 09:11:53 +0300
Subject: [PATCH] fix: error hook, clear timeout, disable linter warn for some
 deps

---
 src/App.tsx                          | 12 +++---------
 src/components/TodoItem/TodoItem.tsx |  1 +
 src/hooks/index.ts                   |  1 +
 src/hooks/useError.ts                | 20 ++++++++++++++++++++
 4 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 src/hooks/index.ts
 create mode 100644 src/hooks/useError.ts

diff --git a/src/App.tsx b/src/App.tsx
index 797e773ed..5ba53aa4d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,10 +8,10 @@ import {
   updateTodo,
 } from './api/todos';
 import { FilterOption, Todo, Error } from './types';
+import { useError } from './hooks';
 
 export const App: React.FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
-  const [error, setError] = useState<Error>(Error.DEFAULT);
   const [filterOption, setFilterOption] = useState<FilterOption>(
     FilterOption.all,
   );
@@ -21,6 +21,7 @@ export const App: React.FC = () => {
   const [loadingTodoIds, setLoadingTodoIds] = useState<number[]>([]);
   const [editingTodoId, setEditingTodoId] = useState<number | null>(null);
   const [focusHeader, setFocusHeader] = useState(true);
+  const { error, handleError, handleResetError } = useError();
 
   const todosAmount = useMemo(() => todos.length, [todos]);
   const uncompletedTodosAmount = useMemo(
@@ -28,14 +29,6 @@ export const App: React.FC = () => {
     [todos],
   );
 
-  const handleResetError = () => setError(Error.DEFAULT);
-
-  const handleError = (message: Error) => {
-    setError(message);
-
-    setTimeout(handleResetError, 3000);
-  };
-
   const handleSubmitTodo = (title: string) => {
     if (!title) {
       handleError(Error.EMPTY_TITLE);
@@ -170,6 +163,7 @@ export const App: React.FC = () => {
       .catch(() => {
         handleError(Error.LOADING_TODOS);
       });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
index 962efcad4..665b66508 100644
--- a/src/components/TodoItem/TodoItem.tsx
+++ b/src/components/TodoItem/TodoItem.tsx
@@ -56,6 +56,7 @@ export const TodoItem: React.FC<Props> = ({
     return () => {
       document.removeEventListener('keyup', handleReverseUpdate);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEditing]);
 
   return (
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 000000000..982991ec1
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1 @@
+export { useError } from './useError';
diff --git a/src/hooks/useError.ts b/src/hooks/useError.ts
new file mode 100644
index 000000000..f00d1d864
--- /dev/null
+++ b/src/hooks/useError.ts
@@ -0,0 +1,20 @@
+import { useRef, useState } from 'react';
+import { Error } from '../types';
+
+export const useError = () => {
+  const [error, setError] = useState<Error>(Error.DEFAULT);
+
+  const errorTimeoutId = useRef<NodeJS.Timeout>();
+
+  const handleResetError = () => setError(Error.DEFAULT);
+
+  const handleError = (message: Error) => {
+    setError(message);
+
+    clearTimeout(errorTimeoutId.current);
+
+    errorTimeoutId.current = setTimeout(handleResetError, 3000);
+  };
+
+  return { error, handleError, handleResetError };
+};