-
Notifications
You must be signed in to change notification settings - Fork 16
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
Feature/322 support infinite scrolling #342
Conversation
…used in an infinite scrolling container
…bled in Collection Factory
…scrolling dataset list
…d method with count
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.
LGTM!
All the recommended changes are ready. Thanks a lot, they were very useful! I just didn't do the one to implement the getDatasetsWithCount in the view with normal pagination in order not to extend too much this issue. |
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 looks really good! @GermanSaracca
I think we should add a section about the infinite scrolling (mentioning next steps like the toggle button or configuration variable) on the Collection Page in the README section for changes to the original functionality: https://github.com/IQSS/dataverse-frontend?tab=readme-ov-file#changes-in-functionality-behavior
I think we should make the results component longer, since it shows about 5 results when the original version shows 10.
Original JSF:
Hi @GPortas , thanks for the feedback!
I'm all ears, let me know what you think. |
…rolling Feature/322 support infinite scrolling
What this PR does / why we need it:
Support inifinite scrolling in the collections page.
Which issue(s) this PR closes:
Special notes for your reviewer:
At the moment I replaced the original pagination with buttons in the collections section by this infinite scroll, the final goal would be to add a toggle button to be able to switch between common pagination and infinite scroll.
All the stories are done, component test and I added cases to the e2e test, in this last mentioned I made a skip of the tests for the usual pagination since at the moment it is not being rendered, when we add the toggle, we will have to apply them again.
We used the react-infinite-scroll-hook library which is super lightweight, (see https://bundlephobia.com/package/react-infinite-scroll-hook@4.1.1).
I also added the classnames library to be able to assign dynamic css classes, this is going to be super useful for many cases in my opinion.
Suggestions on how to test this:
Install the necessary dependencies using npm install.
Start Storybook with npm run storybook.
Visit the Storybook and check the DatasetsListWithInfiniteScroll Stories inside sections.
There are many scenarios for the infinite scrolling feature.
Does this PR introduce a user interface change? If mockups are available, please link/include them here:
Is there a release notes update needed for this change?:
Additional documentation:
Storybook
Storybook with all states