-
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
made people-table-advanced #597
base: master
Are you sure you want to change the base?
Conversation
src/components/PeopleFilters.tsx
Outdated
if (!century) { | ||
return getSearchWith(searchParams, { | ||
centuries: [], | ||
}); |
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.
as I understand if we want to remove params, we should pass value = null
src/components/PeopleFilters.tsx
Outdated
const toggleAllReset = () => { | ||
return getSearchWith( | ||
searchParams, { query: null, centuries: [], sex: 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.
same here
src/components/PeopleFilters.tsx
Outdated
All | ||
</Link> | ||
<Link | ||
className={cn({ 'is-active': sex === 'm' })} |
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.
we can also use 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.
For sure. Also render as a list (using map
). Fix everywhere
src/components/PeoplePage.tsx
Outdated
case 'sex': | ||
filteredPeople = filteredPeople.sort((person1, person2) => { | ||
return (order === 'desc') | ||
? person2[sort].localeCompare(person1[sort]) |
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.
it looks like you repeat yourself
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! Just a few suggestions
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.
The functionality works. Let's improve code😉
src/components/PeoplePage.tsx
Outdated
setIsLoading(true); | ||
|
||
getPeople() | ||
.then((peopleFromServer) => setPeople(peopleFromServer)) |
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.
.then(setPeople)
src/components/PeoplePage.tsx
Outdated
.finally(() => setIsLoading(false)); | ||
}, []); | ||
|
||
const getFilteredPeople = () => { |
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.
Let's move this function to separate file and receive people
and filters
as a parameters
src/components/PeoplePage.tsx
Outdated
const [searchParams] = useSearchParams(); | ||
const centuries = searchParams.getAll('centuries') || []; | ||
const sex = searchParams.get('sex') || 'All'; | ||
const query = searchParams.get('query') || ''; | ||
const sort = searchParams.get('sort') || ''; | ||
const order = searchParams.get('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.
You don't need it here
src/components/PeopleFilters.tsx
Outdated
All | ||
</Link> | ||
<Link | ||
className={cn({ 'is-active': sex === 'm' })} |
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.
For sure. Also render as a list (using map
). Fix everywhere
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.
Overall looks good to me, only one minor comment, i'm approving it🔥
); | ||
} | ||
|
||
if (sex !== 'All') { |
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.
not critical but All
is used in many places your code, will be better create enum
for sort fields
DEMO LINK