From 64f62cdf09a14cb0df17b64d44dc956742d1e77d Mon Sep 17 00:00:00 2001
From: Denys Kovalchuk <denkov414@gmail.com>
Date: Sat, 11 Jan 2025 21:07:22 +0200
Subject: [PATCH 1/7] add task solution

---
 src/App.tsx                              |  75 ++++++++++++-
 src/components/TodoFilter/TodoFilter.tsx |  31 +++++-
 src/components/TodoList/TodoList.tsx     | 130 +++++++++--------------
 src/components/TodoModal/TodoModal.tsx   |  44 ++++++--
 4 files changed, 183 insertions(+), 97 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d46111e825..bbd6a9cfc0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 
@@ -7,8 +7,59 @@ import { TodoList } from './components/TodoList';
 import { TodoFilter } from './components/TodoFilter';
 import { TodoModal } from './components/TodoModal';
 import { Loader } from './components/Loader';
+import { Todo } from './types/Todo';
 
 export const App: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
+  const [selecteValue, setSelecteValue] = useState('all');
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, []);
+
+  useEffect(() => {
+    fetch(`
+      https://mate-academy.github.io/react_dynamic-list-of-todos/api/todos.json`)
+      .then(response => response.json())
+      .then((todosFromServer: Todo[]) => {
+        switch (selecteValue) {
+          case 'all':
+            setTodos(
+              todosFromServer.filter(todo =>
+                todo.title.toLowerCase().includes(inputValue.toLowerCase()),
+              ),
+            );
+            break;
+          case 'active':
+            setTodos(
+              todosFromServer.filter(
+                todo =>
+                  !todo.completed &&
+                  todo.title.toLowerCase().includes(inputValue.toLowerCase()),
+              ),
+            );
+            break;
+          case 'completed':
+            setTodos(
+              todosFromServer.filter(
+                todo =>
+                  todo.completed &&
+                  todo.title.toLowerCase().includes(inputValue.toLowerCase()),
+              ),
+            );
+            break;
+          default:
+            return;
+        }
+      });
+  }, [selecteValue, inputValue]);
+
   return (
     <>
       <div className="section">
@@ -17,18 +68,32 @@ export const App: React.FC = () => {
             <h1 className="title">Todos:</h1>
 
             <div className="block">
-              <TodoFilter />
+              <TodoFilter
+                selecteValue={selecteValue}
+                setSelecteValue={setSelecteValue}
+                inputValue={inputValue}
+                setInputValue={setInputValue}
+              />
             </div>
 
             <div className="block">
-              <Loader />
-              <TodoList />
+              {loading && <Loader />}
+              <TodoList
+                todos={todos}
+                setSelectedTodo={setSelectedTodo}
+                selectedTodo={selectedTodo}
+              />
             </div>
           </div>
         </div>
       </div>
 
-      <TodoModal />
+      {selectedTodo && (
+        <TodoModal
+          selectedTodo={selectedTodo}
+          onClose={() => setSelectedTodo(null)}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx
index 193f1cd2b2..5a6e3fdb7e 100644
--- a/src/components/TodoFilter/TodoFilter.tsx
+++ b/src/components/TodoFilter/TodoFilter.tsx
@@ -1,8 +1,24 @@
-export const TodoFilter = () => (
+type Props = {
+  selecteValue: string;
+  setSelecteValue: (selecteValue: string) => void;
+  inputValue: string;
+  setInputValue: (selecteValue: string) => void;
+};
+
+export const TodoFilter: React.FC<Props> = ({
+  selecteValue,
+  setSelecteValue,
+  inputValue,
+  setInputValue,
+}) => (
   <form className="field has-addons">
     <p className="control">
       <span className="select">
-        <select data-cy="statusSelect">
+        <select
+          data-cy="statusSelect"
+          value={selecteValue}
+          onChange={event => setSelecteValue(event.target.value)}
+        >
           <option value="all">All</option>
           <option value="active">Active</option>
           <option value="completed">Completed</option>
@@ -16,6 +32,8 @@ export const TodoFilter = () => (
         type="text"
         className="input"
         placeholder="Search..."
+        value={inputValue}
+        onChange={event => setInputValue(event.target.value)}
       />
       <span className="icon is-left">
         <i className="fas fa-magnifying-glass" />
@@ -23,7 +41,14 @@ export const TodoFilter = () => (
 
       <span className="icon is-right" style={{ pointerEvents: 'all' }}>
         {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-        <button data-cy="clearSearchButton" type="button" className="delete" />
+        {inputValue && (
+          <button
+            data-cy="clearSearchButton"
+            type="button"
+            className="delete"
+            onClick={() => setInputValue('')}
+          />
+        )}
       </span>
     </p>
   </form>
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index 84dbcf3c0e..ba3cb69540 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -1,6 +1,16 @@
-import React from 'react';
+import { Todo } from '../../types/Todo';
 
-export const TodoList: React.FC = () => (
+type Props = {
+  todos: Todo[];
+  setSelectedTodo: (todo: Todo | null) => void;
+  selectedTodo: Todo | null;
+};
+
+export const TodoList: React.FC<Props> = ({
+  todos,
+  setSelectedTodo,
+  selectedTodo,
+}) => (
   <table className="table is-narrow is-fullwidth">
     <thead>
       <tr>
@@ -16,85 +26,43 @@ export const TodoList: React.FC = () => (
     </thead>
 
     <tbody>
-      <tr data-cy="todo" className="">
-        <td className="is-vcentered">1</td>
-        <td className="is-vcentered" />
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-danger">delectus aut autem</p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
-            <span className="icon">
-              <i className="far fa-eye" />
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr data-cy="todo" className="has-background-info-light">
-        <td className="is-vcentered">2</td>
-        <td className="is-vcentered" />
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-danger">quis ut nam facilis et officia qui</p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
-            <span className="icon">
-              <i className="far fa-eye-slash" />
-            </span>
-          </button>
-        </td>
-      </tr>
-
-      <tr data-cy="todo" className="">
-        <td className="is-vcentered">1</td>
-        <td className="is-vcentered" />
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-danger">delectus aut autem</p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
-            <span className="icon">
-              <i className="far fa-eye" />
-            </span>
-          </button>
-        </td>
-      </tr>
-
-      <tr data-cy="todo" className="">
-        <td className="is-vcentered">6</td>
-        <td className="is-vcentered" />
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-danger">
-            qui ullam ratione quibusdam voluptatem quia omnis
-          </p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
-            <span className="icon">
-              <i className="far fa-eye" />
-            </span>
-          </button>
-        </td>
-      </tr>
-
-      <tr data-cy="todo" className="">
-        <td className="is-vcentered">8</td>
-        <td className="is-vcentered">
-          <span className="icon" data-cy="iconCompleted">
-            <i className="fas fa-check" />
-          </span>
-        </td>
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-success">quo adipisci enim quam ut ab</p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
-            <span className="icon">
-              <i className="far fa-eye" />
-            </span>
-          </button>
-        </td>
-      </tr>
+      {todos.map(todo => (
+        <tr data-cy="todo" className="" key={todo.id}>
+          <td className="is-vcentered">{todo.id}</td>
+          <td className="is-vcentered">
+            {todo.completed && (
+              <span className="icon" data-cy="iconCompleted">
+                <i className="fas fa-check" />
+              </span>
+            )}
+          </td>
+          <td className="is-vcentered is-expanded">
+            <p
+              className={
+                todo.completed ? 'has-text-success' : 'has-text-danger'
+              }
+            >
+              {todo.title}
+            </p>
+          </td>
+          <td className="has-text-right is-vcentered">
+            <button
+              data-cy="selectButton"
+              className="button"
+              type="button"
+              onClick={() => setSelectedTodo(todo)}
+            >
+              <span className="icon">
+                <i
+                  className={
+                    todo === selectedTodo ? 'far fa-eye-slash' : 'far fa-eye'
+                  }
+                />
+              </span>
+            </button>
+          </td>
+        </tr>
+      ))}
     </tbody>
   </table>
 );
diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
index 0fbe6dae99..8ad3cb9769 100644
--- a/src/components/TodoModal/TodoModal.tsx
+++ b/src/components/TodoModal/TodoModal.tsx
@@ -1,12 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Loader } from '../Loader';
+import { Todo } from '../../types/Todo';
+import { User } from '../../types/User';
+
+type Props = {
+  selectedTodo: Todo;
+  onClose: () => void;
+};
+
+export const TodoModal: React.FC<Props> = ({ selectedTodo, onClose }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    setTimeout(() => {
+      fetch(`
+        https://mate-academy.github.io/react_dynamic-list-of-todos/api/users/${selectedTodo.userId}.json`)
+        .then(response => response.json())
+        .then(userFromServer => setUser(userFromServer))
+        .finally(() => setLoading(false));
+    }, 1000);
+  }, [selectedTodo]);
 
-export const TodoModal: React.FC = () => {
   return (
     <div className="modal is-active" data-cy="modal">
       <div className="modal-background" />
 
-      {true ? (
+      {loading ? (
         <Loader />
       ) : (
         <div className="modal-card">
@@ -15,25 +36,32 @@ export const TodoModal: React.FC = () => {
               className="modal-card-title has-text-weight-medium"
               data-cy="modal-header"
             >
-              Todo #2
+              Todo #{selectedTodo.id}
             </div>
 
             {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-            <button type="button" className="delete" data-cy="modal-close" />
+            <button
+              type="button"
+              className="delete"
+              data-cy="modal-close"
+              onClick={onClose}
+            />
           </header>
 
           <div className="modal-card-body">
             <p className="block" data-cy="modal-title">
-              quis ut nam facilis et officia qui
+              {selectedTodo.title}
             </p>
 
             <p className="block" data-cy="modal-user">
               {/* <strong className="has-text-success">Done</strong> */}
-              <strong className="has-text-danger">Planned</strong>
+              <strong className="has-text-danger">
+                {selectedTodo.completed ? 'Done' : 'Planned'}
+              </strong>
 
               {' by '}
 
-              <a href="mailto:Sincere@april.biz">Leanne Graham</a>
+              <a href={`mailto:${user?.email}`}>{user?.name}</a>
             </p>
           </div>
         </div>

From 83cc411c514c08ad02ea8e8745e5d5dca14149c4 Mon Sep 17 00:00:00 2001
From: Denys Kovalchuk <denkov414@gmail.com>
Date: Sat, 11 Jan 2025 21:18:21 +0200
Subject: [PATCH 2/7] fixed mistakes

---
 src/App.tsx                              | 10 +++++-----
 src/components/TodoFilter/TodoFilter.tsx | 14 +++++++-------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bbd6a9cfc0..9020fd322b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ export const App: React.FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
   const [loading, setLoading] = useState(false);
   const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
-  const [selecteValue, setSelecteValue] = useState('all');
+  const [selectedValue, setSelectedValue] = useState('all');
   const [inputValue, setInputValue] = useState('');
 
   useEffect(() => {
@@ -28,7 +28,7 @@ export const App: React.FC = () => {
       https://mate-academy.github.io/react_dynamic-list-of-todos/api/todos.json`)
       .then(response => response.json())
       .then((todosFromServer: Todo[]) => {
-        switch (selecteValue) {
+        switch (selectedValue) {
           case 'all':
             setTodos(
               todosFromServer.filter(todo =>
@@ -58,7 +58,7 @@ export const App: React.FC = () => {
             return;
         }
       });
-  }, [selecteValue, inputValue]);
+  }, [selectedValue, inputValue]);
 
   return (
     <>
@@ -69,8 +69,8 @@ export const App: React.FC = () => {
 
             <div className="block">
               <TodoFilter
-                selecteValue={selecteValue}
-                setSelecteValue={setSelecteValue}
+                selectedValue={selectedValue}
+                setSelectedValue={setSelectedValue}
                 inputValue={inputValue}
                 setInputValue={setInputValue}
               />
diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx
index 5a6e3fdb7e..11ba7f38df 100644
--- a/src/components/TodoFilter/TodoFilter.tsx
+++ b/src/components/TodoFilter/TodoFilter.tsx
@@ -1,13 +1,13 @@
 type Props = {
-  selecteValue: string;
-  setSelecteValue: (selecteValue: string) => void;
+  selectedValue: string;
+  setSelectedValue: (selectedValue: string) => void;
   inputValue: string;
-  setInputValue: (selecteValue: string) => void;
+  setInputValue: (inputValue: string) => void;
 };
 
 export const TodoFilter: React.FC<Props> = ({
-  selecteValue,
-  setSelecteValue,
+  selectedValue,
+  setSelectedValue,
   inputValue,
   setInputValue,
 }) => (
@@ -16,8 +16,8 @@ export const TodoFilter: React.FC<Props> = ({
       <span className="select">
         <select
           data-cy="statusSelect"
-          value={selecteValue}
-          onChange={event => setSelecteValue(event.target.value)}
+          value={selectedValue}
+          onChange={event => setSelectedValue(event.target.value)}
         >
           <option value="all">All</option>
           <option value="active">Active</option>

From e1fe027f70ae2e55d87808fa408324c4e9832682 Mon Sep 17 00:00:00 2001
From: Denys Kovalchuk <denkov414@gmail.com>
Date: Sat, 11 Jan 2025 21:31:53 +0200
Subject: [PATCH 3/7] fixed mistakes

---
 src/components/TodoModal/TodoModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
index 8ad3cb9769..950bbf0f42 100644
--- a/src/components/TodoModal/TodoModal.tsx
+++ b/src/components/TodoModal/TodoModal.tsx
@@ -20,8 +20,8 @@ export const TodoModal: React.FC<Props> = ({ selectedTodo, onClose }) => {
         .then(response => response.json())
         .then(userFromServer => setUser(userFromServer))
         .finally(() => setLoading(false));
-    }, 1000);
-  }, [selectedTodo]);
+    }, 500);
+  }, []);
 
   return (
     <div className="modal is-active" data-cy="modal">

From a5ff1b462da1273f77959bbd36510a6bf7b9d277 Mon Sep 17 00:00:00 2001
From: Denys Kovalchuk <denkov414@gmail.com>
Date: Sat, 11 Jan 2025 21:37:00 +0200
Subject: [PATCH 4/7] fixed mistakes

---
 src/components/TodoModal/TodoModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
index 950bbf0f42..006940136c 100644
--- a/src/components/TodoModal/TodoModal.tsx
+++ b/src/components/TodoModal/TodoModal.tsx
@@ -21,7 +21,7 @@ export const TodoModal: React.FC<Props> = ({ selectedTodo, onClose }) => {
         .then(userFromServer => setUser(userFromServer))
         .finally(() => setLoading(false));
     }, 500);
-  }, []);
+  }, [selectedTodo]);
 
   return (
     <div className="modal is-active" data-cy="modal">

From e074a03f7a0096f6bddf67333fe3616b470c2a51 Mon Sep 17 00:00:00 2001
From: Denys Kovalchuk <denkov414@gmail.com>
Date: Sat, 11 Jan 2025 21:43:50 +0200
Subject: [PATCH 5/7] fixed mistakes

---
 src/components/TodoModal/TodoModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
index 006940136c..c58103e60d 100644
--- a/src/components/TodoModal/TodoModal.tsx
+++ b/src/components/TodoModal/TodoModal.tsx
@@ -16,7 +16,7 @@ export const TodoModal: React.FC<Props> = ({ selectedTodo, onClose }) => {
     setLoading(true);
     setTimeout(() => {
       fetch(`
-        https://mate-academy.github.io/react_dynamic-list-of-todos/api/users/${selectedTodo.userId}.json`)
+        https://mate-academy.github.io/react_dynamic-list-of-todos/api/users/${selectedTodo.userId ? selectedTodo.userId : '1'}.json`)
         .then(response => response.json())
         .then(userFromServer => setUser(userFromServer))
         .finally(() => setLoading(false));

From 51e29c071233f3fa904ef71f00fb5ed4b5ec7dfe Mon Sep 17 00:00:00 2001
From: Denys Kovalchuk <denkov414@gmail.com>
Date: Sat, 11 Jan 2025 22:26:16 +0200
Subject: [PATCH 6/7] fixed mistakes

---
 src/components/TodoModal/TodoModal.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
index c58103e60d..88b63d00fa 100644
--- a/src/components/TodoModal/TodoModal.tsx
+++ b/src/components/TodoModal/TodoModal.tsx
@@ -19,6 +19,11 @@ export const TodoModal: React.FC<Props> = ({ selectedTodo, onClose }) => {
         https://mate-academy.github.io/react_dynamic-list-of-todos/api/users/${selectedTodo.userId ? selectedTodo.userId : '1'}.json`)
         .then(response => response.json())
         .then(userFromServer => setUser(userFromServer))
+        .catch(error => {
+          // eslint-disable-next-line no-console
+          console.error('Failed to fetch user:', error);
+          setUser(null);
+        })
         .finally(() => setLoading(false));
     }, 500);
   }, [selectedTodo]);

From 5683302c89b89640b5857043512006c89e573cb7 Mon Sep 17 00:00:00 2001
From: Denys Kovalchuk <denkov414@gmail.com>
Date: Sun, 12 Jan 2025 15:24:34 +0200
Subject: [PATCH 7/7] fixed mistakes

---
 src/components/TodoModal/TodoModal.tsx | 38 ++++++++++++++++++--------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
index 88b63d00fa..aff33fd592 100644
--- a/src/components/TodoModal/TodoModal.tsx
+++ b/src/components/TodoModal/TodoModal.tsx
@@ -14,18 +14,34 @@ export const TodoModal: React.FC<Props> = ({ selectedTodo, onClose }) => {
 
   useEffect(() => {
     setLoading(true);
-    setTimeout(() => {
-      fetch(`
-        https://mate-academy.github.io/react_dynamic-list-of-todos/api/users/${selectedTodo.userId ? selectedTodo.userId : '1'}.json`)
-        .then(response => response.json())
-        .then(userFromServer => setUser(userFromServer))
-        .catch(error => {
-          // eslint-disable-next-line no-console
-          console.error('Failed to fetch user:', error);
-          setUser(null);
-        })
-        .finally(() => setLoading(false));
+
+    const fetchUser = async () => {
+      try {
+        const response = await fetch(
+          `https://mate-academy.github.io/react_dynamic-list-of-todos/api/users/${selectedTodo.userId ? selectedTodo.userId : '1'}.json`,
+        );
+
+        if (!response.ok) {
+          throw new Error(`Error: ${response.statusText}`);
+        }
+
+        const userFromServer = await response.json();
+
+        setUser(userFromServer);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to fetch user:', error);
+        setUser(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    const timer = setTimeout(() => {
+      fetchUser();
     }, 500);
+
+    return () => clearTimeout(timer);
   }, [selectedTodo]);
 
   return (