Infinite scroll on timeline

app/src/components/feed/feed.html

@@ -6,4 +6,8 @@
   <ion-list>
     <tweet *ngFor="let tweet of data" [data]="tweet"></tweet>
   </ion-list>
+
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
+    <ion-infinite-scroll-content loadingText="Loading more tweets..."></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
 </ion-content>

app/src/components/feed/feed.ts

@@ -16,6 +16,7 @@ export class FeedComponent {
 
   @Input() data: any[];
   @Output() onRefresh: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onLoadMore: EventEmitter<any> = new EventEmitter<any>();
 
   constructor() {
     console.log('Hello FeedComponent Component');
@@ -24,4 +25,9 @@ export class FeedComponent {
   doRefresh(refresher: Refresher) {
     this.onRefresh.emit(refresher);
   }
+
+  doInfinite(infiniteScroll) {
+    console.log("Infinite scroll started!");
+    this.onLoadMore.emit(infiniteScroll);
+  }
 }

app/src/pages/home/home.html

@@ -8,5 +8,5 @@
 </ion-header>
 
 <ion-content>
-  <feed [data]="data" (onRefresh)="doRefresh($event)"></feed>
+  <feed [data]="data" (onRefresh)="doRefresh($event)" (onLoadMore)="loadMore($event)"></feed>
 </ion-content>

app/src/pages/home/home.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NavController, MenuController } from 'ionic-angular';
+import { NavController, MenuController, InfiniteScroll } from 'ionic-angular';
 import { TwitterApiProvider } from '../../providers/twitter-api/twitter-api';
 
 @Component({
@@ -18,22 +18,31 @@ export class HomePage {
 
   ionViewDidLoad() {
     this.menuCtrl.enable(true, 'sideNav');
-    
+
   }
 
   ionViewDidEnter() {
     this.twitter.fetchHomeFeed()
-    .then(res => {
-      console.log(res);
-      this.data = res.data;
-    });
+      .then(res => {
+        console.log(res);
+        this.data = res.data;
+      });
   }
 
   doRefresh(refresher) {
     this.twitter.fetchHomeFeed()
-    .then(res => {
-      this.data = res.data;
-      refresher.complete();
-    })
+      .then(res => {
+        this.data = res.data;
+        refresher.complete();
+      })
+  }
+
+  loadMore(infiniteScroll: InfiniteScroll) {
+    console.log("loading more tweets now...");
+    this.twitter.fetchHomeFeedSince(this.data[this.data.length - 1].id)
+      .then(res => {
+        this.data = this.data.concat(res.data);
+        infiniteScroll.complete();
+      })
   }
 }

app/src/providers/twitter-api/twitter-api.ts

@@ -33,7 +33,18 @@ export class TwitterApiProvider {
   }
 
   public fetchHomeFeed() {
-    return this.client.get('statuses/home_timeline')
+    return this.client.get('statuses/home_timeline', { count: 10 })
+      .then(res => {
+        return res;
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+
+  public fetchHomeFeedSince(id) {
+    console.log("Making the request now...");
+    return this.client.get('statuses/home_timeline', { max_id: id, count: 15 })
       .then(res => {
         return res;
       })