add mentor's commits

mate-academy · Dec 23, 2024 · c9df513 · c9df513
1 parent 2c9669c
commit c9df513
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 32 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,7 +18,7 @@ export const App: React.FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
   const [activeStatus, setActiveStatus] = useState(Status.All);
   const [tempTodo, setTempTodo] = useState<Todo | null>(null);
-  const [loadingTodos, setLoadingTodos] = useState<number[]>([]);
+  const [loadingTodoIds, setLoadingTodoIds] = useState<number[]>([]);
   const [errorMessage, setErrorMessage] = useState<ErrorMessage>(
     ErrorMessage.Default,
   );
@@ -62,33 +62,30 @@ export const App: React.FC = () => {
   };
 
   const onUpdateTodo = (todoToUpdate: Todo) => {
-    setLoadingTodos(prevTodos => [...prevTodos, todoToUpdate.id]);
+    setLoadingTodoIds(prevTodos => [...prevTodos, todoToUpdate.id]);
 
     return clientTodo
       .updateTodo(todoToUpdate)
       .then(updatedTodo => {
         setTodos(currentTodos => {
-          const newTodos = [...currentTodos];
-          const index = newTodos.findIndex(todo => todo.id === updatedTodo.id);
-
-          newTodos.splice(index, 1, updatedTodo);
-
-          return newTodos;
+          return currentTodos.map(todo =>
+            todo.id === updatedTodo.id ? updatedTodo : todo,
+          );
         });
       })
       .catch(err => {
         setErrorMessage(ErrorMessage.UnableToUpdate);
         throw err;
       })
       .finally(() => {
-        setLoadingTodos(prevTodos =>
+        setLoadingTodoIds(prevTodos =>
           prevTodos.filter(id => todoToUpdate.id !== id),
         );
       });
   };
 
   const onDeleteTodo = (todoId: number) => {
-    setLoadingTodos(prevTodos => [...prevTodos, todoId]);
+    setLoadingTodoIds(prevTodos => [...prevTodos, todoId]);
 
     clientTodo
       .deleteTodo(todoId)
@@ -97,12 +94,11 @@ export const App: React.FC = () => {
           currentTodos.filter(todo => todo.id !== todoId),
         ),
       )
-      .catch(error => {
+      .catch(() => {
         setErrorMessage(ErrorMessage.UnableToDelete);
-        throw error;
       })
       .finally(() =>
-        setLoadingTodos(prevTodos => prevTodos.filter(id => todoId !== id)),
+        setLoadingTodoIds(prevTodos => prevTodos.filter(id => todoId !== id)),
       );
   };
 
@@ -126,9 +122,8 @@ export const App: React.FC = () => {
     clientTodo
       .getTodos()
       .then(data => setTodos(data))
-      .catch(error => {
+      .catch(() => {
         setErrorMessage(ErrorMessage.UnableToLoad);
-        throw error;
       });
   }, []);
 
@@ -154,7 +149,7 @@ export const App: React.FC = () => {
         <TodoList
           tempTodo={tempTodo}
           filteredTodos={filteredTodos}
-          loadingTodos={loadingTodos}
+          loadingTodoIds={loadingTodoIds}
           onDeleteTodo={onDeleteTodo}
           onUpdateTodo={onUpdateTodo}
         />

diff --git a/src/components/ErrorNotification.tsx b/src/components/ErrorNotification.tsx
@@ -20,7 +20,7 @@ export const ErrorNotification: React.FC<Props> = props => {
     }, 3000);
 
     return () => clearTimeout(timer);
-  }, [error]);
+  }, [error, setErrorMessage]);
 
   return (
     <div

diff --git a/src/components/TodoHeader.tsx b/src/components/TodoHeader.tsx
@@ -45,9 +45,7 @@ export const TodoHeader: React.FC<Props> = props => {
       return;
     }
 
-    return onAddTodo(title.trim())
-      .then(() => setTitle(''))
-      .catch(() => {});
+    onAddTodo(title.trim()).then(() => setTitle(''));
   };
 
   return (

diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
@@ -21,28 +21,26 @@ export const TodoItem: React.FC<Props> = props => {
   const updateRef = useRef<HTMLInputElement>(null);
 
   const handleUpdate = () => {
-    const normaliseTitle = updateTitle.trim();
-
     if (todo.title === updateTitle) {
       setIsUpdate(false);
 
       return;
     }
 
-    if (!normaliseTitle) {
+    if (!updateTitle) {
       onDeleteTodo(todo.id);
+
+      return;
     }
 
     const updatedTodo: Todo = {
       id: todo.id,
       completed: todo.completed,
-      title: normaliseTitle,
+      title: updateTitle.trim(),
       userId: USER_ID,
     };
 
-    onUpdateTodo(updatedTodo)
-      .then(() => setIsUpdate(false))
-      .catch(() => {});
+    onUpdateTodo(updatedTodo).then(() => setIsUpdate(false));
   };
 
   const handleEscape = (event: React.KeyboardEvent<HTMLInputElement>) => {

diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
@@ -5,14 +5,19 @@ import { TodoItem } from './TodoItem';
 type Props = {
   tempTodo: Todo | null;
   filteredTodos: Todo[];
-  loadingTodos: number[];
+  loadingTodoIds: number[];
   onDeleteTodo: (todoId: number) => void;
   onUpdateTodo: (todoToUpdate: Todo) => Promise<void>;
 };
 
 export const TodoList: React.FC<Props> = props => {
-  const { filteredTodos, tempTodo, loadingTodos, onDeleteTodo, onUpdateTodo } =
-    props;
+  const {
+    filteredTodos,
+    tempTodo,
+    loadingTodoIds,
+    onDeleteTodo,
+    onUpdateTodo,
+  } = props;
 
   return (
     <section className="todoapp__main" data-cy="TodoList">
@@ -22,7 +27,7 @@ export const TodoList: React.FC<Props> = props => {
             <TodoItem
               key={todo.id}
               todo={todo}
-              isLoading={loadingTodos.includes(todo.id)}
+              isLoading={loadingTodoIds.includes(todo.id)}
               onDeleteTodo={onDeleteTodo}
               onUpdateTodo={onUpdateTodo}
             />
@@ -33,7 +38,7 @@ export const TodoList: React.FC<Props> = props => {
           <CSSTransition key={0} timeout={300} classNames="temp-item">
             <TodoItem
               todo={tempTodo}
-              isLoading={loadingTodos.includes(tempTodo.id)}
+              isLoading={loadingTodoIds.includes(tempTodo.id)}
               onDeleteTodo={() => {}}
               onUpdateTodo={onUpdateTodo}
             />