solution

[shtoikoihor]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

Your implementation has two critical bugs that must be fixed:

1. Sort mutation bug in PeoplePage.tsx (line 50): sortedPeople = sortedPeople.sort(...) assigns undefined to sortedPeople because Array.sort() mutates in-place and returns undefined. The subsequent reverse() call on line 54 then operates on undefined, breaking descending sort. Fix by creating a copy first: const sorted = [...visiblePeople].sort(...)

2. Sidebar renders unconditionally (PeoplePage.tsx line 70): The PeopleFilters component is always rendered, but requirement #3 explicitly states the sidebar should only appear when people are loaded. Add a condition like {!isLoading && people.length > 0 && <PeopleFilters />}

The linting/indentation issues on lines 92, 94, 95 are non-blocking style issues that can be auto-fixed with npm run lint-js -- --fix.

---

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

The sidebar should only appear when people are loaded. Currently PeopleFilters renders unconditionally. Consider adding a condition to only show the sidebar when !isLoading && people.length > 0.

[mateacademy-ai-mentor]

Review Summary

Your implementation successfully addresses all functional requirements. The critical bugs (sort mutation and sidebar conditional rendering) have been properly fixed, and all task requirements are implemented correctly: URL search params for filters and sorting, multi-century selection with getAll, and the three-click sorting cycle (ascending → descending → disabled) all work as specified. The only remaining issue is minor indentation problems in src/components/PeoplePage.tsx on lines 90, 92, and 93. These are style/linting violations, not functional bugs. ESLint can automatically fix these by running npm run lint-js -- --fix - the linter itself reports these as "potentially fixable with the --fix option." Your code is working correctly, and the implementation meets all the requirements from the task description. Great job on fixing the sort mutation issue and properly implementing the sidebar conditional rendering.

---

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

Review Summary

Your solution is approved! All core functionality is working correctly — URL search params for filters and sorting, the three-click sorting cycle, multi-century selection, and conditional sidebar rendering are all properly implemented. The only issue is minor indentation violations in PeoplePage.tsx on lines 90, 92, and 93 (18 spaces instead of 16). You can easily fix this by running npm run lint -- --fix, which will auto-correct the styling. Great work on meeting all the functional requirements — keep it up!

---

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩