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 { 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: 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 = 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 })), ); } }