Serverside filtering

[sunkup]

Hi,
this is somewhat related to #156.
Ember is v3.4.2 and ember-infinity is v1.2.3.

I am loading markers on a map.
First all markers are loaded with the infinity-loader component in view.
=> All pages are loaded and reachedInifinity becomes true.
Then a new request is made to the server and the old model is replaced with the new one.
=> Now only the first page is loaded though. reachedInifinity has value false, but the infinity-loader component does not reappear as it did when not filtering.

It works beautifully if the old model is replaced with the new one before the old models reachedInifinity becomes true.

Do I have to reset something manually, or do I go about this the wrong way?

I also found that the infinity-loader component has the reached-infinity class set although reachedInifinity has value false.

<div id="ember306" class="infinity-loader reached-infinity ember-view">
    <span>Infinite Model Entirely Loaded.</span>
</div>

I am currently resetting the model like this

makeInfinityRemoteCall() {
    this.infinity.model('artist', this.queryOptions, InfinityModel.extend({ app: this.get('app') }))
        .then((artists) => this.set('controller.model.artists', artists));
}

I already tried using the replace() service method, but that seems not to replace the model at all (and yields no error).

makeInfinityRemoteCall() {
    this.infinity.model('artist', this.queryOptions, InfinityModel.extend({ app: this.get('app') }))
        .then((artists) => this.get('infinity').replace(this.get('controller.model.artists'), artists));
}

[sunkup]

I found it working when doing the following, which resets the infinity-loader and results in loading the remaining pages. This is instead of setting hideOnInfinity=true on the infinity-loader component.

{{#unless model.artists.reachedInfinity}}
  {{#infinity-loader infinityModel=model.artists}}
      {{loading-indicator}}
  {{/infinity-loader}}
{{/unless}}

[jagthedrummer]

I ran into this same problem when using query params to trigger a model refresh.

My route:

  import Route from '@ember/routing/route';
  import { inject as service } from '@ember/service';

  export default Route.extend({
    infinity: service(),

    queryParams: {
      gallerySearch: { refreshModel: true }
    },

    model(params) {
      var galleryParams = {
        perPage: 2, // small page size helps illustrate the problem
        startingPage: 1,
        perPageParam: 'page[size]',
        pageParam: 'page[number]',
        totalPagesParam: 'meta.page-count',
        countParam: 'meta.record-count',
        filter: {}
      };
      if(params.gallerySearch){
        galleryParams.filter.name = params.gallerySearch;
      }
     
      return this.infinity.model('gallery', galleryParams);
    }
  });

My controller:

  import Controller from '@ember/controller';

  export default Controller.extend({
    queryParams: ['gallerySearch', 'gallerySort'],
    gallerySearch: null
  });

Template that does not work reliably:

  <ul>
    {{#each galleries as |gallery|}}
      <li> {{gallery.name}} </li>
    {{/each}}
    {{#infinity-loader infinityModel=galleries}}
      <li> Loading </li>
    {{/infinity-loader}}
  </ul>

Updated template that does work reliably:

  <ul>
    {{#each galleries as |gallery|}}
      <li> {{gallery.name}} </li>
    {{/each}}
    {{#unless galleries.reachedInfinity}}
      {{#infinity-loader infinityModel=galleries}}
        <li> Loading </li>
      {{/infinity-loader}}
    {{/unless}}
  </ul>

I did notice one weird thing that may be helpful in diagnosing the unreliability problem. If I have a short window, and never allow the list to reach infinity, everything always works as expected. The problem starts after infinity has been reached at all. From then on, any new changes to the search param will only load the first page of results. But, if I make the browser window small enough to force the "loading" indicator off the page, and then make it larger again (or scroll the page) the inifinity component will notice that the loader has come into view, and it will then start loading additional pages. So it seems like when the loader is first displayed after a filter change something isn't triggering an additional page load at that time like it should, but is loading additional pages after that if the loader is hidden and then becomes visible again.

[Redsandro]

@jagthedrummer is a bit verbose but right.

Summarized: When the end of the list (i.e. infinity-loader) is in visible screen space, the list can only become shorter, not longer.

Would love someone with a better understanding of this module to take a look at this, because the powerful ember-infinity is a bit limited to simple things like galleries since you can't do slightly more complex cases like live filtering without monkey patching the templates because of broken helpers.

On an app with multiple lists, the templates become a bit chaotic.

The issues seem to be related: #396 #395 #327