finishing the changes proposal

mate-academy · Nov 19, 2024 · c60f04b · c60f04b
1 parent fac32f0
commit c60f04b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 39 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,15 +12,15 @@ export const App: React.FC = () => {
   const [filteredTodos, setFilteredTodos] = useState<Todo[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [editingTodosId, setEditingTodosId] = useState<number[]>([]);
-  const [isActiveFilter, setIsActiveFilter] = useState(false);
+  const [isFooterActive, setIsFooterActiveFilter] = useState(false);
   const [filter, setFilter] = useState('all');
 
   async function loadAllTodos() {
     try {
       const loadedTodos = await getTodos();
 
       if (loadedTodos.length > 0) {
-        setIsActiveFilter(true);
+        setIsFooterActiveFilter(true);
       }
 
       setTodos(loadedTodos);
@@ -42,12 +42,12 @@ export const App: React.FC = () => {
 
   useEffect(() => {
     if (todos.length === 0) {
-      setIsActiveFilter(false);
+      setIsFooterActiveFilter(false);
 
       return;
     }
 
-    setIsActiveFilter(true);
+    setIsFooterActiveFilter(true);
   }, [todos.length]);
 
   useEffect(() => {
@@ -58,7 +58,7 @@ export const App: React.FC = () => {
     if (filter === 'active') {
       setFilteredTodos(prev => prev.filter(t => !t.completed));
     }
-  }, [filter, filteredTodos, todos]);
+  }, [filter, todos]);
 
   if (!USER_ID) {
     return <UserWarning />;
@@ -75,7 +75,6 @@ export const App: React.FC = () => {
           editingTodosId={editingTodosId}
           setTodos={setTodos}
           setFilteredTodos={setFilteredTodos}
-          setIsActiveFilter={setIsActiveFilter}
           filteredTodos={filteredTodos}
         />
         <section className="todoapp__main" data-cy="TodoList">
@@ -95,7 +94,7 @@ export const App: React.FC = () => {
           setFilter={setFilter}
           setFilteredTodos={setFilteredTodos}
           todos={todos}
-          isActiveFilter={isActiveFilter}
+          isFooterActive={isFooterActive}
           setEditingTodosId={setEditingTodosId}
           loadAllTodos={loadAllTodos}
           setTodos={setTodos}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import { Todo } from '../types/Todo';
 
 export interface FooterProps {
   todos: Todo[];
-  isActiveFilter: boolean;
+  isFooterActive: boolean;
   setEditingTodosId: (ids: number[]) => void;
   loadAllTodos: () => void;
   setError: (error: string) => void;
@@ -15,7 +15,7 @@ export interface FooterProps {
 }
 export function Footer({
   todos,
-  isActiveFilter,
+  isFooterActive,
   setEditingTodosId,
   setError,
   editingTodosId,
@@ -69,7 +69,7 @@ export function Footer({
 
   return (
     <>
-      {isActiveFilter && (
+      {isFooterActive && (
         <footer className="todoapp__footer" data-cy="Footer">
           <span className="todo-count" data-cy="TodosCounter">
             {`${todos.filter(t => !t.completed).length} items left`}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -11,7 +11,6 @@ interface HeaderProps {
   editingTodosId: number[];
   setTodos: (todos: Todo[]) => void;
   setFilteredTodos: (todos: Todo[]) => void;
-  setIsActiveFilter: (isActive: boolean) => void;
   filteredTodos: Todo[];
 }
 
@@ -32,10 +31,11 @@ export function Header({
     setNewTodoTitle(e.target.value);
   }
 
-  async function handleAddNewTodo(e: React.FormEvent<HTMLFormElement>) {
+  function handleAddNewTodo(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
+    const trimmedTitle = newTodoTitle.trim();
 
-    if (!newTodoTitle.trim()) {
+    if (!trimmedTitle) {
       setError('Title should not be empty');
       inputNewTodo.current?.focus();
 
@@ -46,41 +46,45 @@ export function Header({
       ? todos[todos.length - 1].id + 1
       : 1;
 
-    try {
-      setIsAddingNewTodo(true);
-      setEditingTodosId([...editingTodosId, newTodoIdAvailable]);
+    const newTodo = {
+      title: trimmedTitle,
+      completed: false,
+      id: newTodoIdAvailable,
+    };
 
-      const newTodo = {
-        title: newTodoTitle.trim(),
-        completed: false,
-        id: newTodoIdAvailable,
-      };
+    setIsAddingNewTodo(true);
+    setEditingTodosId([...editingTodosId, newTodoIdAvailable]);
 
-      setFilteredTodos([...todos, newTodo as Todo]);
+    const updatedTodos = [...todos, newTodo as Todo];
 
-      const responseFromAddedTodo = await addTodo(newTodoTitle.trim());
+    setFilteredTodos(updatedTodos);
 
-      setFilteredTodos([...todos].filter(t => t.id !== newTodoIdAvailable));
-      setTodos([...todos, responseFromAddedTodo]);
-      setFilteredTodos([...todos, responseFromAddedTodo]);
-      setNewTodoTitle('');
-    } catch (er) {
-      setEditingTodosId(
-        [...editingTodosId].filter(id => id !== newTodoIdAvailable),
-      );
-      setError('Unable to add a todo');
-      setFilteredTodos([...todos].filter(t => t.id !== newTodoIdAvailable));
-    } finally {
-      setEditingTodosId(editingTodosId.filter(id => id !== newTodoIdAvailable));
+    addTodo(trimmedTitle)
+      .then(responseFromAddedTodo => {
+        const finalTodos = updatedTodos
+          .filter(t => t.id !== newTodoIdAvailable)
+          .concat(responseFromAddedTodo);
 
-      setIsAddingNewTodo(false);
-    }
+        setTodos(finalTodos);
+        setFilteredTodos(finalTodos);
+        setNewTodoTitle('');
+      })
+      .catch(() => {
+        setFilteredTodos(todos);
+        setError('Unable to add a todo');
+      })
+      .finally(() => {
+        setEditingTodosId(
+          editingTodosId.filter(id => id !== newTodoIdAvailable),
+        );
+        setIsAddingNewTodo(false);
+      });
   }
 
   function handleToggleAllTodos() {
     const successfulUpdatedTodo: number[] = [];
-    const hasAllSameStatus = todos.every(t => t.completed);
-    const todosToUpdate = hasAllSameStatus
+    const hasAllCompleted = todos.every(t => t.completed);
+    const todosToUpdate = hasAllCompleted
       ? todos
       : todos.filter(t => !t.completed);