fixed esc bug

mate-academy · Oct 30, 2024 · 6bfe432 · 6bfe432
1 parent 38fa680
commit 6bfe432
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 66 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import {
   getTodos,
   addTodo,
@@ -14,21 +14,33 @@ import { ErrorNotification } from './components/ErrorNotification';
 import { FilterStates, ErrorMessages } from './types/enums';
 import { TodoItem } from './components/TodoItem';
 
-export const App: React.FC = () => {
+export const App: FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<ErrorMessages>(ErrorMessages.DEFAULT);
   const [filter, setFilter] = useState(FilterStates.ALL);
   const [tempTodo, setTempTodo] = useState<Todo | null>(null);
   const [title, setTitle] = useState('');
   const [isAdding, setIsAdding] = useState(false);
   const [isEditingId, setIsEditingId] = useState<number | null>(null);
 
+  const trimmedTitle = title.trim();
+
+  const fetchTodos = async () => {
+    try {
+      const data = await getTodos();
+
+      setTodos(data);
+    } catch (err) {
+      setError(ErrorMessages.LOAD_TODOS);
+      const timer = setTimeout(() => setError(ErrorMessages.DEFAULT), 3000);
+
+      return () => clearTimeout(timer);
+    }
+  };
+
   const handleAddTodo = useCallback(async (): Promise<void> => {
-    if (title.trim() === '') {
+    if (trimmedTitle === '') {
       setError(ErrorMessages.NAMING_TODOS);
-      setTimeout(() => setError(null), 3000);
-
-      return;
     }
 
     setIsAdding(true);
@@ -43,15 +55,14 @@ export const App: React.FC = () => {
 
       setTempTodo(newTempTodo);
 
-      const newTodo = await addTodo(title.trim());
+      const newTodo = await addTodo(trimmedTitle);
 
       setTodos(prevTodos => [...prevTodos, newTodo]);
       setTempTodo(null);
       setTitle('');
     } catch {
       setError(ErrorMessages.ADDING_TODOS);
       setTempTodo(null);
-      setTimeout(() => setError(null), 3000);
     } finally {
       setIsAdding(false);
       setTimeout(() => {
@@ -70,7 +81,6 @@ export const App: React.FC = () => {
         setTodos(prevTodos => prevTodos.filter(todo => todo.id !== todoId));
       } catch {
         setError(ErrorMessages.DELETING_TODOS);
-        setTimeout(() => setError(null), 3000);
       } finally {
         const input =
           document.querySelector<HTMLInputElement>('.todoapp__new-todo');
@@ -92,7 +102,6 @@ export const App: React.FC = () => {
         );
       } catch {
         setError(ErrorMessages.UPDATE_TODOS);
-        setTimeout(() => setError(null), 3000);
       }
     },
     [],
@@ -101,25 +110,25 @@ export const App: React.FC = () => {
   const handleUpdateTodoTitle = useCallback(
     async (todoId: number, newTitle: string): Promise<void> => {
       const existingTodo = todos.find(todo => todo.id === todoId);
+      const newTitleTrimmed = newTitle.trim();
 
       if (!existingTodo) {
         return;
       }
 
-      if (newTitle.trim() === existingTodo.title) {
+      if (newTitleTrimmed === existingTodo.title) {
         setIsEditingId(null);
 
         return;
       }
 
-      if (newTitle.trim() === '') {
+      if (newTitleTrimmed === '') {
         try {
           await deleteTodo(todoId);
           setTodos(prevTodos => prevTodos.filter(todo => todo.id !== todoId));
           setIsEditingId(null);
         } catch {
           setError(ErrorMessages.DELETING_TODOS);
-          setTimeout(() => setError(null), 3000);
         }
 
         return;
@@ -135,7 +144,6 @@ export const App: React.FC = () => {
         setIsEditingId(null);
       } catch {
         setError(ErrorMessages.UPDATE_TODOS);
-        setTimeout(() => setError(null), 3000);
       }
     },
     [todos],
@@ -180,7 +188,9 @@ export const App: React.FC = () => {
       setTodos(updatedTodos);
     } catch {
       setError(ErrorMessages.UPDATE_TODOS);
-      setTimeout(() => setError(null), 3000);
+      const timer = setTimeout(() => setError(ErrorMessages.DEFAULT), 3000);
+
+      return () => clearTimeout(timer);
     }
   }, [todos, allCompleted]);
 
@@ -197,46 +207,31 @@ export const App: React.FC = () => {
       );
 
       if (hasErrors) {
-        setError('Unable to delete some completed todos');
-        setTimeout(() => {
-          setError(null);
-        }, 3000);
+        setError(ErrorMessages.DELETING_SOME_TODOS);
       }
     } catch {
-      setError('Unable to clear completed todos');
-      setTimeout(() => {
-        setError(null);
-      }, 3000);
+      setError(ErrorMessages.CLEAR_COMPLETED_TODOS);
     }
   }, [handleDeleteTodo, todos]);
 
   const handleHideError = () => {
-    setError(null);
-  };
-
-  const handleCancelEdit = (event: React.KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      setIsEditingId(null);
-    }
+    setError(ErrorMessages.DEFAULT);
   };
 
   useEffect(() => {
-    const fetchTodos = async () => {
-      try {
-        const data = await getTodos();
-
-        setTodos(data);
-      } catch (err) {
-        setError(ErrorMessages.LOAD_TODOS);
-        const timer = setTimeout(() => setError(null), 3000);
-
-        return () => clearTimeout(timer);
-      }
-    };
-
     fetchTodos();
   }, []);
 
+  useEffect(() => {
+    if (error) {
+      const timeout = setTimeout(() => {
+        setError(ErrorMessages.DEFAULT);
+      }, 3000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [error, ErrorMessages]);
+
   return (
     <div className="todoapp">
       <h1 className="todoapp__title">todos</h1>
@@ -262,8 +257,9 @@ export const App: React.FC = () => {
               onUpdateTitle={handleUpdateTodoTitle}
               setError={setError}
               isEditing={isEditingId === todo.id}
+              setIsEditing={setIsEditingId}
               onDoubleClick={() => handleDoubleClick(todo.id)}
-              onCancelEdit={event => handleCancelEdit(event)}
+              error={error}
             />
           ))}
 
@@ -275,6 +271,7 @@ export const App: React.FC = () => {
             onUpdateTitle={handleUpdateTodoTitle}
             setError={setError}
             isAdding={isAdding}
+            error={error}
           />
         )}
 

diff --git a/src/components/ErrorNotification.tsx b/src/components/ErrorNotification.tsx
@@ -1,12 +1,13 @@
-import React from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
+import { ErrorMessages } from '../types/enums';
 
 interface ErrorNotificationProps {
-  error: string | null;
+  error: ErrorMessages;
   onHideError: () => void;
 }
 
-export const ErrorNotification: React.FC<ErrorNotificationProps> = ({
+export const ErrorNotification: FC<ErrorNotificationProps> = ({
   error,
   onHideError,
 }) => {

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { FilterStates } from '../types/enums';
 import { Todo } from '../types/Todo';
 
@@ -9,22 +9,23 @@ interface FooterProps {
   onClearCompleted: () => void;
 }
 
-export const Footer: React.FC<FooterProps> = ({
+export const Footer: FC<FooterProps> = ({
   todos,
   filter,
   setFilter,
   onClearCompleted,
 }) => {
   const activeTodos = todos.filter(todo => !todo.completed).length;
+  const filterValues = Object.values(FilterStates);
 
   return (
     <footer className="todoapp__footer" data-cy="Footer">
       <span className="todo-count" data-cy="TodosCounter">
-        {`${activeTodos} items left`}
+        {activeTodos} items left
       </span>
 
       <nav className="filter" data-cy="Filter">
-        {Object.values(FilterStates).map(state => (
+        {filterValues.map(state => (
           <a
             key={state}
             href={`#/${state}`}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 import { ErrorMessages } from '../types/enums';
 
@@ -10,10 +10,10 @@ interface HeaderProps {
   setTitle: (value: string) => void;
   todoCount: number;
   isAdding: boolean;
-  setError: (message: string | null) => void;
+  setError: (message: ErrorMessages) => void;
 }
 
-export const Header: React.FC<HeaderProps> = ({
+export const Header: FC<HeaderProps> = ({
   allCompleted,
   onAddTodo,
   onToggleAllTodos,
@@ -29,7 +29,9 @@ export const Header: React.FC<HeaderProps> = ({
       await onAddTodo(title.trim());
     } catch (error) {
       setError(ErrorMessages.ADDING_TODOS);
-      setTimeout(() => setError(null), 3000);
+      const timer = setTimeout(() => setError(ErrorMessages.DEFAULT), 3000);
+
+      return () => clearTimeout(timer);
     }
   };
 

diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
@@ -1,22 +1,24 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import { ErrorMessages } from '../types/enums';
 import classNames from 'classnames';
 import { Todo } from '../types/Todo';
+import cn from 'classnames';
 
 interface TodoItemProps {
   todo: Todo;
   onDelete: (id: number) => Promise<void>;
   onToggleStatus: (id: number, completed: boolean) => Promise<void>;
   onUpdateTitle: (id: number, title: string) => Promise<void>;
-  setError: (message: string | null) => void;
+  setError: (message: ErrorMessages) => void;
   isAdding?: boolean;
   isEditing?: boolean;
+  setIsEditing?: (isEditing: number | null) => void;
   onDoubleClick?: () => void;
-  onCancelEdit?: (event: React.KeyboardEvent) => void;
+  error: ErrorMessages;
 }
 
-export const TodoItem: React.FC<TodoItemProps> = ({
+export const TodoItem: FC<TodoItemProps> = ({
   todo,
   onDelete,
   onToggleStatus,
@@ -25,7 +27,8 @@ export const TodoItem: React.FC<TodoItemProps> = ({
   isAdding,
   isEditing,
   onDoubleClick,
-  onCancelEdit,
+  error,
+  setIsEditing,
 }) => {
   const [newTitle, setNewTitle] = useState(todo.title);
   const [isUpdating, setIsUpdating] = useState(false);
@@ -39,7 +42,6 @@ export const TodoItem: React.FC<TodoItemProps> = ({
       await onDelete(todo.id);
     } catch {
       setError(ErrorMessages.DELETING_TODOS);
-      setTimeout(() => setError(null), 3000);
     } finally {
       setIsDeletingItem(false);
     }
@@ -51,7 +53,6 @@ export const TodoItem: React.FC<TodoItemProps> = ({
       await onToggleStatus(todo.id, !todo.completed);
     } catch {
       setError(ErrorMessages.UPDATE_TODOS);
-      setTimeout(() => setError(null), 3000);
     } finally {
       setIsUpdating(false);
     }
@@ -65,18 +66,36 @@ export const TodoItem: React.FC<TodoItemProps> = ({
       await onUpdateTitle(todo.id, newTitle.trim());
     } catch {
       setError(ErrorMessages.UPDATE_TODOS);
-      setTimeout(() => setError(null), 3000);
     } finally {
       setIsUpdating(false);
     }
   };
 
+  const handleCancelEdit = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      handleEditSubmit(event);
+      if (setIsEditing) {
+        setIsEditing(null);
+      }
+    }
+  };
+
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     handleEditSubmit(event);
   };
 
+  useEffect(() => {
+    if (error) {
+      const timeout = setTimeout(() => {
+        setError(ErrorMessages.DEFAULT);
+      }, 3000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [error, ErrorMessages]);
+
   return (
-    <div data-cy="Todo" className={`todo ${todo.completed ? 'completed' : ''}`}>
+    <div data-cy="Todo" className={cn('todo', { completed: todo.completed })}>
       <label className="todo__status-label">
         <input
           data-cy="TodoStatus"
@@ -96,7 +115,7 @@ export const TodoItem: React.FC<TodoItemProps> = ({
             value={newTitle}
             className="todo__title-field"
             onChange={e => setNewTitle(e.target.value)}
-            onKeyDown={onCancelEdit}
+            onKeyDown={handleCancelEdit}
             onBlur={handleBlur}
             disabled={isUpdating}
             autoFocus