Skip to content
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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Conversation

o-drozzdyk
Copy link

Copy link

@Clover247 Clover247 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome job!

Copy link

@superpooperxxx superpooperxxx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Almost there🔥


export const PeoplePage: React.FC = () => {
const [people, setPeople] = useState<Person[]>([]);
const [visiblePeople, setVisiblePeople] = useState<Person[]>([]);

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

}

setVisiblePeople(preparedPeopleList);
}, [sex, query, centuries, sort, order]);

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:

  1. Take filtering logic to separate function in separate file
  2. Accept there a searchParams as a param
  3. 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) }}>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use SearchLink component

className="button is-link is-outlined is-fullwidth"
href="#/people"
params={{ query: null, sex: null, centuries: null }}

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

19
</a>
{centuriesList.map(century => (
<Link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also should be SearchLink

DeepVueApp

This comment was marked as off-topic.

Copy link

@StasSokolov StasSokolov left a 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants