working parallel

src/app/api/employees.service.ts

@@ -1,8 +1,16 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, of, merge, concat } from 'rxjs';
 import { Employee } from 'src/typings';
-import {map} from 'rxjs/operators';
+import { map, flatMap, tap, scan } from 'rxjs/operators';
+
+
+const MAX_PAGE_SIZE = 50;
+
+type Chunk = {
+  data: Employee[]
+  idx: number
+};
 
 @Injectable({
   providedIn: 'root'
@@ -11,7 +19,39 @@ export class EmployeesService {
 
   constructor(private http: HttpClient) { }
 
-  getEmployees() {
+  getEmployees(page = 1) {
-    return this.http.get<Employee[]>('http://localhost:3000/employees');
+    return this.http.get<Employee[]>(`http://localhost:3000/employees?_page=${page}`);
   }
+
+  getAllEmployees(): Observable<Employee[]> {
+    return this.getFirstPage().pipe(
+      flatMap(({ total, data }) => {
+        const pageCount = Math.ceil(total / MAX_PAGE_SIZE);
+        const pages = Array(pageCount - 1).fill(0).map((_, idx) => idx + 2);
+        return merge(
+          of({ data, idx: 1 }),
+          ...pages.map(idx => this.getEmployees(idx).pipe(
+            map(data => ({ data, idx }))
+          ))
+        )
+      }),
+      scan((sparseChunks, { data, idx }: Chunk) => {
+        sparseChunks[idx] = data
+        return sparseChunks;
+      }, [] as Employee[][]),
+      map(sparseChunks => sparseChunks.flat())
+      // scan((allItems, chunk: Chunk) => allItems.concat(chunk.data), [] as Employee[] ),
+
+    );
+  }
+
+  private getFirstPage(): Observable<{ total: number, data: Employee[] }> {
+    return this.http.get<Employee[]>(`http://localhost:3000/employees`, { observe: 'response' }).pipe(
+      map(res => ({
+        total: parseInt(res.headers.get('X-Total-Count')),
+        data: res.body,
+      })),
+    );
+  }
+
 }

src/app/employees/employee-container/employee-container.component.html

@@ -1,5 +1,5 @@
 <h1>Employees</h1>
-<ip-loader></ip-loader>
+<ip-loader *ngIf="isLoading"></ip-loader>
 <!-- {{employees$ | async}} -->
 <div></div>
 <ng-container

src/app/employees/employee-container/employee-container.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Employee } from 'src/typings';
 import { EmployeesService } from 'src/app/api/employees.service';
 import { Subscription, pipe, Observable } from 'rxjs';
-import { startWith, share } from 'rxjs/operators';
+import { startWith, share, shareReplay, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'ip-employee-container',
@@ -11,9 +11,11 @@ import { startWith, share } from 'rxjs/operators';
 })
 export class EmployeeContainerComponent {
 
-  employees$ = this.employeesService.getEmployees().pipe(
+  isLoading = true;
-    share(),
+  employees$ = this.employeesService.getAllEmployees().pipe(
-    // shareReplay
+    tap(() => this.isLoading = false),
+    shareReplay(),
+    // share
   );
 
   // employees: Employee[];

tsconfig.json

@@ -15,7 +15,7 @@
       "node_modules/@types"
     ],
     "lib": [
-      "es2018",
+      "es2019",
       "dom"
     ]
   },