diff --git a/README.md b/README.md index 5ec1e6f104..636a4d60a4 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://misha-vynnyk.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..9672ebb8ba 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,108 @@ /* eslint-disable max-len */ -import React from 'react'; +// #region import +import React, { useEffect, useMemo, useState } from 'react'; import 'bulma/css/bulma.css'; import '@fortawesome/fontawesome-free/css/all.css'; +import { getTodos, getUser } from './api'; 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'; +// #endregion import + +export enum Filter { + all = 'all', + active = 'active', + completed = 'completed', +} + +export const filterLabels: { [key in Filter]: string } = { + [Filter.all]: 'All', + [Filter.active]: 'Active', + [Filter.completed]: 'Completed', +}; + export const App: React.FC = () => { + const [todos, setTodos] = useState([]); + const [currentTodo, setCurrentTodo] = useState(null); + + const [isModalOpen, setIsModalOpen] = useState(false); + const [openTodoId, setOpenTodoId] = useState(null); + + const [todosLoading, setTodosLoading] = useState(false); + const [modalLoading, setModalLoading] = useState(false); + + const [filterValue, setFilterValue] = useState(Filter.all); + const [searchTerm, setSearchTerm] = useState(''); + + useEffect(() => { + setTodosLoading(true); + + getTodos() + .then(setTodos) + .finally(() => setTodosLoading(false)); + }, []); + + useEffect(() => { + if (!currentTodo || currentTodo.user) { + return; + } + + getUser(currentTodo.userId) + .then(user => { + setCurrentTodo(prevTodo => { + if (prevTodo?.id === currentTodo.id) { + return { ...prevTodo, user }; + } + + return prevTodo; + }); + }) + .finally(() => setModalLoading(false)); + }, [currentTodo]); + + const handleOpenModal = (todo: Todo): void => { + setOpenTodoId(todo.id); + setModalLoading(true); + setIsModalOpen(true); + + setCurrentTodo(todo); + }; + + const filteredAndSearchedTodos = useMemo(() => { + return todos + .filter(todo => { + switch (filterValue) { + case Filter.completed: + return todo.completed; + case Filter.active: + return !todo.completed; + case Filter.all: + default: + return true; + } + }) + .filter(todo => { + return todo.title.toLowerCase().includes(searchTerm.toLowerCase()); + }); + }, [todos, filterValue, searchTerm]); + + const handleSearchChange = (event: React.ChangeEvent) => { + setSearchTerm(event.target.value); + }; + + const handleCloseModal = (): void => { + setIsModalOpen(false); + setCurrentTodo(null); + }; + + const handleClearSearch = () => { + setSearchTerm(''); + }; + return ( <>
@@ -17,18 +111,33 @@ export const App: React.FC = () => {

Todos:

- +
- - + {todosLoading && } +
- + ); }; diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx index 193f1cd2b2..d5ffcd557d 100644 --- a/src/components/TodoFilter/TodoFilter.tsx +++ b/src/components/TodoFilter/TodoFilter.tsx @@ -1,30 +1,60 @@ -export const TodoFilter = () => ( -
-

- - - -

+import { Filter, filterLabels } from '../../App'; -

- - - - +interface Props { + setFilterValue: React.Dispatch>; + searchTerm: string; + handleSearchChange: (event: React.ChangeEvent) => void; + handleClearSearch: () => void; +} - - {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} - + + + ))} + + + ); + }, ); + +TodoList.displayName = 'TodoList'; diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx index 0fbe6dae99..fc78acda69 100644 --- a/src/components/TodoModal/TodoModal.tsx +++ b/src/components/TodoModal/TodoModal.tsx @@ -1,12 +1,34 @@ import React from 'react'; import { Loader } from '../Loader'; +import classNames from 'classnames'; +import { Todo } from '../../types/Todo'; +import { User } from '../../types/User'; + +interface Props { + currentTodo: (Todo & { user?: User }) | null; + isModalOpen: boolean; + modalLoading: boolean; + handleCloseModal: () => void; +} + +export const TodoModal: React.FC = ({ + currentTodo, + isModalOpen, + modalLoading, + handleCloseModal, +}) => { + if (!currentTodo) { + return null; + } -export const TodoModal: React.FC = () => { return ( -

+
- {true ? ( + {modalLoading ? ( ) : (
@@ -15,25 +37,35 @@ export const TodoModal: React.FC = () => { className="modal-card-title has-text-weight-medium" data-cy="modal-header" > - Todo #2 + Todo #{currentTodo.id}
- {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} -
diff --git a/src/types/Todo.ts b/src/types/Todo.ts index 780afae02d..1b32f6bbd7 100644 --- a/src/types/Todo.ts +++ b/src/types/Todo.ts @@ -1,6 +1,9 @@ +import { User } from './User'; + export interface Todo { id: number; title: string; completed: boolean; userId: number; + user?: User; }