Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job on implementing the pagination functionality! The component is working well, and you've correctly handled most of the requirements.
However, one change is needed before this can be approved. The currentPage prop in src/components/Pagination/Pagination.tsx is currently required, but the task description specifies it should be optional with a default value of 1. Please update the prop type to currentPage?: number and set its default value during destructuring.
Additionally, here are a couple of minor suggestions for improvement:
- In
App.tsx, it's better to useitems.lengthfor thetotalprop instead of a hardcoded value to make the code more maintainable. - The helper function for creating the pages array in
Pagination.tsxcould be defined outside the component to prevent it from being recreated on every render.
Once the currentPage prop is updated to match the requirements, this will be ready to go. Keep up the great work!
✨ 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
| type Props = { | ||
| total: number; | ||
| perPage: number; | ||
| currentPage: number; |
There was a problem hiding this comment.
According to the task description, the currentPage prop should be optional with a default value of 1. Currently, it's defined as a required prop. Please update the type to make it optional (e.g., currentPage?: number) and handle the default value during props destructuring.
| function arrayNumOfPages(value: number) { | ||
| const pages = []; | ||
|
|
||
| for (let i = 1; i <= value; i++) { | ||
| pages.push(i); | ||
| } | ||
|
|
||
| return pages; | ||
| } |
There was a problem hiding this comment.
This helper function is re-declared on every render. Since it doesn't rely on any props or state from the component, it's better to define it outside the Pagination component's scope. This avoids unnecessary re-creation on each render. Also, consider using a more modern approach to create the array, for instance: Array.from({ length: value }, (_, i) => i + 1).
src/App.tsx
Outdated
| </li> | ||
| </ul> | ||
| <Pagination | ||
| total={42} |
There was a problem hiding this comment.
While this works because the items array also has 42 elements, it's better practice to use items.length for the total prop. This makes the code more maintainable, as you would only need to change the source of the items in one place if the total number of items ever changes.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job addressing the previous feedback and getting the main functionality working! However, there's a small but important edge case that needs to be fixed before this can be approved. In src/components/Pagination/Pagination.tsx, when the total number of items is 0, the 'previous' and 'next' buttons are not disabled correctly. This happens because the logic relies on the pages array, which is empty in this scenario. To make the component more robust, please update the disabling logic. For the 'previous' button, a check like currentPage <= 1 would be safer. For the 'next' button, you can calculate the total number of pages and check if the currentPage is the last one. You're very close to finishing this task!
✨ 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
| <ul className="pagination"> | ||
| <li | ||
| className={classNames('page-item', { | ||
| disabled: currentPage === pages[0], |
There was a problem hiding this comment.
This condition (currentPage === pages[0]) is not safe when total is 0. In that case, pages is an empty array and pages[0] is undefined, so the button won't be disabled correctly. A more robust check would be currentPage <= 1.
| })} | ||
| <li | ||
| className={classNames('page-item', { | ||
| disabled: currentPage === pages[pages.length - 1], |
There was a problem hiding this comment.
Similar to the 'previous' button, this condition is fragile. When total is 0, pages is empty and this check will not work as expected. It's safer to calculate totalPages and check if currentPage >= totalPages.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am approving your solution as an educational override to help you move forward, but there are a couple of important things to review for your next task. You've done a great job fixing the disabled class on the pagination buttons to handle cases where there are no items! However, the logic for the aria-disabled attribute and the onClick handlers on the 'previous' and 'next' links still relies on the pages array. When there are no items, this array is empty, which can cause unexpected behavior. To make the component fully robust, you should update these conditions to match the logic you used for the disabled class, for example, by checking currentPage <= 1 for the 'previous' button. Keep up the excellent work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| data-cy="prevLink" | ||
| className="page-link" | ||
| href="#prev" | ||
| aria-disabled={currentPage === pages[0]} |
There was a problem hiding this comment.
This condition can cause issues when total is 0, as pages will be an empty array and pages[0] will be undefined. To make this more robust, consider using a condition similar to the one you used for the disabled class, like currentPage <= 1.
| aria-disabled={currentPage === pages[0]} | ||
| onClick={event => { | ||
| event.preventDefault(); | ||
| if (currentPage !== pages[0]) { |
There was a problem hiding this comment.
This check has the same issue as the aria-disabled attribute. When there are no pages, pages[0] is undefined, and this condition doesn't correctly prevent the onPageChange call. A safer check would be if (currentPage > 1).
| data-cy="nextLink" | ||
| className="page-link" | ||
| href="#next" | ||
| aria-disabled={currentPage === pages[pages.length - 1]} |
There was a problem hiding this comment.
Similar to the 'previous' button, this condition is not safe for the case where total is 0, as pages[pages.length - 1] will be undefined. It would be better to use the totalPages variable for this check, for example: currentPage >= totalPages.
| aria-disabled={currentPage === pages[pages.length - 1]} | ||
| onClick={event => { | ||
| event.preventDefault(); | ||
| if (currentPage !== pages[pages.length - 1]) { |
There was a problem hiding this comment.
This condition also fails when the pages array is empty. To correctly prevent navigation beyond the last page, a condition like if (currentPage < totalPages) would be more reliable.
| className="form-control" | ||
| value={perPage} | ||
| onChange={event => { | ||
| setPerPage(+event.target.value); |
There was a problem hiding this comment.
This condition for aria-disabled can cause issues when total is 0, as pages[0] would be undefined. To make it more robust and consistent with the li's disabled class, consider using currentPage <= 1.
| setPerPage(+event.target.value); | ||
| setCurrentPage(1); | ||
| }} | ||
| > |
There was a problem hiding this comment.
This check has the same potential issue as the aria-disabled attribute when the pages array is empty. A simpler and safer condition would be to check if currentPage > 1 before calling onPageChange.
2 participants
DEMO LINK