fixed last comments

mate-academy · Sep 19, 2023 · 245e4cb · 245e4cb
1 parent a55c45a
commit 245e4cb
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 57 deletions.
diff --git a/src/components/ToDo.tsx b/src/components/ToDo.tsx
@@ -36,9 +36,7 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
   function deleteItem(id: number) {
     setIsLoading(true);
     deleteTodo(id)
-      .then(() => {
-        refreshLIst();
-      })
+      .then(() => refreshLIst)
       .catch(() => dispatch({ type: ACTIONS.SET_ERROR, payload: 'Unable to delete a todo' }))
   }
 
@@ -109,6 +107,10 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
     }
   }
 
+  let showLoader = isLoading || (state.isLoading && todo.completed)
+    || (state.toggleAll === 'completed' && todo.completed)
+      || (state.toggleAll === 'active' && !todo.completed);
+
   return (
     <div
       className={classNames('todo', {
@@ -124,31 +126,14 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
         />
       </label>
 
-      {isLoading && (
+      {showLoader && (
 
         <div className="modal overlay is-active">
           <div className="modal-background has-background-white-ter" />
           <div className="loader" />
         </div>
       )}
-      { (state.isLoading && todo.completed) && (
-        <div className="modal overlay is-active">
-        <div className="modal-background has-background-white-ter" />
-        <div className="loader" />
-      </div>
-      )}
-      { (state.toggleAll === 'completed' && todo.completed) && (
-        <div className="modal overlay is-active">
-        <div className="modal-background has-background-white-ter" />
-        <div className="loader" />
-      </div>
-      )}
-      { (state.toggleAll === 'active' && !todo.completed) && (
-        <div className="modal overlay is-active">
-        <div className="modal-background has-background-white-ter" />
-        <div className="loader" />
-      </div>
-      )}
+
       {isEditing ? (
         <form>
           <input

diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
@@ -13,50 +13,49 @@ export const TodoList: React.FC<Props> = ({ list, newTodo }) => {
   return (
     <section className="todoapp__main">
       <TransitionGroup>
-        {list.map(todo => {
-          return (
-            (<CSSTransition
-              key={todo.id}
-              timeout={300}
-              classNames="item"
-            >
-              <TodoItem todo={todo} />
-            </CSSTransition>
-            ))
-        })}
+        {list.map(todo => (
+          (<CSSTransition
+            key={todo.id}
+            timeout={300}
+            classNames="item"
+          >
+            <TodoItem todo={todo} />
+          </CSSTransition>
+          )
+        ))}
         {newTodo && (
           <CSSTransition
             key={0}
             timeout={300}
             classNames="temp-item"
           >
-             <div className={classNames('todo', {
-            completed: newTodo.completed,
-          })}
-          >
-            <label className="todo__status-label">
-              <input
-                type="checkbox"
-                className="todo__status"
-              />
-            </label>
-            <div className="modal overlay is-active">
-              <div className="modal-background has-background-white-ter" />
-              <div className="loader" />
-            </div>
-            <span className="todo__title">{newTodo.title}</span>
-            <button
-              type="button"
-              className="todo__remove"
+            <div className={classNames('todo', {
+              completed: newTodo.completed,
+            })}
             >
-              ×
-            </button>
+              <label className="todo__status-label">
+                <input
+                  type="checkbox"
+                  className="todo__status"
+                />
+              </label>
+              <div className="modal overlay is-active">
+                <div className="modal-background has-background-white-ter" />
+                <div className="loader" />
+              </div>
+              <span className="todo__title">{newTodo.title}</span>
+              <button
+                type="button"
+                className="todo__remove"
+              >
+                ×
+              </button>
 
-            <div className="modal overlay">
-              <div className="modal-background has-background-white-ter" />
-              <div className="loader" />
+              <div className="modal overlay">
+                <div className="modal-background has-background-white-ter" />
+                <div className="loader" />
+              </div>
             </div>
-          </div>
           </CSSTransition>
         )}
       </TransitionGroup>