Fix: reduced props count and other minor fixes

mate-academy · Dec 20, 2024 · a3a50f1 · a3a50f1
1 parent 0049c5c
commit a3a50f1
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 130 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -36,15 +36,17 @@ export const App: React.FC = () => {
   useEffect(() => {
     setHasError(Errors.NoError);
 
-    (async () => {
+    const getAllTodos = async () => {
       try {
         const response = await getTodos();
 
         setTodos(response);
       } catch {
         setHasError(Errors.UnableToLoad);
       }
-    })();
+    };
+
+    getAllTodos();
   }, []);
 
   const filteredTodos = filterTodos(todos, filterBy);
@@ -59,41 +61,44 @@ export const App: React.FC = () => {
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setHasError(Errors.NoError);
+  const handleSubmit = useCallback(
+    async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setHasError(Errors.NoError);
 
-    if (!title.trim()) {
-      setHasError(Errors.TitleEmpty);
+      if (!title.trim()) {
+        setHasError(Errors.TitleEmpty);
 
-      return;
-    }
+        return;
+      }
 
-    const newTodo = {
-      userId: 0,
-      title: title.trim(),
-      completed: false,
-    };
+      const newTodo = {
+        userId: 0,
+        title: title.trim(),
+        completed: false,
+      };
 
-    setTempTodo({ ...newTodo, id: tempIdCounter });
-    setIsHeaderDisabled(true);
+      setTempTodo({ ...newTodo, id: tempIdCounter });
+      setIsHeaderDisabled(true);
 
-    try {
-      const addNewTodo = await addTodo(newTodo);
+      try {
+        const addNewTodo = await addTodo(newTodo);
 
-      setTodos([...todos, addNewTodo]);
-      setIsHeaderDisabled(false);
-      setTitle('');
-      setTempTodo(null);
-      setTempIdCounter(tempIdCounter + 1);
+        setTodos(prevTodos => [...prevTodos, addNewTodo]);
+        setIsHeaderDisabled(false);
+        setTitle('');
+        setTempTodo(null);
+        setTempIdCounter(tempIdCounter + 1);
 
-      inputRef.current?.focus();
-    } catch {
-      setHasError(Errors.UnableToAdd);
-      setTempTodo(null);
-      setIsHeaderDisabled(false);
-    }
-  };
+        inputRef.current?.focus();
+      } catch {
+        setHasError(Errors.UnableToAdd);
+        setTempTodo(null);
+        setIsHeaderDisabled(false);
+      }
+    },
+    [tempIdCounter, title],
+  );
 
   const handleDeleteAllCompleted = useCallback(async () => {
     const completedTodos = todos.filter(todo => todo.completed);
@@ -110,7 +115,7 @@ export const App: React.FC = () => {
     }
   }, [todos]);
 
-  const handleUpdateToCompleteAll = async () => {
+  const handleUpdateToCompleteAll = useCallback(async () => {
     setIsUpdating(true);
     setUpdatingTodoId(null);
     setToggleCompleteAll(true);
@@ -149,25 +154,60 @@ export const App: React.FC = () => {
       setUpdatingTodoId(null);
       setToggleCompleteAll(true);
     }
-  };
+  }, [todos]);
 
-  const handleDelete = async (todoId: number) => {
-    setIsDeleting(true);
-    setDeletingCardId(todoId);
+  const handleDelete = useCallback(
+    async (todoId: number) => {
+      setIsDeleting(true);
+      setDeletingCardId(todoId);
 
-    try {
-      await deleteTodo(todoId);
-      setIsDeleting(false);
-      setDeletingCardId(null);
-      setTodos(todos.filter(todo => todo.id !== todoId));
-      setDeletingCardId(null);
-      inputRef.current?.focus();
-    } catch {
-      setHasError(Errors.UnableToDelete);
-      setIsDeleting(false);
-      setDeletingCardId(null);
-    }
-  };
+      try {
+        await deleteTodo(todoId);
+        setIsDeleting(false);
+        setDeletingCardId(null);
+        setTodos(todos.filter(todo => todo.id !== todoId));
+        setDeletingCardId(null);
+        inputRef.current?.focus();
+      } catch {
+        setHasError(Errors.UnableToDelete);
+        setIsDeleting(false);
+        setDeletingCardId(null);
+      }
+    },
+    [todos],
+  );
+
+  const handleComplete = useCallback(
+    async (currentTodo: Todo) => {
+      const currTodo = todos.find(todo => todo.id === currentTodo.id);
+
+      setIsUpdating(true);
+      setUpdatingTodoId(currentTodo.id);
+
+      try {
+        if (currTodo) {
+          await updateTodo(currTodo.id, {
+            title: currTodo.title,
+            completed: !currTodo.completed,
+            userId: currTodo.userId,
+          });
+
+          const updatedTodos = todos.map(todo =>
+            todo.id === currTodo.id
+              ? { ...todo, completed: !currTodo.completed }
+              : todo,
+          );
+
+          setIsUpdating(false);
+          setTodos(updatedTodos);
+        }
+      } catch {
+        setIsUpdating(false);
+        setHasError(Errors.UnableToUpdate);
+      }
+    },
+    [todos],
+  );
 
   return (
     <div className="todoapp">
@@ -183,10 +223,9 @@ export const App: React.FC = () => {
           handleUpdateToCompleteAll={handleUpdateToCompleteAll}
         />
         <TodoList
-          todos={filteredTodos}
+          filteredTodos={filteredTodos}
           tempTodo={tempTodo}
           isDeleting={isDeleting}
-          setIsDeleting={setIsDeleting}
           setTodos={setTodos}
           setHasError={setHasError}
           initialTodos={todos}
@@ -197,6 +236,7 @@ export const App: React.FC = () => {
           toggleCompleteAll={toggleCompleteAll}
           handleDelete={handleDelete}
           deletingCardId={deletingCardId}
+          handleComplete={handleComplete}
         />
 
         {todos.length > 0 && (

diff --git a/src/components/Error/Error.tsx b/src/components/Error/Error.tsx
@@ -17,8 +17,6 @@ export const Error: React.FC<Props> = props => {
 
       return () => clearTimeout(timer);
     }
-
-    return;
   });
 
   return (

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -29,7 +29,7 @@ export const Footer: React.FC<Props> = props => {
         {filters.map(filter => (
           <a
             key={filter}
-            href={`/#/${filter === FilterTodosBy.All ? '' : filter.toLowerCase()}`}
+            href={`/#/${filter !== FilterTodosBy.All && filter.toLowerCase()}`}
             className={cn('filter__link', {
               selected: filterBy === filter,
             })}
@@ -45,7 +45,7 @@ export const Footer: React.FC<Props> = props => {
         type="button"
         className="todoapp__clear-completed"
         data-cy="ClearCompletedButton"
-        disabled={completedTodosLenght === 0}
+        disabled={!completedTodosLenght}
         onClick={handleDeleteAllCompleted}
       >
         Clear completed

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Todo } from '../../types/Todo';
 import cn from 'classnames';
 
@@ -23,8 +23,11 @@ export const Header: React.FC<Props> = props => {
     handleUpdateToCompleteAll,
   } = props;
 
-  const isAllTodosCompleted = todos.every(todo => todo.completed);
-  const isTodosNotEmpty = todos.length !== 0;
+  const isAllTodosCompleted = useMemo(
+    () => todos.every(todo => todo.completed),
+    [todos],
+  );
+  const isTodosNotEmpty = useMemo(() => todos.length !== 0, [todos]);
 
   useEffect(() => {
     inputRef.current?.focus();
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,8 +17,6 @@ export const Error: React.FC<Props> = props => { @@
           return () => clearTimeout(timer);
         }
-        return;
       });
       return (
@@ Expand Down @@