Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am requesting a few changes before this can be approved. Your solution correctly meets all the functional requirements, which is great work! However, there are a couple of important code style issues in src/components/Person/Person.jsx that need to be addressed as they violate the project's guidelines.
First, the nested ternary operator for displaying the partner's information is difficult to read and goes against our style guide [CHECKLIST ITEM #2, #3]. Please refactor this by extracting the logic into a separate variable before the return statement to improve readability.
Additionally, you destructured age from the person prop, but later in the component, you use person.age. For consistency, please use the destructured age variable everywhere.
Once these improvements are made, your code will be much cleaner and easier to maintain.
✨ 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/components/Person/Person.jsx
Outdated
| export const Person = ({ person }) => { | ||
| const { name, age, partnerName, isMarried, sex } = person; | ||
| const partnerText = isMarried | ||
| ? `${partnerName} is my ${sex === 'f' ? 'husband' : 'wife'}` |
There was a problem hiding this comment.
This nested ternary operator is difficult to read and violates the code style guideline for formatting ternaries (Checklist item #2). For better readability, consider extracting this logic into a separate variable.
src/components/Person/Person.jsx
Outdated
| return ( | ||
| <section className="Person"> | ||
| <h2 className="Person__name">My name is {name}</h2> | ||
| {person.age && <p className="Person__age">I am {age}</p>} |
There was a problem hiding this comment.
You have already destructured age from the person object on line 2. For consistency, it's better to use the age variable here directly, instead of person.age.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Thank you for the update and for correctly addressing the issue with the age variable.
However, the main point from the previous review still needs your attention. The logic for displaying the partner's status in src/components/Person/Person.jsx remains a complex nested ternary operator directly within the JSX. This makes the code difficult to read and violates a key project requirement. [CHECKLIST ITEM #3]
Please refactor this by extracting the conditional logic into a separate variable before the return statement. This will significantly improve the component's readability and align it with the project's coding standards.
✨ 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/components/Person/Person.jsx
Outdated
| {isMarried | ||
| ? `${partnerName} is my ${sex === 'f' ? 'husband' : 'wife'}` | ||
| : 'I am not married'} |
There was a problem hiding this comment.
This logic, including the nested ternary operator, is too complex to be placed directly within the JSX. This was the main point of the previous review and it violates checklist item #3: 'Avoid putting several cases to conditional rendering. Create separate variable for the condition'.
Please extract this logic into a variable before the return statement to improve readability.
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 update! You did a fantastic job refactoring the Person component to move the logic out of the JSX, which makes the code much more readable and maintainable. This was the most important part of the feedback, and you addressed it perfectly.
I am approving your solution so you can move forward, but please note one minor style detail for the future. In src/components/Person/Person.jsx, the ternary operator is on a single line. To improve readability, it should be split so each part is on its own line, as mentioned in the project's style guide [CHECKLIST ITEM #2].
Overall, this is a great improvement. Well done!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| let partnerText = 'I am not married'; | ||
|
|
||
| if (isMarried) { | ||
| const partnerRole = sex === 'f' ? 'husband' : 'wife'; |
There was a problem hiding this comment.
This is a great improvement! However, please format this ternary operator to follow the project's code style guidelines. Each part of the operator should be on a new line to improve readability.
This violates checklist item #2: 'Format ternary operator operands correctly - move each operand to the separate line'
2 participants
No description provided.