- fetch posts from the BE

api-gateway/angular.json

@@ -25,7 +25,9 @@
               "src/main/webapp/assets"
             ],
             "styles": [
-              "src/main/webapp/styles.css"
+              "src/main/webapp/styles.css",
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css"
             ],
             "scripts": []
           },

api-gateway/package.json

@@ -18,6 +18,8 @@
     "@angular/platform-browser": "^17.0.0",
     "@angular/platform-browser-dynamic": "^17.0.0",
     "@angular/router": "^17.0.0",
+    "ngx-infinite-scroll": "^17.0.0",
+    "primeng": "^17.17.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

api-gateway/src/main/webapp/app/app.component.html

@@ -1 +1 @@
-{{title}}
+<app-posts />

api-gateway/src/main/webapp/app/app.component.ts

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
+import {PostsComponent} from "./posts/posts.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet],
+  imports: [CommonModule, RouterOutlet, ButtonModule, PostsComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

api-gateway/src/main/webapp/app/app.config.ts

@@ -2,7 +2,8 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import {provideHttpClient} from "@angular/common/http";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideRouter(routes), provideHttpClient()]
 };

api-gateway/src/main/webapp/app/posts/post.model.d.ts

@@ -0,0 +1,37 @@
+export interface PostDetail {
+    content: string;
+}
+
+export interface Post {
+    title: string;
+    postDetail: PostDetail;
+}
+
+export interface Sort {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+}
+
+export interface Pageable {
+    pageNumber: number;
+    pageSize: number;
+    sort: Sort;
+    offset: number;
+    paged: boolean;
+    unpaged: boolean;
+}
+
+export interface PostPage {
+    totalPages: number;
+    totalElements: number;
+    first: boolean;
+    last: boolean;
+    size: number;
+    content: Post[];
+    number: number;
+    sort: Sort;
+    numberOfElements: number;
+    pageable: Pageable;
+    empty: boolean;
+}

api-gateway/src/main/webapp/app/posts/post.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PostService } from './post.service';
+
+describe('PostService', () => {
+  let service: PostService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PostService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

api-gateway/src/main/webapp/app/posts/post.service.ts

@@ -0,0 +1,15 @@
+import {inject, Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {PostPage} from "./post.model";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PostService {
+    private http: HttpClient = inject(HttpClient);
+
+    findAll(pageNumber: number, size: number): Observable<PostPage> {
+        return this.http.get<PostPage>(`/post-service/api/post?page=${pageNumber}&size=${size}&sort=desc`);
+    }
+}

api-gateway/src/main/webapp/app/posts/post/post.component.html

@@ -0,0 +1,5 @@
+<p-card header="{{header}}" [style]="{width: '360px'}">
+    <p class="m-0">
+        {{content}}
+    </p>
+</p-card>

api-gateway/src/main/webapp/app/posts/post/post.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostComponent } from './post.component';
+
+describe('PostComponent', () => {
+  let component: PostComponent;
+  let fixture: ComponentFixture<PostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

api-gateway/src/main/webapp/app/posts/post/post.component.ts

@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+import {CardModule} from 'primeng/card';
+
+@Component({
+    selector: 'app-post',
+    standalone: true,
+    imports: [CardModule],
+    templateUrl: './post.component.html',
+    styleUrl: './post.component.css'
+})
+export class PostComponent {
+    @Input() header = '';
+    @Input() content = '';
+}

api-gateway/src/main/webapp/app/posts/posts.component.html

@@ -0,0 +1,15 @@
+<div
+        class="search-results"
+        infiniteScroll
+        [infiniteScrollDistance]="1"
+        [infiniteScrollThrottle]="500"
+        (scrolled)="onScroll()"
+        [scrollWindow]="false"
+>
+    <div class="data-card" *ngFor="let post of posts">
+        <app-post [header]="post.title" [content]="post.postDetail.content"/>
+    </div>
+
+    <div *ngIf="isLoading">Loading...</div>
+</div>
+

api-gateway/src/main/webapp/app/posts/posts.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostsComponent } from './posts.component';
+
+describe('PostsComponent', () => {
+  let component: PostsComponent;
+  let fixture: ComponentFixture<PostsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PostsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

api-gateway/src/main/webapp/app/posts/posts.component.ts

@@ -0,0 +1,60 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {Post} from "./post.model";
+import {PostService} from "./post.service";
+import {PostComponent} from "./post/post.component";
+import {DataViewModule} from 'primeng/dataview';
+import {NgForOf, NgIf} from "@angular/common";
+import {InfiniteScrollModule} from "ngx-infinite-scroll";
+
+@Component({
+    selector: 'app-posts',
+    standalone: true,
+    imports: [
+        PostComponent, DataViewModule, NgForOf, InfiniteScrollModule, NgIf
+    ],
+    templateUrl: './posts.component.html',
+    styleUrl: './posts.component.css'
+})
+export class PostsComponent implements OnInit {
+    private postService: PostService = inject(PostService);
+
+    posts: Post[] = [];
+    isLoading = false;
+    currentPage = 0;
+    itemsPerPage = 10;
+
+    ngOnInit(): void {
+        this.loadData();
+    }
+
+    toggleLoading = () => this.isLoading = !this.isLoading;
+
+    // it will be called when this component gets initialized.
+    loadData = () => {
+        this.toggleLoading();
+        this.postService.findAll(this.currentPage, this.itemsPerPage).subscribe({
+            next: postPage => {
+                this.posts.push(...postPage.content);
+            },
+            error: err => console.log(err),
+            complete: () => this.toggleLoading()
+        })
+    }
+
+    appendData = () => {
+        this.toggleLoading();
+        this.postService.findAll(this.currentPage, this.itemsPerPage).subscribe({
+            next: postPage => {
+                this.posts.push(...this.posts, ...postPage.content);
+            },
+            error: err => console.log(err),
+            complete: () => this.toggleLoading()
+        })
+    }
+
+    onScroll = () => {
+        console.log('on scroll');
+        this.currentPage++;
+        this.appendData();
+    }
+}