mate-academy / react_people-table-basics

React People Table

Here is the working example

Implement the App with 2 pages and ability to select a person in the table.

1. Create the HomePage available at / with just a title Home Page
2. Create the PeoplePage available at /people with a title People Page
3. Use Navigate component to redirect from /home to /;
   • add replace attribute not to save /home URL in the browser history and avoid navigation loop when you press browser Go back button.
4. Implement NotFoundPage with a title Page not found that is shown for all the other URLs;
5. Add the Navbar with 2 links Home and People. Active one should have the has-background-grey-lighter class;
6. Use HashRouter to be able to share a link to any page on Github pages;
7. Fetch people from the API when PeoplePage is opened;
8. Pass people to PeopleTable component and render as a table (see the given markup);
9. Make each name in the table a link a to /people/:slug (including mother and father)
   • create the <PersonLink person={person} /> and use it for all existing people;
   • add the has-text-danger class for women names;
   • if there is no person with a given name among the people just keep the name as a text (not a link);
   • if the motherName or fatherName is empty put - to the table
10. Highlight the row of the selected person with the has-background-warning class;

Instructions

• Install Prettier Extention and use this VSCode settings to enable format on save.
• Implement a solution following the React task guideline.
• Use the React TypeScript cheat sheet.
• Open one more terminal and run tests with npm test to ensure your solution is correct.
• Replace <your_account> with your Github username in the DEMO LINK and add it to the PR description.