added one toggle change

mate-academy · Dec 23, 2024 · 3a45d19 · 3a45d19
1 parent 10f8906
commit 3a45d19
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 28 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -31,6 +31,9 @@ export const App: React.FC = () => {
     return <UserWarning />;
   }
 
+  useEffect(() => {
+console.log(updatingTodos)  }, [updatingTodos]);
+
   useEffect(() => {
     inputRef.current?.focus();
   }, []);
@@ -114,6 +117,7 @@ export const App: React.FC = () => {
     try {
       await deleteTodo(id);
       setTodosData((prevState)=>prevState.filter((todo) => todo.id !== id));
+
     } catch (err) {
       setError('Delete');
     } finally {
@@ -178,45 +182,68 @@ export const App: React.FC = () => {
     }
   };
 
-  const handleEditTodoTitle = async (id: number) => {
+  const toggleTodo = async (id: number) => {
     const todo = todosData.find(todo => todo.id === id);
     if (!todo) return;
 
+    const updatedTodo = { ...todo, completed: !todo.completed };
+
+    setUpdatingTodos(prev => [...prev, id]);
+
+    try {
+      await changeTodoCompleted({ id, completed: updatedTodo.completed });
+
+      setTodosData(prevTodos =>
+        prevTodos.map(t => (t.id === id ? updatedTodo : t))
+      );
+    } catch {
+      setError('Update');
+    } finally {
+      setUpdatingTodos(prev => prev.filter(todoId => todoId !== id));
+    }
+  };
+
+  const handleEditTodoTitle = async (id: number) => {
+    const todo = todosData.find(todo => todo.id === id);
+    if (!todo) return;
     if (tempTitle.trim() === '') {
       await handleDeleteOneTodo(id);
     } else if (tempTitle.trim() === todo.title) {
       setUpdatingTodoId(null);
       return;
     }
-
     setIsServerRequest(true)
-      try {
-        await changeTodoTitle({ id, title: tempTitle.trim() });
-        setTodosData(prevTodos =>
-          prevTodos.map(t => (t.id === id ? { ...t, title: tempTitle.trim() } : t))
-        );
-      } catch {
-        setError('Update');
-      } finally {
+    try {
+      await changeTodoTitle({ id, title: tempTitle.trim() });
+      setTodosData(prevTodos =>
+        prevTodos.map(t => (t.id === id ? { ...t, title: tempTitle.trim() } : t))
+      );
+    } catch {
+      setError('Update');
+    } finally {
       setIsServerRequest(false)
-        setUpdatingTodoId(null);
-      }
+      setUpdatingTodoId(null);
+    }
   };
 
 
+
+
   return (
     <div className="todoapp">
       <h1 className="todoapp__title">todos</h1>
 
       <div className="todoapp__content">
         <header className="todoapp__header">
           {/* this button should have `active` class only if all todos are completed */}
-          <button
+          {todosData.length>0 && (<button
             type="button"
-            className={classNames('todoapp__toggle-all', {'active':todosData.filter(todo => todo.completed).length === todosData.length})}
+            className={classNames('todoapp__toggle-all', { 'active': todosData.filter(todo => todo.completed).length === todosData.length })}
             data-cy="ToggleAllButton"
-            onClick={()=>{handleToggleTodos()}}
-          />
+            onClick={() => {
+              handleToggleTodos();
+            }}
+          />)}
 
           {/* Add a todo on form submit */}
           <form onSubmit={handleSubmit}>
@@ -246,6 +273,8 @@ export const App: React.FC = () => {
             onDoubleClick={handleEditTodoTitle}
             setUpdatingTodoId={setUpdatingTodoId}
             serverRequest={isServerRequest}
+            toggleTodo={toggleTodo}
+
           />
         </section>
         {/*

diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
@@ -12,6 +12,7 @@ type Props = {
   onDoubleClick: (id: number) => void;
   setUpdatingTodoId: (newId: number | null) => void;
   isServerRequest: boolean;
+  toggleTodo: (id: number) => void;
 };
 
 export const TodoItem: React.FC<Props> = ({
@@ -25,6 +26,7 @@ export const TodoItem: React.FC<Props> = ({
   onDoubleClick,
   setUpdatingTodoId,
   isServerRequest,
+  toggleTodo,
 }) => {
   if (!todo) {
     return null;
@@ -51,12 +53,14 @@ export const TodoItem: React.FC<Props> = ({
 
   return (
     <div key={id} data-cy="Todo" className={classNames('todo', { completed })}>
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label className="todo__status-label">
         <input
           data-cy="TodoStatus"
           type="checkbox"
           className="todo__status"
           checked={completed}
+          onChange={() => toggleTodo(id)}
           readOnly
         />
       </label>
@@ -105,7 +109,8 @@ export const TodoItem: React.FC<Props> = ({
       <div
         data-cy="TodoLoader"
         className={classNames('modal overlay', {
-          'is-active': isDeleting || isUpdating || isServerRequest,
+          'is-active':
+            isDeleting || isUpdating || (isUpdatingTitle && isServerRequest),
         })}
       >
         <div className="modal-background has-background-white-ter" />

diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
@@ -1,19 +1,20 @@
-import { TempTodoItem } from '../TempTodoItem/TempTodoItem';
-import { TodoItem } from '../TodoItem/TodoItem';
+import React from 'react';
 import { Todo } from '../../types/Todo';
+import { TodoItem } from '../TodoItem/TodoItem';
 
 type Props = {
   filteredTodos: Todo[];
   tempTodo: Todo | null;
   onDelete: (id: number) => void;
   deletingTodoId: number | null;
   updatingTodos: number[];
-  updatingTodo: number | null;
-  tempTodoTitle: string | null;
   setTempTodoTitle: (newTitle: string) => void;
-  setUpdatingTodoId: (newId: number | null) => void;
+  tempTodoTitle: string;
+  updatingTodo: number | null;
   onDoubleClick: (id: number) => void;
+  setUpdatingTodoId: (newId: number | null) => void;
   serverRequest: boolean;
+  toggleTodo: (id: number) => void;
 };
 
 export const TodoList: React.FC<Props> = ({
@@ -22,32 +23,48 @@ export const TodoList: React.FC<Props> = ({
   onDelete,
   deletingTodoId,
   updatingTodos,
-  updatingTodo,
-  tempTodoTitle,
   setTempTodoTitle,
+  tempTodoTitle,
+  updatingTodo,
   onDoubleClick,
   setUpdatingTodoId,
   serverRequest,
+  toggleTodo,
 }) => {
   return (
     <>
       {filteredTodos.map(todo => (
         <TodoItem
-          todo={todo}
           key={todo.id}
+          todo={todo}
           onDelete={onDelete}
           isDeleting={deletingTodoId === todo.id}
           isUpdating={updatingTodos.includes(todo.id)}
           isUpdatingTitle={updatingTodo === todo.id}
-          tempTitle={tempTodoTitle ?? ''}
+          tempTitle={tempTodoTitle}
           setTempTitle={setTempTodoTitle}
           onDoubleClick={onDoubleClick}
           setUpdatingTodoId={setUpdatingTodoId}
-          isServerRequest={updatingTodo === todo.id && serverRequest}
+          isServerRequest={serverRequest}
+          toggleTodo={toggleTodo}
         />
       ))}
 
-      <TempTodoItem tempTodo={tempTodo} />
+      {tempTodo && (
+        <TodoItem
+          todo={tempTodo}
+          onDelete={() => {}}
+          isDeleting={false}
+          isUpdating={false}
+          isUpdatingTitle={false}
+          tempTitle=""
+          setTempTitle={() => {}}
+          onDoubleClick={() => {}}
+          setUpdatingTodoId={() => {}}
+          isServerRequest={false}
+          toggleTodo={() => {}}
+        />
+      )}
     </>
   );
 };