add task solution

src/App.tsx

@@ -1,14 +1,65 @@
 /* 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';
 
 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 [selectedValue, setSelectedValue] = 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 (selectedValue) {
+          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;
+        }
+      });
+  }, [selectedValue, inputValue]);
+
   return (
     <>
       <div className="section">
@@ -17,18 +68,32 @@ export const App: React.FC = () => {
             <h1 className="title">Todos:</h1>
 
             <div className="block">
-              <TodoFilter />
+              <TodoFilter
+                selectedValue={selectedValue}
+                setSelectedValue={setSelectedValue}
+                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)}
+        />
+      )}
     </>
   );
 };

src/components/TodoFilter/TodoFilter.tsx

@@ -1,8 +1,24 @@
-export const TodoFilter = () => (
+type Props = {
+  selectedValue: string;
+  setSelectedValue: (selectedValue: string) => void;
+  inputValue: string;
+  setInputValue: (inputValue: string) => void;
+};
+
+export const TodoFilter: React.FC<Props> = ({
+  selectedValue,
+  setSelectedValue,
+  inputValue,
+  setInputValue,
+}) => (
   <form className="field has-addons">
     <p className="control">
       <span className="select">
-        <select data-cy="statusSelect">
+        <select
+          data-cy="statusSelect"
+          value={selectedValue}
+          onChange={event => setSelectedValue(event.target.value)}
+        >
           <option value="all">All</option>
           <option value="active">Active</option>
           <option value="completed">Completed</option>
@@ -16,14 +32,23 @@ 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" />
       </span>
 
       <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>

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>
 );

src/components/TodoModal/TodoModal.tsx

@@ -1,12 +1,54 @@
-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);
+
+    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]);
 
-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 +57,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:[email protected]">Leanne Graham</a>
+              <a href={`mailto:${user?.email}`}>{user?.name}</a>
             </p>
           </div>
         </div>