Permalink
Browse files

Step 10.4: Implement actual load more logic

  • Loading branch information...
dotansimha authored and darkbasic committed Jan 24, 2017
1 parent aa9701c commit b87c660f7e04b5814924a348039e251da96b495d
Showing with 40 additions and 1 deletion.
  1. +40 −1 src/pages/messages/messages.ts
@@ -6,7 +6,7 @@ import { MeteorObservable } from 'meteor-rxjs';
import * as moment from 'moment';
import * as _ from 'lodash';
import { MessagesOptionsComponent } from './messages-options';
import { Subscription } from 'rxjs';
import { Subscription, Observable, Subscriber } from 'rxjs';
@Component({
selector: 'messages-page',
@@ -51,6 +51,22 @@ export class MessagesPage implements OnInit, OnDestroy {
ngOnInit() {
this.autoScroller = this.autoScroll();
this.subscribeMessages();
// Get total messages count in database so we can have an indication of when to
// stop the auto-subscriber
MeteorObservable.call('countMessages').subscribe((messagesCount: number) => {
Observable
// Chain every scroll event
.fromEvent(this.scroller, 'scroll')
// Remove the scroll listener once all messages have been fetched
.takeUntil(this.autoRemoveScrollListener(messagesCount))
// Filter event handling unless we're at the top of the page
.filter(() => !this.scroller.scrollTop)
// Prohibit parallel subscriptions
.filter(() => !this.loadingMessages)
// Invoke the messages subscription once all the requirements have been met
.forEach(() => this.subscribeMessages());
});
}
ngOnDestroy() {
@@ -86,6 +102,29 @@ export class MessagesPage implements OnInit, OnDestroy {
});
}
// Removes the scroll listener once all messages from the past were fetched
autoRemoveScrollListener<T>(messagesCount: number): Observable<T> {
return Observable.create((observer: Subscriber<T>) => {
Messages.find().subscribe({
next: (messages) => {
// Once all messages have been fetched
if (messagesCount !== messages.length) {
return;
}
// Signal to stop listening to the scroll event
observer.next();
// Finish the observation to prevent unnecessary calculations
observer.complete();
},
error: (e) => {
observer.error(e);
}
});
});
}
showOptions(): void {
const popover = this.popoverCtrl.create(MessagesOptionsComponent, {
chat: this.selectedChat

0 comments on commit b87c660

Please sign in to comment.