Fixes

src/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext } from 'react';
+import { FC, useContext, useMemo } from 'react';
 import cn from 'classnames';
 
 import { Filter } from '../../types/Filter';
@@ -9,14 +9,25 @@ export const Footer: FC = () => {
   const dispatch = useContext(DispatchContext);
   const { todos, filter } = useContext(StateContext);
 
-  const completedTodosCount = todos.filter(todo => todo.completed).length;
-  const uncompletedTodos = todos.filter(todo => !todo.completed);
+  const completedTodosCount = useMemo(
+    () => todos.filter(todo => todo.completed).length,
+    [todos],
+  );
+
+  const uncompletedTodos = useMemo(
+    () => todos.filter(todo => !todo.completed),
+    [todos],
+  );
+
+  const message = `${uncompletedTodos.length} ${uncompletedTodos.length === 1 ? 'item' : 'items'} left`;
 
   const handleClearCompleted = () => {
     dispatch({ type: 'changeTodos', payload: uncompletedTodos });
   };
 
-  const message = `${uncompletedTodos.length} ${uncompletedTodos.length === 1 ? 'item' : 'items'} left`;
+  const handleChooseFilter = (filterTitle: Filter) => {
+    dispatch({ type: 'setFilter', payload: filterTitle });
+  };
 
   if (!todos.length) {
     return null;
@@ -38,9 +49,7 @@ export const Footer: FC = () => {
                 selected: filter === filterTitle,
               })}
               data-cy={`FilterLink${filterTitle}`}
-              onClick={() =>
-                dispatch({ type: 'setFilter', payload: filterTitle })
-              }
+              onClick={() => handleChooseFilter(filterTitle)}
             >
               {filterTitle}
             </a>
@@ -54,6 +63,9 @@ export const Footer: FC = () => {
         data-cy="ClearCompletedButton"
         onClick={handleClearCompleted}
         disabled={!completedTodosCount}
+        style={{
+          visibility: completedTodosCount ? 'visible' : 'hidden',
+        }}
       >
         Clear completed
       </button>

src/components/TodoItem/TodoItem.tsx

@@ -2,6 +2,7 @@ import {
   ChangeEvent,
   FC,
   FormEvent,
+  useCallback,
   useContext,
   useEffect,
   useState,
@@ -32,15 +33,15 @@ export const TodoItem: FC<Props> = ({ todo }) => {
     });
   };
 
-  const handleDeleteTodo = () => {
+  const handleDeleteTodo = useCallback(() => {
     dispatch({ type: 'removeTodo', payload: todo.id });
-  };
+  }, [dispatch, todo.id]);
 
   const handleTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTitle(event.target.value.trimStart());
   };
 
-  const handleTitleSave = () => {
+  const handleTitleSave = useCallback(() => {
     const trimmedTitle = title.trim();
 
     if (!trimmedTitle) {
@@ -58,28 +59,28 @@ export const TodoItem: FC<Props> = ({ todo }) => {
     });
 
     setIsEditing(false);
-  };
+  }, [title, todo, dispatch, handleDeleteTodo]);
 
   const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
   };
 
-  const handleKeyUp = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      setIsEditing(false);
-      setTitle(todo.title);
-    } else if (event.key === 'Enter') {
-      handleTitleSave();
-    }
-  };
+  const handleKeyUp = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsEditing(false);
+        setTitle(todo.title);
+      } else if (event.key === 'Enter') {
+        handleTitleSave();
+      }
+    },
+    [todo.title, handleTitleSave],
+  );
 
   useEffect(() => {
     if (isEditing) {
       document.addEventListener('keyup', handleKeyUp);
     }
-    // else {
-    //   document.addEventListener('keyup', handleKeyUp);
-    // }
 
     return () => {
       document.removeEventListener('keyup', handleKeyUp);
@@ -95,6 +96,7 @@ export const TodoItem: FC<Props> = ({ todo }) => {
       onDoubleClick={() => setIsEditing(true)}
     >
       <label className="todo__status-label">
+        {' '}
         <input
           data-cy="TodoStatus"
           type="checkbox"

src/index.tsx

@@ -1,8 +1,6 @@
 import { createRoot } from 'react-dom/client';
 
 import './styles/index.scss';
-// import './styles/todo-list.scss';
-// import './styles/filters.scss';
 
 import { App } from './App';
 import { GlobalStateProvider } from './store/store';