Search code examples
angularfirebasefirebase-realtime-databaseangularfire2

Infinite scroll with angularfire2


I'm attempting to recreate this simple example for infinite scroll with a firebase backend: https://angularfirebase.com/lessons/infinite-scroll-with-firebase-data-and-angular-animation/

The problem is that i want to use the latest version of angularfire2, and I just can't figure out how to rewrite 1 method.

I'm stuck at the movies-list.components.ts file's getMovies() method, since in the latest version of angularfire2 there's no 'do()' method on AngularFireList objects. Is there a way to run arbitrary code before .take(1).subscribe() ?

private getMovies(key?) {
    if (this.finished) return

    this.movieService
        .getMovies(this.batch+1, this.lastKey)
        .do(movies => {

          /// set the lastKey in preparation for next query
          this.lastKey = _.last(movies)['$key']
          const newMovies = _.slice(movies, 0, this.batch)

          /// Get current movies in BehaviorSubject
          const currentMovies = this.movies.getValue()

          /// If data is identical, stop making queries
          if (this.lastKey == _.last(newMovies)['$key']) {
              this.finished = true
          }

          /// Concatenate new movies to current movies
          this.movies.next( _.concat(currentMovies, newMovies) )
        })
        .take(1)
        .subscribe()
}

Solution

  • do() is called tap() in RxJS 6+.