solution

[Vitalii120296]

DEMO LINK

[etojeDenys]

Suggested change

	useEffect(() => {
	getTodos()
	.then(response => {
	let filteredTodos = response;
	if (filter === 'active') {
	filteredTodos = response.filter(todo => todo.completed === false);
	}
	if (filter === 'completed') {
	filteredTodos = response.filter(todo => todo.completed === true);
	}
	setTodos(filteredTodos);
	setErrorMessage('');
	})
	.catch(() => {
	handleErrorMessage('Unable to load todos');
	});
	}, [filter]);
	useEffect(() => {
	getTodos()
	.then(response => {
	setTodos(response);
	setErrorMessage('');
	})
	.catch(() => {
	handleErrorMessage('Unable to load todos');
	});
	}, []);
	const filteredTodos = getFilteredTodos(todos, filter)

to avoid redundant fetch requests

[volodymyr-soltys97]

Hi, It is bad practice to write all the code in one component, you need to separate the logic into different components, for example Header, Footer, TodoList, TodoItem

[volodymyr-soltys97]

Create a enum for 'all', 'active', 'completed' and use it everywhere

[volodymyr-soltys97]

Suggested change

	return todoForFilter.filter(todo => todo.completed === false);
	return todoForFilter.filter(todo => !todo.completed);

[volodymyr-soltys97]

Suggested change

	return todoForFilter.filter(todo => todo.completed === true);
	return todoForFilter.filter(todo => todo.completed);

[volodymyr-soltys97]

It is important to follow the same way of creating functions everywhere, fix it everywhere

Suggested change

	function handleClearCompleted() {
	const handleClearCompleted = () => {

[volodymyr-soltys97]

Good job 👍
Let's improve your code

[volodymyr-soltys97]

It is important to follow the same way of creating functions everywhere, fix it everywhere

Suggested change

	function getFilterTodos(todoForFilter: Todo[], enumFilter: number): Todo[] {
	const getFilterTodos = (todoForFilter: Todo[], enumFilter: number): Todo[] => {

[volodymyr-soltys97]

Do you need similar files everywhere? Consider will be better if you will remove it

[volodymyr-soltys97]

Move this logic to the helper variable and use it here

Suggested change

	{[...todos].filter(todo => !todo.completed).length} items left
	{todos.filter(todo => !todo.completed).length} items left

[volodymyr-soltys97]

Use Object.values(Filter) and render these options with map() method

[volodymyr-soltys97]

Move it to helper variable

Suggested change

	disabled={todos.filter(todo => todo.completed === true).length === 0}
	disabled={todos.filter(todo => todo.completed).length === 0}

[volodymyr-soltys97]

Use classnames library for add classes with conditions, fix it everywhere

[volodymyr-soltys97]

Hi, you need to fix all comments from the previous review, for example this comment still not fixed

[volodymyr-soltys97]

Remove all comments

Suggested change

	return Promise.reject({ id: todo.id }); // Передаємо id в reason
	return Promise.reject({ id: todo.id });