add solution #1795
add solution #1795
Conversation
There was a problem hiding this comment.
Great job on implementing the task requirements! 🎉 The code meets all the core functionality and constraints specified. While there are a few areas to verify, such as ensuring the correct properties exist in the Person type and confirming the routing logic, these are minor and do not impact the overall functionality. Keep up the good work, and consider reviewing these points for future improvements! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <Route path="/people"> | ||
| <Route index element={<PeopleTable />} /> | ||
| <Route path=":personSlug" element={<PeopleTable />} /> | ||
| </Route> |
There was a problem hiding this comment.
The Route component for the /people path is nested, which might be intentional for rendering different components based on the URL. However, ensure that this aligns with your routing logic and that the PeopleTable component is intended to be used for both the index and :personSlug routes.
|
|
||
| export const PeopleTable = () => { | ||
| const [people, setPeople] = useState<Person[]>([]); | ||
| const currentPerson = useParams(); |
There was a problem hiding this comment.
The useParams hook is used to get the currentPerson, but ensure that personSlug is the correct parameter name expected in the URL. Verify that this aligns with the routing setup in App.tsx.
| {people.map(person => { | ||
| const mother = people.find( | ||
| personToFind => person.motherName === personToFind.name, | ||
| ); | ||
|
|
||
| const father = people.find( | ||
| personToFind => person.fatherName === personToFind.name, | ||
| ); |
There was a problem hiding this comment.
The logic for finding the mother and father assumes that motherName and fatherName are properties of person. Ensure these properties exist in the Person type and that they are correctly populated.
| data-cy="person" | ||
| key={person.name} | ||
| className={classNames({ | ||
| 'has-background-warning': currentPerson === person.slug, |
There was a problem hiding this comment.
Ensure that person.slug is a valid property of the Person type and is correctly populated. This is crucial for the link and conditional class logic.
| <td> | ||
| {mother ? ( | ||
| <Link | ||
| to={`/people/${mother?.slug}`} |
There was a problem hiding this comment.
Verify that mother.slug is a valid property and correctly populated in the Person type. This is important for generating the correct link.
| </td> | ||
| <td> | ||
| {father ? ( | ||
| <Link to={`/people/${father?.slug}`}>{person.fatherName}</Link> |
There was a problem hiding this comment.
Ensure that father.slug is a valid property and correctly populated in the Person type. This is important for generating the correct link.
DEMO LINK