joshuamorony / angularstart-giflist Goto Github PK

When clearing the search bar, it should show default gifs again. It isn't doing this as subreddit is null in https://www.reddit.com/r/${subreddit}/hot/.json?limit=100.

Solution: We can add map operator to subredditChanged$ - if subreddit is null, then return 'gifs'; else return as it is;

P.S : Really inspired by the reactive nature of your code. 🥇

Hi,

I really like the pattern, but in your example you have a pagination based on the lastGif,
but changing it to a normal pagination, would you still do the same? or move it to the state?

I worked the following out, but when I change the filter, I wanted to reset the page number, and this felt wrong on how to do this.

 //sources
  pagination$ = new BehaviorSubject<number>(1);
  private error$ = new Subject<string | null>();
  private filterChanged$ = this.filter.valueChanges.pipe(
    tap(() => this.pagination$.next(1)),
    debounceTime(300),
    distinctUntilChanged(),
  );

  private gamesLoaded$ = this.filterChanged$.pipe(
    switchMap((filter) =>
      this.pagination$.pipe(
        distinctUntilChanged(),
        mergeMap((page) => this._loadRecentGamesForPlayer(filter, page)),
      ),
    ),
  );

Do you have any suggestions / examples for this?

There is a bug in the gifsLoaded$ stream that cause the retrieval of duplicated data (fetch url with same params, or overlapping requests)

• Scroll events can happen while fetching data from a previous scroll
• The expand is loading data and there are scroll events

I think both can be fixed by disabling the ngx-infinite-scroll directive with infiniteScrollDisabled input set to true while fetching, using another boolean variable in the state, isFetching, for example. This will be set to true when loading and to false once the last data has been fetched (when expands emits EMPTY). I haven't tested this possible fix, though.

Thanks for such a great course, I'm learning a lot! 🥰