load more posts on scroll on series view

Author: bczmarko

angular-primeng-app/src/app/components/series/series.component.html

@@ -1,6 +1,7 @@
-<div class="series-view">
+<div class="series-view"  infiniteScroll [isActiveInfiniteScroll]="isActiveInfiniteScroll"
+     (scrolled)="loadMorePostsFromSeries()">
   <div class="cards-wrapper grid">
-    @for (post of postsInSeries$ | async; track post.id) {
+    @for (post of postsInSeries; track post) {
       <a [routerLink]="['/post', post.slug]">
         <p-card class="post-card" header="{{ post.title }}">
           <ng-template pTemplate="header">
@@ -10,4 +11,10 @@
       </a>
     }
   </div>
+
+  @if (paginationInfo.hasNextPage && !isHiddenLoadMore) {
+    <div class="load-more-posts">
+      <p-button (click)="loadMorePostsFromSeries()">Load more</p-button>
+    </div>
+  }
 </div>

angular-primeng-app/src/app/components/series/series.component.ts

@@ -1,32 +1,54 @@
 import { Component, inject } from '@angular/core';
-import { ActivatedRoute, Params, RouterLink } from '@angular/router';
-import { Observable, switchMap } from 'rxjs';
-import { Post } from '../../models/post';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { PageInfo, Post } from '../../models/post';
 import { AsyncPipe } from "@angular/common";
 import { BlogService } from '../../services/blog.service';
 import { CardModule } from 'primeng/card';
+import { InfiniteScrollDirective } from "../../directives/infinite-scroll.directive";
+import { ButtonModule } from "primeng/button";
 
 @Component({
   selector: 'app-series',
   standalone: true,
-  imports: [RouterLink, AsyncPipe, CardModule],
+  imports: [RouterLink, AsyncPipe, CardModule, InfiniteScrollDirective, ButtonModule],
   templateUrl: './series.component.html',
   styleUrl: './series.component.scss'
 })
 export class SeriesComponent {
   blogURL!: string;
   slug: string = "";
-  postsInSeries$!: Observable<Post[]>;
+  postsInSeries: Post[] = [];
+  paginationInfo: PageInfo = { hasNextPage: true, endCursor: '' };
+  isHiddenLoadMore: boolean = true;
+  isActiveInfiniteScroll: boolean = false;
+
   blogService: BlogService = inject(BlogService);
 	route: ActivatedRoute = inject(ActivatedRoute);
 
   ngOnInit(): void {
     this.blogURL = this.blogService.getBlogURL();
-		this.postsInSeries$ = this.route.params.pipe(
-      switchMap((params: Params) => {
-        this.slug = params["slug"];
-        return this.blogService.getPostsInSeries(this.blogURL, this.slug);
-      })
-    );
+		this.route.params.subscribe(params => {
+      this.slug = params['slug'];
+      this.loadPostsInSeries();
+    })
 	}
+
+  private loadPostsInSeries():void{
+    this.blogService.getPostsInSeries(this.blogURL, this.slug).subscribe(seriesPageInfo => {
+      this.paginationInfo = seriesPageInfo.pagination;
+      this.isHiddenLoadMore = !seriesPageInfo.pagination.hasNextPage;
+      this.postsInSeries = seriesPageInfo.posts;
+    })
+  }
+
+  loadMorePostsFromSeries():void {
+    if (!this.paginationInfo.hasNextPage) return;
+    this.isHiddenLoadMore = true;
+    this.blogService.getPostsInSeries(this.blogURL, this.slug, this.paginationInfo.endCursor).pipe(
+    ).subscribe(newPosts => {
+      this.isActiveInfiniteScroll = true;
+      this.paginationInfo = newPosts.pagination;
+      this.postsInSeries = this.postsInSeries.concat(newPosts.posts);
+    });
+  }
 }

angular-primeng-app/src/app/services/blog.service.ts

@@ -106,23 +106,24 @@ export class BlogService {
 			);
 	}
 
-	getPostsInSeries(host: string, slug: string): Observable<Post[]> {
-		return this.apollo
-			.watchQuery<any>({
-				query: GET_POSTS_IN_SERIES,
-				variables: {
-					host: host,
-					slug: slug,
-				},
-			})
-			.valueChanges.pipe(
-				map(({ data }) =>
-					data.publication.series.posts.edges.map(
-						(edge: { node: any }) => edge.node
-					)
-				)
-			);
-	}
+  getPostsInSeries(host: string, slug: string, after: string = ""): Observable<PostsPageInfo> {
+    return this.apollo
+      .watchQuery<any>({
+        query: GET_POSTS_IN_SERIES,
+        variables: {
+          host: host,
+          slug: slug,
+          after: after
+        },
+      }).valueChanges.pipe(
+        map(({ data }) => {
+          const { edges, pageInfo } = data.publication.series.posts;
+          return {
+            posts: edges.map((edge: { node: any; }) => edge.node),
+            pagination: pageInfo
+          };
+        }));
+  }
 
 	getSinglePost(host: string, slug: string): Observable<Post> {
 		return this.apollo