ladylilia.com/apps/merchandise/src/app/services/merchandise.service.ts

import { Injectable } from '@angular/core';

import {
    HttpClient,
    HttpParams
} from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { forkJoin } from 'rxjs/observable/forkJoin';
import { of } from 'rxjs/observable/of';

import {
    map,
    mergeMap
} from 'rxjs/operators';

import {
    Product,
    Variant
} from '../models/product';


@Injectable()
export class MerchandiseService {
    constructor(private http: HttpClient) { }

    findProducts(
        filter = '', sortBy = 'id', sortOrder = 'asc',
        pageNumber = 0, pageSize = 5): Observable<any> {

        return this.http.get('/teespring/api/products', {
            observe: 'response',
            params: new HttpParams()
                .set('filter', filter)
                .set('sort_by', sortBy)
                .set('sort_order', sortOrder)
                .set('page_number', pageNumber.toString())
                .set('page_size', pageSize.toString())
        }).pipe(
            map((res: any) => {
                let totalCount = parseInt(res.headers.get('X-Total-Count'));
                return res.body.map(p => ({product: <Product>p, totalCount: totalCount}));
            }),
            mergeMap(data => {
                if (data.length > 0) {
                    return forkJoin(data.map(x =>
                        this.http.get('/teespring/api/products/' + x.product.id + '/variants')
                            .pipe(
                                map(res => {
                                    x.product.variants = <Variant[]>res;
                                    return x;
                                })
                            )
                    ));
                }

                return of([]);
            }),
            /* FIXME: preloading is not working
            map(data => {
                let urls = data.map(x => x.product.variants.map(v => [v.front_url, v.back_url]))
                    .reduce((acc, cur) => acc.concat(cur)).reduce((acc, cur) => acc.concat(cur));

                forkJoin(urls.map(url => this.http.get(url, {responseType: 'blob'})))
                    .pipe(
                        map(res => window.URL.createObjectURL(new Blob(res)))
                    )
                    .subscribe();

                return data;
            }),
            */
            map(data => ({
                products: data.map(x => x.product),
                totalCount: data.length > 0 ? data[0].totalCount : 0
            })),
        );
    }
}