Add infinite scrolling

src/app/components/feed/feed.component.ts

@@ -41,7 +41,7 @@ export class FeedComponent implements OnInit {
     this.activityService.activitylist.subscribe(response => {
       this.actionlist = response;
     });
-    this.feedService.getNewPosts();
+    this.feedService.getPosts('NEW');
     this.feedService.posts.subscribe(response => {
       if (response.length > 0) {
         // this.loading = false;
@@ -66,13 +66,14 @@ export class FeedComponent implements OnInit {
 
   onScroll() {
     console.log('scrolled');
+    this.feedService.getNextPosts();
   }
 
   showNew() {
-    this.feedService.getNewPosts();
+    this.feedService.getPosts('NEW');
   }
 
   showMostLiked() {
-    this.feedService.getMostLikedPosts();
+    this.feedService.getPosts('TOP');
   }
 }

src/app/services/feed/feed.service.ts

@@ -15,6 +15,9 @@ export class FeedService {
   public posts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
   public newPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
   public mostLikedPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
+  private activePostList = 'NEW';
+  private mostLikedOffset = 0;
+  private newOffset = 0;
 
   constructor(private http: Http) { }
 
@@ -49,7 +52,7 @@ export class FeedService {
         const updatedposts = this.newPosts.getValue();
         updatedposts.unshift(this.renderPost(response.json()));
         this.newPosts.next(updatedposts);
-        this.posts.next(this.newPosts.getValue());
+        this.setPost('NEW');
       });
   }
 
@@ -85,7 +88,7 @@ export class FeedService {
         const updatedposts = this.newPosts.getValue();
         updatedposts.unshift(this.renderPost(response.json()));
         this.newPosts.next(updatedposts);
-        this.posts.next(this.newPosts.getValue());
+        this.setPost('NEW');
       });
   }
 
@@ -132,59 +135,61 @@ export class FeedService {
     return this.http.post(environment.graphQLUrl, body);
   }
 
-  public getNewPosts() {
+  public getPosts(sort: string) {
-    if (this.newPosts.getValue().length === 0) {
+    if ((sort === 'NEW' && this.newPosts.getValue().length === 0) ||
+    (sort === 'TOP' && this.mostLikedPosts.getValue().length === 0)) {
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
-      this.http.post(environment.graphQLUrl, this.buildJsonNew())
+      this.http.post(environment.graphQLUrl, this.buildJson(sort, 0))
       .subscribe(response => {
-        this.newPosts.next(this.renderAllPosts(response.json()));
+        if (sort === 'NEW') {
-        this.posts.next(this.newPosts.getValue());
+          this.newPosts.next(this.renderAllPosts(response.json()));
+        } else if (sort === 'TOP') {
+          this.mostLikedPosts.next(this.renderAllPosts(response.json()));
+        }
+        this.setPost(sort);
       });
-    } else {this.posts.next(this.newPosts.getValue()); }
+    } this.setPost(sort);
   }
 
-  public getMostLikedPosts() {
+  public getNextPosts() {
-    if (this.mostLikedPosts.getValue().length === 0) {
+    if (this.activePostList === 'NEW') {
+      this.newOffset += 10;
+      const headers = new Headers();
+      headers.set('Content-Type', 'application/json');
+      this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.newOffset))
+      .subscribe(response => {
+        let updatedposts = this.newPosts.getValue();
+        updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
+        this.newPosts.next(updatedposts);
+        this.setPost('NEW');
+      });
+    } else if (this.activePostList === 'TOP') {
+      this.mostLikedOffset += 10;
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
-      this.http.post(environment.graphQLUrl, this.buildJsonMostLiked())
+      this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.mostLikedOffset))
       .subscribe(response => {
-        this.mostLikedPosts.next(this.renderAllPosts(response.json()));
+        let updatedposts = this.mostLikedPosts.getValue();
-        this.posts.next(this.mostLikedPosts.getValue());
+        updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
+        this.mostLikedPosts.next(updatedposts);
+        this.setPost('TOP');
       });
-    } else {this.posts.next(this.mostLikedPosts.getValue()); }
+    }
   }
 
-  buildJsonNew() {
+  setPost(sort: string) {
-    const body =  {query: `{
+    this.activePostList = sort;
-        getPosts (first: 3, offset: 0) {
+    if (sort === 'NEW') {
-          id,
+      this.posts.next(this.newPosts.getValue());
-          content,
+    } else if (sort === 'TOP') {
-          htmlContent,
+      this.posts.next(this.mostLikedPosts.getValue());
-          upvotes,
+    }
-          downvotes,
-          userVote,
-          deletable,
-          activity{
-            id
-            name
-            description
-            points
-          },
-          author{
-            name,
-            handle,
-            id},
-          createdAt}
-      }`, variables: {
-      }};
-      return body;
   }
 
-  buildJsonMostLiked() {
+  buildJson(sort: string, offset: number) {
-    const body =  {query: `{
+    const body =  {query: `query($offset: Int, $sort: SortType){
-        getPosts (first: 1000, offset: 0, sort: TOP) {
+        getPosts (first: 10, offset: $offset, sort: $sort) {
           id,
           content,
           htmlContent,
@@ -204,6 +209,8 @@ export class FeedService {
             id},
           createdAt}
       }`, variables: {
+        offset,
+        sort
       }};
       return body;
   }