solution 0.01 one test failed

[StanislavKapytsia]

DEMO LINK

Toggling a todo status

Toggle the completed status on TodoStatus change:

• Install Prettier Extention and use this VSCode settings to enable format on save.
• covered the todo with a loader overlay while waiting for API response;
• the status should be changed on success;
• show the Unable to update a todo notification in case of API error.

Add the ability to toggle the completed status of all the todos with the toggleAll checkbox:

• toggleAll button should have active class only if all the todos are completed;
• toggleAll click changes its status to the opposite one, and sets this new status to all the todos;
• it should work the same as several individual updates of the todos which statuses were actually changed;
• do send requests for the todos that were not changed;

Renaming a todo

Implement the ability to edit a todo title on double click:

• show the edit form instead of the title and remove button;
• saves changes on the form submit (just press Enter);
• save changes when the field loses focus (onBlur);
• if the new title is the same as the old one just cancel editing;
• cancel editing on Esс key keyup event;
• if the new title is empty delete the todo the same way the x button does it;
• if the title was changed show the loader while waiting for the API response;
• update the todo title on success;
• show Unable to update a todo in case of API error;
• or the deletion error message if we tried to delete the todo.

[StanislavKapytsia]

i can't understand failed test,

1. i made delay 3000 for every request.
2. wait till couple of them was deleted
3. then switch offline
4. all todos before switch was delete and after all todos was saved
5. i got error message once after switch
   help

[etojeDenys]

on completed all click and toggle all click you need to update all todos immediately

Screen.Recording.2024-12-12.at.22.06.49.mov

[etojeDenys]

Suggested change

	const allTodosComplited = useMemo(() => {
	return todos.every(item => item.completed);
	}, [todos]);
	useEffect(() => {
	if (allTodosComplited) {
	setActive(true);
	} else {
	setActive(false);
	}
	}, [allTodosComplited, active]);
	const allTodosComplited = useMemo(() => {
	return todos.every(item => item.completed);
	}, [todos]);

it looks redundant, you can just use allTodosComplited var

[StanislavKapytsia]

[etojeDenys]

Suggested change

	const countNotCompletedItem = useCallback(() => {
	const filtered = todos.filter(todo => !todo.completed);
	return filtered.length;
	}, [todos]);
	const notCompletedItem = countNotCompletedItem();
	const notCompletedItem = useMemo(() => {
	const filtered = todos.filter(todo => !todo.completed);
	return filtered.length;
	}, [todos]);

[StanislavKapytsia]

[StanislavKapytsia]

[anastasiiavorobiova]

Great work! Almost done

[anastasiiavorobiova]

Suggested change

	await Promise.allSettled(content.map(todo => updateTodos([todo])));
	await Promise.allSettled(content.map(todo => updateTodos([todo]))).then(here you should filter just successfully removed todos);

[StanislavKapytsia]

[VitaliyBondarenko1982]

Looks good