From bea46b3580fb6ea3d25381a8ef35bf03fa7e5b7f Mon Sep 17 00:00:00 2001 From: Vasyl Zhyliakov Date: Thu, 26 Sep 2024 18:56:34 +0300 Subject: [PATCH 1/9] Solution --- README.md | 2 +- src/App.tsx | 90 +++++++++++- src/api.ts | 4 +- src/components/TodoFilter/TodoFilter.tsx | 87 ++++++++---- src/components/TodoList/TodoList.tsx | 167 ++++++++++------------- src/components/TodoModal/TodoModal.tsx | 35 +++-- src/types/Filter.ts | 5 + 7 files changed, 253 insertions(+), 137 deletions(-) create mode 100644 src/types/Filter.ts diff --git a/README.md b/README.md index 5ec1e6f104..3da7d5c158 100644 --- a/README.md +++ b/README.md @@ -29,4 +29,4 @@ loaded and show them using `TodoList` (check the code in the `api.ts`); - 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 `` with your Github username in the [DEMO LINK](https://.github.io/react_dynamic-list-of-todos/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://Vasyl-Zhyliakov.github.io/react_dynamic-list-of-todos/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index d46111e825..c9d9fde123 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,76 @@ /* eslint-disable max-len */ -import React from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import 'bulma/css/bulma.css'; import '@fortawesome/fontawesome-free/css/all.css'; +import { Todo } from './types/Todo'; +import { Filter } from './types/Filter'; + import { TodoList } from './components/TodoList'; import { TodoFilter } from './components/TodoFilter'; import { TodoModal } from './components/TodoModal'; import { Loader } from './components/Loader'; +import { getTodos, getUser } from './api'; +import { User } from './types/User'; export const App: React.FC = () => { + const [todos, setTodos] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [isModalLoading, setIsModalLoading] = useState(false); + const [filter, setFilter] = useState(Filter.All); + const [searchValue, setSearchValue] = useState(''); + const [activeTodo, setActiveTodo] = useState(null); + const [activeUser, setActiveUser] = useState(null); + + const handleEyeChange = (id: number) => { + setActiveTodo(todos.find(todo => todo.id === id) || null); + }; + + const filteredTodos = useMemo(() => { + return todos.filter(todo => todo.title.includes(searchValue)); + }, [todos, searchValue]); + + const getVisibleTodos = () => { + switch (filter) { + case Filter.All: + return filteredTodos; + case Filter.Active: + return filteredTodos.filter(todo => !todo.completed); + case Filter.Completed: + return filteredTodos.filter(todo => todo.completed); + + default: + return filteredTodos; + } + }; + + useEffect(() => { + setIsLoading(true); + + getTodos() + .then(setTodos) + .catch(() => {}) + .finally(() => setIsLoading(false)); + }, []); + + useEffect(() => { + if (activeTodo) { + setIsModalLoading(true); + + getUser(activeTodo.userId) + .then(setActiveUser) + .catch(() => {}) + .finally(() => { + setIsModalLoading(false); + }); + } + }, [activeTodo]); + + const closeModal = () => { + setActiveTodo(null); + setActiveUser(null); + }; + return ( <>
@@ -17,18 +79,36 @@ export const App: React.FC = () => {

Todos:

- +
- - + {isLoading && } + + {!isLoading && ( + + )}
- + {activeTodo && ( + + )} ); }; diff --git a/src/api.ts b/src/api.ts index 4bf9d3eccb..93bb239321 100644 --- a/src/api.ts +++ b/src/api.ts @@ -18,11 +18,11 @@ function get(url: string): Promise { const fullURL = BASE_URL + url + '.json'; // we add some delay to see how the loader works - return wait(300) + return wait(1000) .then(() => fetch(fullURL)) .then(res => res.json()); } export const getTodos = () => get('/todos'); -export const getUser = (userId: number) => get(`/users/${userId}`); +export const getUser = (userId: number | null) => get(`/users/${userId}`); diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx index 193f1cd2b2..66e9703ae5 100644 --- a/src/components/TodoFilter/TodoFilter.tsx +++ b/src/components/TodoFilter/TodoFilter.tsx @@ -1,30 +1,61 @@ -export const TodoFilter = () => ( -
-

- - - -

+import { Filter } from '../../types/Filter'; -

- - - - +type Props = { + setFilter: (filter: Filter) => void; + setSearchValue: React.Dispatch>; + searchValue: string; +}; - - {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} -