<your_account>
with your Github username in the
DEMO LINK.tsx
files to .jsx
eslint-config-react
in .eslintrs.js
Using code from previous task implement next tasks:
PersonName
component rendering the name as a link to a person using its slug
property
/people/carolus-haverbeke-1832
name
, mother
and father
columnsCSS
color: rgb(0, 71, 171)
for male name text and and color: rgb(255, 0, 0)
for female.PersonName
componentPersonRow
mentioned in the URL with some background-color
slug
in the URL is not found among the people<input>
with data-cy="filterInput"
attribut to filter people by name
, motherName
and fatherName
?query=car
where car
is a string entered by the userquery
from the URL and set its value to the input when the page is loadedPeoplePage
should read the query
from the URL and filter people accordingly
query
matches the name
, motherName
or fatherName
name
, sex
, born
and died
by clicking on the cell containing column title
?sortBy=born
param to the URLsortBy
it should be applied (column is highilghted and people are sorted)sortBy
value is not valid don't highlight any column and don't sort peoplequery
and sortBy
should stay in the URL when you select a user (keep location.search
on navigation)?sortOrder=asc
or desc
ascending
(A-Z) the second sorts descending
(Z-A)sort_ask
or sort_desc
icons accordingly to the applied sortingquery
in the URL with debounce
of 500msNewPerson
component with a form to add new people and show it above the table
sex
should be chosen among 2 options (radio buttons)mother
and father
are selects with all the women
and men
from the table accordinglyAdd person
button navigating to /people/new
NewPerson
should appear instead of a button/people
pagename
should contain only letters and spacesborn
and died
are valid years between 1400
and the current yeardied
should be disabled if born
is emptydied - born
should be >= 0 and < 150mother
and father
field optionalmothers
and fathers
according to the entered born
year (they must be alive)
(selects should be empty and disabled before the born year was entered)