search-ui: Load 120 records but then revert back to 20 per page

Viewed 15

i'm creating infinite scrolling for my ElasticSearch app, which is using the search-ui package.

This is a component created in Vue.js

I have got an Observer, once this is in view I increase the page number, rather than replace my entire results array I append to it, which in turn creates infinite scrolling.

current is the current page. lastRequestId is the last request requestId is the current request

The below is in a different component, so I send the page increase Event back to the root component.

new IntersectionObserver(() => {
    if (this.lastRequestId !== this.requestId) {
        window.EventBus.$emit('search-set-page', this.current + 1)
        this.lastRequestId = this.requestId
    }
}, {
    rootMargin: '0px',
    threshold: 1.0
}).observe(this.$refs.bottomOfResults);

This is the root component, I have just pulled out the key code which does the logic.

window.EventBus.$on('search-set-page', page => {
    if (page < 1 || page > this.state.totalPages) {
        console.error('You tried to change to a page that doesn\'t exist...');
        return;
    }
    this.setCurrentPage(page)
});

this.driver = new SearchDriver({});

// This is where it does the results appending logic.
this.driver.subscribeToStateChanges(state => {
    this.state = state
    this.current = state.current
    if (!this.results[state.requestId] && state.results.length) {
        this.$set(this.results, state.requestId, state.results)
    }
    this.requestId = state.requestId
});

setCurrentPage(page) {
    this.current = page;
    this.driver.setCurrent(page);
},

My Problem?

Well, lets say I have scrolled down to load 7 pages worth of documents. If I refresh I now need to load these again and send the visitor to where they refreshed, I can set the results per page to current * results per page which works fine.

But due to API delays and other timing issues i'm struggling to set this back once the results have returned. I tried adding a setTimeout and then changing the resultsPerPage AND current however it was changing the resultsPerPage first, which just results in duplicate records being returned, and it never changed the current.

Anyone got any experience in this?

0 Answers
Related