[AngularFire2] Pagination

Let's see how to do pagination in Firebase:

 

For the init loading, we only want 3 items:

  findLessonsKeyPreCourseUrl(courseUrl) {
    return this.findCourseByUrl(courseUrl)
      .filter(course => !!course)
      .map((course) => course.$key)
      .switchMap((courseKey) => this.db.list(`lessonsPerCourse/${courseKey}`, {
        query: {
          limitToFirst: 3,
          orderByKey: true
        }
      }));
  }

'limitToFirst' --> If not given 'startAt', will start from index 0, and get three items.

 

Next page: The idea is getting 4 items from the previous page's last item, after that we get rid of first item only keep the rest:

findNextPageLessonsKey(courseUrl: string, from: Lesson, limit: number){
    return this.findCourseByUrl(courseUrl)
      .filter(c => !!c)
      .switchMap((c) => this.db.list(`lessonsPerCourse/${c.$key}`, {
        query: {
          limitToFirst: limit + 1,
          orderByKey: true,
          startAt: from.$key
        }
      }))
      .map(lessons => lessons.slice(1, lessons.length));
  }

 

Previous Page: The same idea as next page, difference is this time we get 4 item from next page's first item, then get rid of the last item only keep the rest:

findPreviousPageLessonsKey(courseUrl: string, end: Lesson, limit: number){
    return this.findCourseByUrl(courseUrl)
      .filter(c => !!c)
      .switchMap((c) => this.db.list(`lessonsPerCourse/${c.$key}`, {
        query: {
          limitToLast: limit + 1,
          orderByKey: true,
          endAt: end.$key
        }
      }))
      .map(lessons => lessons.slice(0, lessons.length-1));
  }