last changes

mate-academy · Oct 11, 2023 · 082eb8d · 082eb8d
1 parent cd79040
commit 082eb8d
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 37 deletions.
diff --git a/src/components/HeaderTodo.tsx b/src/components/HeaderTodo.tsx
@@ -12,7 +12,6 @@ export const HeaderTodo = () => {
     addTodoContext,
     setError,
     isDisabled,
-    setEditedTodo,
     completeAllTodosContext,
     isLoading,
 
@@ -27,10 +26,16 @@ export const HeaderTodo = () => {
   }, [isLoading, todos.length]);
 
   const completeAllTodos = (todosHeader: Todo[]) => {
-    const allCompleted = todos.every(todo => todo.completed);
+    const haveNotCompleted = todosHeader.some(todo => !todo.completed);
 
-    todosHeader.map(todo => {
-      return completeAllTodosContext({ ...todo, completed: !allCompleted });
+    todosHeader.forEach(todo => {
+      if (haveNotCompleted && !todo.completed) {
+        completeAllTodosContext({ ...todo, completed: true });
+      }
+
+      if (!haveNotCompleted && todo.completed) {
+        completeAllTodosContext({ ...todo, completed: false });
+      }
     });
   };
 
@@ -53,7 +58,6 @@ export const HeaderTodo = () => {
         return;
       }
 
-      setEditedTodo(newTodo);
       addTodoContext(newTodo);
     }
   };

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
@@ -1,14 +1,18 @@
 import cn from 'classnames';
 import { useTodo } from '../providers/AppProvider';
 
-export const Loader = () => {
-  const { isLoading } = useTodo();
+type Props = {
+  todoId: number,
+};
+
+export const Loader = ({ todoId }: Props) => {
+  const { isLoading, editedTodo } = useTodo();
 
   return (
     <div
       data-cy="TodoLoader"
       className={cn('modal overlay', {
-        'is-active': isLoading,
+        'is-active': isLoading && editedTodo?.id === todoId,
       })}
     >
       <div className="modal-background has-background-white-ter" />

diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { FormEventHandler, KeyboardEventHandler } from 'react';
+import { FormEventHandler, KeyboardEventHandler, useState } from 'react';
 import { Todo } from '../types/Todo';
 import { Loader } from './Loader';
 import { useTodo } from '../providers/AppProvider';
@@ -16,9 +16,11 @@ export const TodoItem = ({ todo }: Props) => {
     updateTodoContext,
     editedTitleTodo,
   } = useTodo();
+  const [isEditing, setIsEditing] = useState(false);
 
   const handleDoubleClick = (): void => {
     setEditedTodo(todo);
+    setIsEditing(true);
   };
 
   const handleEditSubmit: FormEventHandler<HTMLFormElement> = (e) => {
@@ -34,13 +36,17 @@ export const TodoItem = ({ todo }: Props) => {
     if (event.key === 'Escape') {
       setEditedTodo(null);
 
+      setIsEditing(false);
+
       return;
     }
 
     if (event.key === 'Enter') {
       if (editedTodo?.title.trim() === '') {
         removeTodoContext(todo.id);
       }
+
+      setIsEditing(false);
     }
   };
 
@@ -49,15 +55,16 @@ export const TodoItem = ({ todo }: Props) => {
       removeTodoContext(todo.id);
     } else if (editedTodo?.title.trim() === todo.title) {
       setEditedTodo(null);
-      return;
     } else {
       if (!editedTodo) {
         return;
       }
 
       editedTitleTodo(editedTodo);
     }
-  }
+
+    setIsEditing(false);
+  };
 
   return (
     <>
@@ -79,33 +86,41 @@ export const TodoItem = ({ todo }: Props) => {
 
           />
         </label>
-        {editedTodo?.id === todo.id
+        {isEditing
           ? (
             <form onSubmit={handleEditSubmit}>
               <input
                 data-cy="TodoTitleField"
                 type="text"
                 className="todo__title-field"
-                placeholder='Empty todo will be deleted'
-                value={editedTodo.title}
+                placeholder="Empty todo will be deleted"
+                value={editedTodo?.title}
                 onChange={(e) => {
                   setEditedTodo({ ...todo, title: e.target.value });
                 }}
                 onKeyDown={handleEdit}
                 onBlur={handleBlur}
+                /* eslint-disable-next-line */
+                autoFocus
               />
             </form>
           ) : (
+            /* eslint-disable-next-line */
             <span
               data-cy="TodoTitle"
               className="todo__title"
               onDoubleClick={handleDoubleClick}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  setIsEditing(!isEditing);
+                }
+              }}
             >
               {todo.title}
             </span>
           )}
 
-        {!editedTodo
+        {!isEditing
         && (
           <button
             type="button"
@@ -120,7 +135,7 @@ export const TodoItem = ({ todo }: Props) => {
           </button>
         )}
 
-        <Loader />
+        <Loader todoId={todo.id} />
       </div>
     </>
   );

diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
@@ -11,7 +11,9 @@ export const TodoList = () => {
           key={todo.id}
           todo={todo}
         />
+
       ))}
+
     </section>
   );
 };
diff --git a/src/providers/AppProvider.tsx b/src/providers/AppProvider.tsx
@@ -113,6 +113,8 @@ export const AppProvider = ({ children }: Props) => {
       setError(getError('updateError'));
     }
 
+    setIsLoading(true);
+    setEditedTodo(todo);
     updateTodos(todo)
       .then(() => {
         setTodos(prev => {
@@ -130,6 +132,7 @@ export const AppProvider = ({ children }: Props) => {
       })
       .catch(() => setError(getError('updateError')))
       .finally(() => {
+        setIsLoading(false);
         setEditedTodo(null);
       });
   }, []);
@@ -140,15 +143,13 @@ export const AppProvider = ({ children }: Props) => {
     }
 
     setIsLoading(true);
+    setEditedTodo(todo);
     updateTodos(todo)
-      .then(() => {
+      .then((data) => {
         setTodos(
           (prev: Todo[]) => {
-            if (prev.some(v => !v.completed)) {
-              return prev.map(v => ({ ...v, completed: true }));
-            }
-
-            return prev.map(v => ({ ...v, completed: false }));
+            return [...prev.filter(v => v.id !== data.id),
+              { ...data, completed: data.completed }];
           },
         );
       })
@@ -165,26 +166,28 @@ export const AppProvider = ({ children }: Props) => {
     }
 
     setIsLoading(true);
-    setTodos(prev => {
-      const copyTodos = [...prev];
-      const currentTodo = copyTodos.find(v => v.id === todo?.id);
-
-      if (!currentTodo) {
-        return [];
-      }
+    setEditedTodo(todo);
+    updateTodos(todo).then(() => {
+      setTodos(prev => {
+        const copyTodos = [...prev];
+        const currentTodo = copyTodos.find(v => v.id === todo?.id);
 
-      currentTodo.title = todo.title.trim();
+        if (!currentTodo) {
+          return [];
+        }
 
-      return copyTodos;
-    });
+        currentTodo.title = todo.title.trim();
 
-    updateTodos(todo)
-      .catch(() => setError(getError('updateError')))
+        return copyTodos;
+      });
+    })
+      .catch(() => {
+        setError(getError('updateError'));
+      })
       .finally(() => {
         setIsLoading(false);
-        setEditedTodo(null)
+        setEditedTodo(null);
       });
-
   }, []);
 
   return (

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -2,7 +2,7 @@ import { Todo } from '../types/Todo';
 
 export type Filter = 'completed' | 'all' | 'active';
 
-export const filterTodos = (todos: Todo[], filterBy: Filter): Todo[] => {
+export const filterTodos = (todos: Todo[], filterBy: Filter) => {
   switch (filterBy) {
     case 'completed':
       return todos.filter(v => v.completed === true);