From 1eda377fbf3c0f97274799600980878eed4fbe6b Mon Sep 17 00:00:00 2001
From: Yana <anazigaluk@gmail.com>
Date: Tue, 4 Feb 2025 14:25:21 +0200
Subject: [PATCH] fix tests and errors

---
 src/App.tsx                              | 19 +++++--
 src/components/TodoFilter/TodoFilter.tsx | 67 ++++++++----------------
 src/components/TodoList/TodoList.tsx     | 16 +++---
 src/components/TodoModal/TodoModal.tsx   |  8 +--
 4 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3ebb15ea8..34fb36131 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,14 +12,16 @@ import { Todo } from './types/Todo';
 
 export const App: React.FC = () => {
   const [allTodos, setAllTodos] = useState<Todo[]>([]);
+  const [filteredTodos, setFilteredTodos] = useState<Todo[]>([]);
   const [todos, setTodos] = useState<Todo[]>([]);
   const [loading, setLoading] = useState(false);
-  const [selectedId, setSelectedId] = useState(0);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
 
   useEffect(() => {
     setLoading(true);
     getTodos().then(todosFromServer => {
       setAllTodos(todosFromServer);
+      setFilteredTodos(todosFromServer);
       setTodos(todosFromServer);
       setLoading(false);
     });
@@ -27,25 +29,32 @@ export const App: React.FC = () => {
 
   const handleFilterAll = useCallback(() => {
     setTodos(allTodos);
+    setFilteredTodos(allTodos);
   }, [allTodos]);
 
   const handleFilterActive = useCallback(() => {
-    setTodos(allTodos.filter(todo => !todo.completed));
+    const activeTodos = allTodos.filter(todo => !todo.completed);
+
+    setFilteredTodos(activeTodos);
+    setTodos(activeTodos);
   }, [allTodos]);
 
   const handleFilterComplete = useCallback(() => {
-    setTodos(allTodos.filter(todo => todo.completed));
+    const completedTodos = allTodos.filter(todo => todo.completed);
+
+    setFilteredTodos(completedTodos);
+    setTodos(completedTodos);
   }, [allTodos]);
 
   const filterByTitle = useCallback(
     (query: string) => {
       setTodos(
-        todos.filter(todo =>
+        filteredTodos.filter(todo =>
           todo.title.toLowerCase().includes(query.toLowerCase()),
         ),
       );
     },
-    [todos],
+    [filteredTodos],
   );
 
   return (
diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx
index d4ce33f7a..3f2d3d74e 100644
--- a/src/components/TodoFilter/TodoFilter.tsx
+++ b/src/components/TodoFilter/TodoFilter.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 type Props = {
   onFilterAll: () => void;
@@ -13,64 +13,39 @@ export const TodoFilter: React.FC<Props> = ({
   onFilterCompleted,
   onFilterByTitle,
 }) => {
-  const [isQuery, setIsQuery] = useState(false);
   const [query, setQuery] = useState('');
   const [filterStatus, setFilterStatus] = useState('all');
 
-  function handleChange(event: ChangeEvent<HTMLSelectElement>) {
-    const status = event.target.value;
-
-    setFilterStatus(status);
-
-    switch (status) {
-      case 'all':
-        onFilterAll();
-        break;
-
-      case 'active':
-        onFilterActive();
-        break;
-
-      case 'completed':
-        onFilterCompleted();
-        break;
-
-      default:
-        break;
-    }
-  }
-
   function handleTitleChange(event: React.ChangeEvent<HTMLInputElement>) {
     const newQuery = event.target.value;
 
     setQuery(newQuery);
-    onFilterByTitle(newQuery.toLowerCase());
-    setIsQuery(newQuery.length > 0);
   }
 
   function clearInput() {
     setQuery('');
-    setIsQuery(false);
-    onFilterByTitle('');
   }
 
   useEffect(() => {
-    if (!query) {
-      switch (filterStatus) {
-        case 'all':
-          onFilterAll();
-          break;
-        case 'active':
-          onFilterActive();
-          break;
-        case 'completed':
-          onFilterCompleted();
-          break;
-        default:
-          break;
-      }
+    if (filterStatus === 'all') {
+      onFilterAll();
+    } else if (filterStatus === 'active') {
+      onFilterActive();
+    } else if (filterStatus === 'completed') {
+      onFilterCompleted();
+    }
+
+    if (query !== '') {
+      onFilterByTitle(query);
     }
-  }, [query, filterStatus, onFilterActive, onFilterAll, onFilterCompleted]);
+  }, [
+    query,
+    filterStatus,
+    onFilterAll,
+    onFilterActive,
+    onFilterCompleted,
+    onFilterByTitle,
+  ]);
 
   return (
     <form className="field has-addons">
@@ -79,7 +54,7 @@ export const TodoFilter: React.FC<Props> = ({
           <select
             data-cy="statusSelect"
             value={filterStatus}
-            onChange={handleChange}
+            onChange={event => setFilterStatus(event.target.value)}
           >
             <option value="all">All</option>
             <option value="active">Active</option>
@@ -103,7 +78,7 @@ export const TodoFilter: React.FC<Props> = ({
 
         <span className="icon is-right" style={{ pointerEvents: 'all' }}>
           {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-          {isQuery && (
+          {query.length > 0 && (
             <button
               data-cy="clearSearchButton"
               type="button"
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index f4c2b8577..0a0bed72d 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -5,14 +5,10 @@ import classNames from 'classnames';
 type Props = {
   todos: Todo[];
   onSelect: (userId: number) => void;
-  selectedId: number;
+  selectedId: number | null;
 };
 
 export const TodoList: React.FC<Props> = ({ todos, onSelect, selectedId }) => {
-  function handleSelect(id: number) {
-    onSelect(id);
-  }
-
   return (
     <table className="table is-narrow is-fullwidth">
       <thead>
@@ -30,7 +26,13 @@ export const TodoList: React.FC<Props> = ({ todos, onSelect, selectedId }) => {
 
       <tbody>
         {todos.map(todo => (
-          <tr data-cy="todo" key={todo.id} className="">
+          <tr
+            data-cy="todo"
+            key={todo.id}
+            className={classNames({
+              'has-background-info-light': selectedId === todo.id,
+            })}
+          >
             <td className="is-vcentered">{todo.id}</td>
             <td className="is-vcentered">
               {todo.completed && (
@@ -54,7 +56,7 @@ export const TodoList: React.FC<Props> = ({ todos, onSelect, selectedId }) => {
                 data-cy="selectButton"
                 className="button"
                 type="button"
-                onClick={() => handleSelect(todo.id)}
+                onClick={() => onSelect(todo.id)}
               >
                 <span className="icon">
                   <i
diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
index 495488bb7..84d410730 100644
--- a/src/components/TodoModal/TodoModal.tsx
+++ b/src/components/TodoModal/TodoModal.tsx
@@ -7,7 +7,7 @@ import { Todo } from '../../types/Todo';
 type Props = {
   id: number;
   todos: Todo[];
-  onClose: (id: number) => void;
+  onClose: (id: number | null) => void;
 };
 
 export const TodoModal: React.FC<Props> = ({ id, todos, onClose }) => {
@@ -47,7 +47,7 @@ export const TodoModal: React.FC<Props> = ({ id, todos, onClose }) => {
               type="button"
               className="delete"
               data-cy="modal-close"
-              onClick={() => onClose(0)}
+              onClick={() => onClose(null)}
             />
           </header>
 
@@ -66,7 +66,9 @@ export const TodoModal: React.FC<Props> = ({ id, todos, onClose }) => {
 
               {' by '}
 
-              <a href={`mailto: ${data?.email}`}>{data?.name}</a>
+              {data?.email && data.name && (
+                <a href={`mailto: ${data.email}`}>{data.name}</a>
+              )}
             </p>
           </div>
         </div>