Skip to content

Implement todo app with toggle, rename and API integration#2197

Open
sonik-boom71 wants to merge 2 commits into
mate-academy:masterfrom
sonik-boom71:master
Open

Implement todo app with toggle, rename and API integration#2197
sonik-boom71 wants to merge 2 commits into
mate-academy:masterfrom
sonik-boom71:master

Conversation

@sonik-boom71
Copy link
Copy Markdown

What's done

  • Toggle todo status — click checkbox to toggle; shows loader while waiting for API; reverts on error with "Unable to update a todo" notification
  • Toggle All — marks all incomplete todos as completed (or uncompletes all if all are completed); sends requests only for todos that actually change
  • Rename todo — double-click title to open edit field; save on Enter or blur; cancel on Escape; auto-deletes if title becomes empty; shows "Unable to update a todo" on error
  • API integrationgetTodos, createTodo, deleteTodo, updateTodo via https://mate.academy/students-api
  • Error notifications — auto-hide after 3s, immediately hide on new request
  • Filter — All / Active / Completed
  • Clear Completed — bulk delete with individual error handling

https://sonik-boom71.github.io/react_todo-app-with-api/

- Add toggle individual todo status with loading overlay and error handling
- Add toggle all todos functionality (only sends requests for changed todos)
- Add rename todo on double click with Enter/Escape/blur save/cancel
- Add delete todo from edit mode when title becomes empty
- Implement API client with getTodos, createTodo, deleteTodo, updateTodo
- Add temp todo during creation with loader
- Show error notifications with 3s auto-hide
- Add filter by All/Active/Completed with footer counter
- Add clear completed with individual delete requests
Copy link
Copy Markdown

@etojeDenys etojeDenys left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you should pass all the tests
Image

Use flushSync to force synchronous render of loading states before
awaiting API responses, and defer cleanup via setTimeout(0) so
cy.clock() can freeze intermediate states in tests.
@sonik-boom71
Copy link
Copy Markdown
Author

@etojeDenys yep

@sonik-boom71 sonik-boom71 requested a review from etojeDenys May 15, 2026 12:57
Copy link
Copy Markdown

@etojeDenys etojeDenys left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

demo link does not work correctly. please fix it
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants