-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add task solution #619
base: master
Are you sure you want to change the base?
add task solution #619
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome job!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Almost there🔥
src/pages/PeoplePage.tsx
Outdated
|
||
export const PeoplePage: React.FC = () => { | ||
const [people, setPeople] = useState<Person[]>([]); | ||
const [visiblePeople, setVisiblePeople] = useState<Person[]>([]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Storing visiblePeople
in a state will cause extra re-renders. Make it a variable
src/pages/PeoplePage.tsx
Outdated
} | ||
|
||
setVisiblePeople(preparedPeopleList); | ||
}, [sex, query, centuries, sort, order]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This useEffect is triggered almost always. What I suggest:
- Take filtering logic to separate function in separate file
- Accept there a
searchParams
as a param - Call this function on each render and storing the result in
visiblePeople
<th key={key}> | ||
<span className="is-flex is-flex-wrap-nowrap"> | ||
{key} | ||
<Link to={{ search: handleArrowClick(value) }}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use SearchLink
component
src/components/PeopleFilters.tsx
Outdated
className="button is-link is-outlined is-fullwidth" | ||
href="#/people" | ||
params={{ query: null, sex: null, centuries: null }} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just pass new URLSearchParams()
, it is too much work to reset each separately
src/components/PeopleFilters.tsx
Outdated
19 | ||
</a> | ||
{centuriesList.map(century => ( | ||
<Link |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also should be SearchLink
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Almost done, code looks good🔥
Check demo page please, sorting not working
https://github.com/mate-academy/react_people-table-advanced/assets/96830833/7633504b-0e81-4408-99da-c84c58a79be8
DEMO LINK