Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
This is a great effort and the application works correctly! However, one change is needed to meet all the project guidelines. In src/App.tsx, you've used an inline arrow function for the AddButton's onClick event handler. This violates a specific requirement to create separate methods for event handlers [CHECKLIST ITEM #2]. Please refactor this to use a dedicated method. You can pass the item's identity to this method using a data-* attribute on the button.
As a smaller suggestion for improving clarity, consider renaming the state property from selectedGoods to selectedGood, since only a single item can be selected. You're very close to a complete solution!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
src/App.tsx
Outdated
| <main className="section container"> | ||
| <h1 className="title">No goods selected</h1> | ||
| type State = { | ||
| selectedGoods: string; |
There was a problem hiding this comment.
The task description refers to selectedGood in the singular. Since only one good can be selected at a time, it's better to name this state property selectedGood for clarity and consistency with the requirements. This change would need to be applied everywhere this property is used.
src/App.tsx
Outdated
| data-cy="AddButton" | ||
| type="button" | ||
| className="button" | ||
| onClick={() => this.handleGoodSelect(good)} |
There was a problem hiding this comment.
This violates checklist item #2: 'Create separate methods instead of creating inline event handlers'. Using an inline arrow function here creates a new function on every render. A better approach that avoids this would be to use a single event handler on the table or a handler on the button that reads the item's identity from a data-* attribute.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on this submission! I am approving your solution. You've done a fantastic job addressing the feedback from the last review by refactoring the inline onClick handlers into separate methods. This change significantly improves the code's readability and structure, aligning perfectly with the project's best practices [CHECKLIST ITEM #2, #3]. Your code is now clean, efficient, and meets all the requirements. Keep up the great work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
DEMO LINK