Infinite scroll with multi-page result and sorting are not working properly

[a-magdy]

Hi,

As always, I have to start with thanking you for your great work here :)

Issue Type: Bug

Platform: Web

Description: Sorting a multi-page result with infinite scroll breaks the component

Screenshots:

Minimal reproduction of the problem with instructions:

• From the appbaseio-app/booksearch demo, update the pagination to false
• Add some filter so that the results are easier to trace by eye, I choose to filter by author: Michael Connelly (28)
• Load more than 1 page using infinite loader
• Change the sorting
• Notice that the _msearch request after changing the sort is still using the same page number as the last page from before the sort, if the last request before changing the sort was:

  {"preference":"results"}
  {"query":{"bool":{"must":[{"bool":{"must":[{"range":{"original_publication_year":{"gte":1970,"lte":2017,"boost":2}}},{"terms":{"authors.raw":["Michael Connelly"]}}]}}]}},"size":10,"from":20,"sort":[{"average_rating":{"order":"desc"}}]}

  Notice the from: 20 The first request after changing the sort will be:

  {"preference":"results"}
  {"query":{"bool":{"must":[{"bool":{"must":[{"range":{"original_publication_year":{"gte":1970,"lte":2017,"boost":2}}},{"terms":{"authors.raw":["Michael Connelly"]}}]}}]}},"size":10,"from":20,"sort":[{"original_title.raw":{"order":"asc"}}]}

  Notice the from: 20 is still the same

• Now when you scroll to load another page, this is when you'll see duplicate results and console errors from react complaining about duplicate keys in the list
• This behaviour (saving the page number on sort change) works when pagination=true (not sure if it is the best approach though), but it breaks the infinite loader
• Also I pushed a version of the booksearch with pagination= false and page size = 10 here: https://build-mnuhsktrja.now.sh/?authorFilter=%5B%22Michael+Connelly%22%5D to save you testing time

Reactivesearch version: 2.6.2

Browser: Chrome 66

Anything else:

• If you screen is big, you'll have to resize it so that the scroll bar appears for the infinite load to work (reported in another issue)
• I think one solution would be to reset the from to 0 on sort change (as it is with other filters) when infinite scroll is on (pagination=false)

[metagrover]

Thanks for bringing this up. Your contributions help us make this project better everyday 😄

To fix this, as suggested above, we will need to reset the current page state to 0, and thereby using from as 0 in the resultant query, whenever there is a change in sort.

It should be a simple implementation if you or anyone wants to take this up. Open to PRs.

[a-magdy]

Thank you :)

would love to open a PR, I'd appreciate a pointer or a hint that gets me closer to the file/module where I can start working on, I don't know the structure of the app yet, the hint doesn't have to be very specific, anything would help :D

[a-magdy]

PR created: https://github.com/appbaseio/reactivesearch/pull/372

[metagrover]

PR Merged!