add task solution

[Mariagosp]

DEMO LINK

[Andrii-Yanchuk]

Хороша робота👍. Але є моменти, які треба виправити. Під час завантаження модального вікна сторінка не показує користувачу, що йде загрузка, а просто все зникає і через секунду з'являється інформація

[Andrii-Yanchuk]

В ссилці на email можеш використовувати email з файла json

[Andrii-Yanchuk]

Хороша робота👍

[VolodymyrKirichenko]

Looks good, but let's make some edits) 🥹

[VolodymyrKirichenko]

1. If you pass the type as (string, number, boolean) - the compiler understands what type it is and you don't need to type it.
2. u created a generic for this. Use it in ur state

Suggested change

	const [query, setQuery] = useState<string>('');
	const [status, setStatus] = useState<string>('all');
	const [query, setQuery] = useState('');
	const [status, setStatus] = useState<Filters>(Filters.ALL);

[VolodymyrKirichenko]

for boolean variables use prefixes (is , has )

Suggested change

	const [loadingTodos, setLoadingTodos] = useState(true);
	const [isLoadingTodos, setIsLoadingTodos] = useState(true);

[VolodymyrKirichenko]

instead use only 1 filter (logic in the middle of the filter method callback)

[VolodymyrKirichenko]

selected what?change naming for this variable

[VolodymyrKirichenko]

use handle prefix for handle functions(in parent components) - naming-convention

Suggested change

	const onQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
	setQuery(event.target.value);
	};
	const onReset = () => {
	setQuery('');
	};
	const onOpenModal = (todo: Todo) => {
	setSelectedTodoId(todo.id);
	};
	const onCloseModal = () => {
	setSelectedTodoId(null);
	};
	const onStatusChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
	setStatus(event.target.value as Filters);
	};
	const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
	setQuery(event.target.value);
	};
	const handleReset = () => {
	setQuery('');
	};
	const handleOpenModal = (todo: Todo) => {
	setSelectedTodoId(todo.id);
	};
	const handleCloseModal = () => {
	setSelectedTodoId(null);
	};
	const handleStatusChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
	setStatus(event.target.value as Filters);
	};

[VolodymyrKirichenko]

Will be more readable and better

Suggested change

	{loadingTodos && todos.length === 0 && <Loader />}
	{!loadingTodos && (
	<TodoList
	todos={filteredTodos}
	selectedTodoId={selectedTodoId}
	onOpenModal={onOpenModal}
	/>
	)}
	{(loadingTodos && !todos.length) ? (
	<Loader />
	) : (
	<TodoList
	todos={filteredTodos}
	selectedTodoId={selectedTodoId}
	onOpenModal={onOpenModal}
	/>
	)}

[VolodymyrKirichenko]

don't use inline styles

P.S. and yes, I know it was in the source code.
a programmer's job is to fix the bugs he sees)

[VolodymyrKirichenko]

use classnames library for it. Use this library for all such cases

[VolodymyrKirichenko]

the same issue(fix it for all such cases)

Suggested change

	const [loading, setLoading] = useState(true);
	const [isLoading, setIsLoading] = useState(true);

[Moroz-Dmytro]

Good work, approve it 👍
Small comments below

[Moroz-Dmytro]

Would be good to use map here

[Moroz-Dmytro]

Suggested change

	.then(data => setUser(data))
	.then(setUser)

[Moroz-Dmytro]

Suggested change

	ALL = 'all',
	ACTIVE = 'active',
	COMPLETED = 'completed',
	All = 'all',
	Active = 'active',
	Completed = 'completed',