fixed all issues except reduce working on this task

mate-academy · Oct 10, 2023 · cb81e02 · cb81e02
1 parent d7b91f1
commit cb81e02
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 34 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,6 @@
 import React, {
   useEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 import { UserWarning } from './UserWarning';
@@ -36,7 +35,7 @@ export const App: React.FC = () => {
   const activeTodosCount = todos
     .filter(({ completed }) => completed === false).length;
 
-  let completedTodosCount = todos
+  let isSomeTodosCompleted = todos
     .some(({ completed }) => completed === true);
 
   useEffect(() => {
@@ -49,19 +48,15 @@ export const App: React.FC = () => {
         setErrorMessage('Unable to load todos');
         setRequest(false);
       });
-  }, []);
-
-  const idTimerRef = useRef<number>(0);
 
-  useEffect(() => {
-    if (idTimerRef.current) {
-      window.clearTimeout(idTimerRef.current);
-    }
-
-    idTimerRef.current = window.setTimeout(() => {
+    const timerId = setTimeout(() => {
       setErrorMessage('');
     }, 3000);
-  }, [setErrorMessage]);
+
+    return () => {
+      clearInterval(timerId);
+    };
+  }, []);
 
   const handleAddTodos = (newTodo: Omit<Todo, 'id'>) => {
     setLoadingId([0]);
@@ -118,7 +113,7 @@ export const App: React.FC = () => {
         setTodo(updatedTodos);
       })
       .catch(() => {
-        completedTodosCount = false;
+        isSomeTodosCompleted = false;
         setErrorMessage('Unable to delete a todo');
       });
   };
@@ -158,8 +153,10 @@ export const App: React.FC = () => {
         )));
       })
       .catch(() => {
-        setErrorMessage('Unable to toggle a todo');
-        throw new Error();
+        const errorMessag = 'Unable to toggle a todo';
+
+        setErrorMessage(errorMessag);
+        throw new Error(errorMessage);
       })
       .finally(() => {
         setLoadingId((prevTodoId) => prevTodoId.filter(id => id !== todo.id));
@@ -171,11 +168,9 @@ export const App: React.FC = () => {
   const handleToggleAll = () => {
     const activeTodos = todos.filter(todo => !todo.completed);
 
-    if (isAllCompleted) {
-      todos.forEach(handleToggleTodo);
-    } else {
-      activeTodos.forEach(handleToggleTodo);
-    }
+    const todosForUpdate = isAllCompleted ? todos : activeTodos;
+
+    todosForUpdate.forEach(handleToggleTodo);
   };
 
   const filteredTodos = useMemo((
@@ -193,7 +188,7 @@ export const App: React.FC = () => {
         <TodoHeader
           activeTodosCount={activeTodosCount}
           onSubmit={handleAddTodos}
-          todo={filteredTodos.length ? filteredTodos[0] : null}
+          todo={filteredTodos[0] || null}
           userId={USER_ID}
           isLoading={isLoading}
           errorMessage={errorMessage}
@@ -214,6 +209,7 @@ export const App: React.FC = () => {
                 onDelete={handleDelete}
                 loadingId={loadingId}
                 isLoaderActive={isLoaderActive}
+                setErrorMessage={setErrorMessage}
                 onTodoUpdate={(todosTitle) => {
                   handleDeleteUpdate(todo, todosTitle);
                 }}
@@ -232,7 +228,7 @@ export const App: React.FC = () => {
             filter={filter}
             setFilter={setFilter}
             activeTodosCount={activeTodosCount}
-            completedTodosCount={completedTodosCount}
+            isSomeTodosCompleted={isSomeTodosCompleted}
             handleClearCompleted={handleClearCompleted}
           />
         )}
@@ -241,7 +237,6 @@ export const App: React.FC = () => {
       <ErrorMessage
         errorMessage={errorMessage}
         setErrorMessage={setErrorMessage}
-
       />
     </div>
   );

diff --git a/src/components/TodoApp/TodoApp.tsx b/src/components/TodoApp/TodoApp.tsx
@@ -8,6 +8,7 @@ type Props = {
   loadingId: number[],
   isLoaderActive: boolean,
   onTodoUpdate: (todoTitle: string) => void
+  setErrorMessage: (error: string) => void
   onTodoToggle: () => Promise<void>
 };
 
@@ -17,6 +18,7 @@ export const TodoApp: React.FC<Props> = ({
   loadingId,
   isLoaderActive,
   onTodoUpdate,
+  setErrorMessage,
   onTodoToggle = () => {},
 }) => {
   const { id, completed, title } = todo;
@@ -44,8 +46,8 @@ export const TodoApp: React.FC<Props> = ({
       }
 
       setIsEditing(false);
-    // eslint-disable-next-line no-empty
     } catch (error) {
+      setErrorMessage('Unable to update todo');
     }
   };
 
@@ -62,11 +64,11 @@ export const TodoApp: React.FC<Props> = ({
     }
   };
 
-  const titleInput = useRef<HTMLInputElement | null>(null);
+  const titleInputRef = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
-    if (isEditing && titleInput.current) {
-      titleInput.current.focus();
+    if (isEditing && titleInputRef.current) {
+      titleInputRef.current.focus();
     }
   }, [isEditing]);
 
@@ -95,7 +97,7 @@ export const TodoApp: React.FC<Props> = ({
           >
             <input
               data-cy="TodoTitleField"
-              ref={titleInput}
+              ref={titleInputRef}
               type="text"
               className="todo__title-field"
               placeholder="Empty todo will be deleted"
@@ -129,7 +131,7 @@ export const TodoApp: React.FC<Props> = ({
 
       <div
         data-cy="TodoLoader"
-        className={classNames('modal overlay', {
+        className={classNames('modal', 'overlay', {
           'is-active': loadingId.includes(id) && isLoaderActive,
         })}
       >

diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx
@@ -6,20 +6,22 @@ type Props = {
   filter: TodosFilter,
   setFilter: (filter: TodosFilter) => void,
   activeTodosCount: number,
-  completedTodosCount: boolean,
+  isSomeTodosCompleted: boolean,
   handleClearCompleted: () => void;
 };
 export const TodoFilter: React.FC<Props> = ({
   filter,
   setFilter,
   activeTodosCount,
-  completedTodosCount,
+  isSomeTodosCompleted,
   handleClearCompleted,
 }) => {
+  const itemText = activeTodosCount === 1 ? 'item' : 'items';
+
   return (
     <footer className="todoapp__footer" data-cy="Footer">
       <span className="todo-count" data-cy="TodosCounter">
-        {`${activeTodosCount} items left`}
+        {`${activeTodosCount} ${itemText} left`}
       </span>
 
       <nav className="filter" data-cy="Filter">
@@ -61,7 +63,7 @@ export const TodoFilter: React.FC<Props> = ({
         type="button"
         className="todoapp__clear-completed"
         data-cy="ClearCompletedButton"
-        disabled={!completedTodosCount}
+        disabled={!isSomeTodosCompleted}
         onClick={handleClearCompleted}
       >
         Clear completed

diff --git a/src/components/TodoHeader/TodoHeader.tsx b/src/components/TodoHeader/TodoHeader.tsx
@@ -92,7 +92,6 @@ export const TodoHeader: React.FC<Props> = ({
           value={title}
           disabled={request}
         />
-
       </form>
     </header>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -92,7 +92,6 @@ export const TodoHeader: React.FC<Props> = ({ @@
               value={title}
               disabled={request}
             />
           </form>
         </header>
       );
@@ Expand Down @@