Solution not completed

README.md

@@ -1,6 +1,7 @@
 # React dynamic list of TODOs
 
 The goal of this task is to teach you:
+
 - how to work with a not detailed task description;
 - to learn the existing code before you start;
 - to understand tests and why they fail;
@@ -12,21 +13,27 @@ You are given the markup for the `App`, `TodosList`, `TodoFilter`, `TodoModal`
 and `Loader` components. Load data from the API and show it using the given components.
 
 1. Load [the todos](https://mate-academy.github.io/react_dynamic-list-of-todos/api/todos.json) when the `App` is
-loaded and show them using `TodoList` (check the code in the `api.ts`);
+   loaded and show them using `TodoList` (check the code in the `api.ts`);
 1. Show the `Loader` when waiting any data from the server (check the `components` folder);
 1. Check how the `wait` function is used in the `api.ts` to ensure that `Loader` works as expected;
 1. When the `Show` button is clicked open the `TodoModal` with a selected `todo`;
-1. Don't forget to load [user details](https://mate-academy.github.io/react_dynamic-list-of-todos/api/users/1.json) (replace `1` with the actual `userId`);
+1. Don't forget to load [user details](https://mate-academy.github.io/react_dynamic-list-of-todos/api/users/1.json) (
+   replace `1` with the actual `userId`);
 1. Show the Loader while waiting for the user;
 1. `x` button should close the modal;
 1. The `select` should filter todos by the `completed` status: `all`, `completed` and `active`(not completed) todos;
 1. Use the `input` in the `TodoFilter` to filter the `todos` by `title`;
-    - show the `x` button when the `query` is entered;
-    - the `x` button should clear the `query` and reset the todos;
+
+- show the `x` button when the `query` is entered;
+- the `x` button should clear the `query` and reset the todos;
 
 ## Instructions
-- Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
-- Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
+
+- Install Prettier Extention and use
+  this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
+- Implement a solution following
+  the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_dynamic-list-of-todos/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in
+  the [DEMO LINK](https://LiliiaVol.github.io/react_dynamic-list-of-todos/) and add it to the PR description.

src/App.tsx

@@ -1,14 +1,60 @@
 /* eslint-disable max-len */
-import React from 'react';
+import React, { useCallback, useEffect, useMemo } 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 { getTodos } from './api';
+import { Todo } from './types/Todo';
 
 export const App: React.FC = () => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [todos, setTodos] = React.useState<Todo[]>([]);
+  const [selectedTodo, setSelectedTodo] = React.useState<Todo>();
+  const [completedFilter, setCompletedFilter] = React.useState<string | null>(
+    '',
+  );
+  const [query, setQuery] = React.useState('');
+
+  useEffect(() => {
+    getTodos()
+      .then(fetchedTodos => {
+        setTodos(fetchedTodos);
+      })
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const normalizedQuery = query.toLowerCase();
+
+  const currentTodos = useMemo((): Todo[] => {
+    const filteredTodos =
+      completedFilter === 'active'
+        ? todos.filter(todo => !todo.completed)
+        : completedFilter === 'completed'
+          ? todos.filter(todo => todo.completed)
+          : todos;
+
+    return filteredTodos.filter(todo =>
+      todo.title.toLowerCase().includes(normalizedQuery.toLowerCase()),
+    );
+  }, [todos, completedFilter, normalizedQuery]);
+
+  const handleEyeButtonClick = useCallback(
+    (todoId: number | null) => {
+      if (typeof todoId === 'number') {
+        setSelectedTodo(currentTodos.find(todo => todo.id === todoId));
+      }
+    },
+    [currentTodos],
+  );
+
+  const closeModal = () => {
+    setSelectedTodo(undefined);
+  };
+
   return (
     <>
       <div className="section">
@@ -17,18 +63,32 @@ export const App: React.FC = () => {
             <h1 className="title">Todos:</h1>
 
             <div className="block">
-              <TodoFilter />
+              <TodoFilter
+                query={query}
+                setQuery={setQuery}
+                completedFilter={completedFilter}
+                setCompletedFilter={setCompletedFilter}
+              />
             </div>
 
             <div className="block">
-              <Loader />
-              <TodoList />
+              {isLoading ? (
+                <Loader />
+              ) : (
+                <TodoList
+                  todos={currentTodos}
+                  onEyeButtonClick={handleEyeButtonClick}
+                  todoWatched={selectedTodo}
+                />
+              )}
             </div>
           </div>
         </div>
       </div>
 
-      <TodoModal />
+      {selectedTodo && (
+        <TodoModal todo={selectedTodo} onCloseModal={closeModal} />
+      )}
     </>
   );
 };

src/components/TodoFilter/TodoFilter.tsx

@@ -1,30 +1,71 @@
-export const TodoFilter = () => (
-  <form className="field has-addons">
-    <p className="control">
-      <span className="select">
-        <select data-cy="statusSelect">
-          <option value="all">All</option>
-          <option value="active">Active</option>
-          <option value="completed">Completed</option>
-        </select>
-      </span>
-    </p>
+import React from 'react';
 
-    <p className="control is-expanded has-icons-left has-icons-right">
-      <input
-        data-cy="searchInput"
-        type="text"
-        className="input"
-        placeholder="Search..."
-      />
-      <span className="icon is-left">
-        <i className="fas fa-magnifying-glass" />
-      </span>
+enum FilterType {
+  all = 'all',
+  active = 'active',
+  completed = 'completed',
+}
 
-      <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" />
-      </span>
-    </p>
-  </form>
-);
+type Props = {
+  query: string;
+  setQuery: (query: string) => void;
+  completedFilter: FilterType | null;
+  setCompletedFilter: (filter: FilterType | null) => void;
+};
+
+export const TodoFilter: React.FC<Props> = (props: Props) => {
+  const { query, setQuery, completedFilter, setCompletedFilter } = props;
+
+  return (
+    <form className="field has-addons">
+      <p className="control">
+        <span className="select">
+          <select
+            data-cy="statusSelect"
+            value={completedFilter ?? FilterType.all}
+            onChange={e => {
+              const selectedValue = e.target.value as FilterType;
+
+              setCompletedFilter(selectedValue);
+            }}
+          >
+            <option value={FilterType.all}>All</option>
+            <option value={FilterType.active}>Active</option>
+            <option value={FilterType.completed}>Completed</option>
+          </select>
+        </span>
+      </p>
+
+      <p className="control is-expanded has-icons-left has-icons-right">
+        <input
+          data-cy="searchInput"
+          type="text"
+          className="input"
+          placeholder="Search..."
+          value={query}
+          onChange={event => {
+            setQuery(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 */}
+          {query && (
+            <button
+              data-cy="clearSearchButton"
+              type="button"
+              className="delete"
+              onClick={() => {
+                setCompletedFilter(FilterType.all);
+                setQuery('');
+              }}
+            />
+          )}
+        </span>
+      </p>
+    </form>
+  );
+};