FIX PAGE

src/components/Footer/Footer.tsx

@@ -1,30 +1,30 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Todo } from '../../types/Todo';
-import cn from 'classnames';
 import { Filter } from '../../types/Filter';
-import { Error } from '../../types/Error';
 import { deleteTodo } from '../../api/todos';
+import { Error } from '../../types/Error';
 
-interface Props {
+type Props = {
   setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;
   activeTodos: Todo[];
   completedTodos: Todo[];
   filter: Filter;
   setErrorMessage: React.Dispatch<React.SetStateAction<Error>>;
   setFilter: (filter: Filter) => void;
   setDeletingTodoIds: React.Dispatch<React.SetStateAction<number[]>>;
-}
+};
 
 export const Footer: React.FC<Props> = ({
+  setTodos,
   activeTodos,
   completedTodos,
-  setFilter,
-  filter,
-  setTodos,
   setErrorMessage,
+  filter,
+  setFilter,
   setDeletingTodoIds,
 }) => {
-  const handleClearCompleted = async () => {
+  async function handleClearCompleted() {
     const completedTodoIds = completedTodos.map(todo => todo.id);
 
     setDeletingTodoIds(completedTodoIds);
@@ -55,7 +55,7 @@ export const Footer: React.FC<Props> = ({
     }
 
     setDeletingTodoIds([]);
-  };
+  }
 
   return (
     <footer className="todoapp__footer" data-cy="Footer">
@@ -70,10 +70,10 @@ export const Footer: React.FC<Props> = ({
             key={filterOption}
             href={`#/${filterOption.toLowerCase()}`}
             onClick={() => setFilter(filterOption)}
-            className={cn('filter__link', {
+            className={classNames('filter__link', {
               selected: filter === filterOption,
             })}
-            data-cy={`FilterLink${filterOption.charAt(0).toUpperCase() + filterOption.slice(1)}`}
+            data-cy={`FilterLink${filterOption}`}
           >
             {filterOption}
           </a>

src/components/TodoItem/TodoItem.tsx

@@ -60,7 +60,7 @@ export const TodoItem: React.FC<Props> = ({
       });
   };
 
-  function handleToggleTodo(updatedTodo: Todo) {
+  const handleToggleTodo = (updatedTodo: Todo) => {
     setIsLoading(true);
     updateTodo(updatedTodo)
       .then(todo => {
@@ -81,9 +81,9 @@ export const TodoItem: React.FC<Props> = ({
         }, 3000);
       })
       .finally(() => setIsLoading(false));
-  }
+  };
 
-  function handleEditTodo(updatedTodo: Todo) {
+  const handleEditTodo = (updatedTodo: Todo) => {
     setIsLoading(true);
     if (editedTodoTitle.trim() === title) {
       setIsEditing(false);
@@ -92,7 +92,7 @@ export const TodoItem: React.FC<Props> = ({
       return;
     }
 
-    if (editedTodoTitle.trim() === '') {
+    if (editedTodoTitle.trim()) {
       handleDeleteTodo(id);
 
       return;
@@ -119,7 +119,7 @@ export const TodoItem: React.FC<Props> = ({
         }, 3000);
       })
       .finally(() => setIsLoading(false));
-  }
+  };
 
   return (
     <div

src/types/Filter.ts

@@ -1,5 +1,5 @@
 export enum Filter {
-  ALL = 'all',
+  ALL = 'All',
   Active = 'Active',
   Completed = 'Completed',
 }