[HIMA-67] - connected loader to store

src/app/components/search-results/search-results.component.html

@@ -1,5 +1,13 @@
 <div class="result-container">
   <app-filter></app-filter>
+  <div *ngIf="!ds || (ds.loading && !ds.results)">
+    <div [@stagger]="'yes'">
+      <div *ngFor="let dummy of dummies" [style.marginTop.px]="10">
+        <app-product-card-loading> </app-product-card-loading>
+      </div>
+    </div>
+  </div>
+
   <cdk-virtual-scroll-viewport itemSize="180" class="viewport">
     <div *cdkVirtualFor="let product of ds" class="product-item">
       <app-product-card
@@ -13,7 +21,7 @@
     </div>
   </cdk-virtual-scroll-viewport>
   <app-loading
-    *ngIf="(process$ | async)?.loading"
+    *ngIf="!ds || ds.loading"
     [style.marginTop.px]="60"
     [style.marginBottom.px]="60"
     loading="true"

src/app/components/search-results/search-results.component.ts

@@ -8,7 +8,10 @@ import { map, filter, take } from 'rxjs/operators';
 import { Select, Store } from '@ngxs/store';
 import { ItemDTO } from 'dist/cat-service/lib/dtos';
 import { Observable, BehaviorSubject, Subscription } from 'rxjs';
-import { GetProducts } from 'src/app/core/store/actions/product.actions';
+import {
+  GetProducts,
+  SetProducts
+} from 'src/app/core/store/actions/product.actions';
 import { ProcessState } from 'src/app/core/store/state/process.state';
 import {
   AddSearch,
@@ -49,7 +52,8 @@ export class SearchResultsComponent implements OnInit {
     }
     this.ds = new SearchDataSource(
       this.productService,
-      this.currentSearch.query
+      this.currentSearch.query,
+      this.store
     );
     // this.store.dispatch(new GetProducts(this.currentSearch));
     // this.loadProducts();
@@ -87,15 +91,21 @@ export class SearchResultsComponent implements OnInit {
 export class SearchDataSource extends DataSource<Product | undefined> {
   private pageSize = 10;
   private cachedData = Array.from<Product>({ length: 0 });
+  private cachedItemsDTO = Array.from<ItemDTO>({ length: 0 });
   private fetchedPages = new Set<number>();
   private dataStream = new BehaviorSubject<(Product | undefined)[]>(
     this.cachedData
   );
   private subscription = new Subscription();
-
+  public loading = true;
+  public results = false;
   private productMapping = new ProductMapping();
 
-  constructor(private searchService: ProductService, private search: string) {
+  constructor(
+    private searchService: ProductService,
+    private search: string,
+    private store: Store
+  ) {
     super();
   }
   connect(
@@ -124,10 +134,14 @@ export class SearchDataSource extends DataSource<Product | undefined> {
   }
 
   private fetchPage(page: number) {
+    if (page == 0) {
+      this.results = false;
+    }
     if (this.fetchedPages.has(page)) {
       return;
     }
     this.fetchedPages.add(page);
+    this.loading = true;
 
     this.searchService
       .searchItemsWithPagination(
@@ -138,15 +152,25 @@ export class SearchDataSource extends DataSource<Product | undefined> {
       )
       .pipe(take(1))
       .subscribe(data => {
+        this.loading = false;
+        this.results = true;
+
         if (page === 0) {
           this.cachedData = Array.from<Product>({ length: data.hits });
+          this.cachedItemsDTO = Array.from<ItemDTO>({ length: data.hits });
         }
+        this.cachedItemsDTO.splice(
+          page * this.pageSize,
+          this.pageSize,
+          ...data.result
+        );
         this.cachedData.splice(
           page * this.pageSize,
           this.pageSize,
           ...data.result.map(item => this.productMapping.fromItemDTO(item))
         );
         this.dataStream.next(this.cachedData);
+        this.store.dispatch(new SetProducts([...this.cachedItemsDTO]));
       });
   }
 }

src/app/core/store/actions/product.actions.ts

@@ -1,24 +1,32 @@
 import { ItemDTO } from 'projects/cat-service/src/lib';
 import { Search } from '../../models/search.model';
+import { Product } from '../../models/product.model';
 
 export const LOAD_RECENT_PRODUCTS = '[PRODUCTS] Load recent';
 export const GET_PRODUCTS = '[PRODUCTS] Get';
+export const SET_PRODUCTS = '[PRODUCTS] Set';
 export const ADD_SELECTED_PRODUCT = '[PRODUCTS] Add selected';
 
 export class LoadRecentProducts {
-    static readonly type = LOAD_RECENT_PRODUCTS;
+  static readonly type = LOAD_RECENT_PRODUCTS;
 
-    constructor() {}
+  constructor() {}
 }
 
 export class GetProducts {
-    static readonly type = GET_PRODUCTS;
+  static readonly type = GET_PRODUCTS;
 
-    constructor(public payload: Search) {}
+  constructor(public payload: Search) {}
+}
+
+export class SetProducts {
+  static readonly type = SET_PRODUCTS;
+
+  constructor(public payload: ItemDTO[]) {}
 }
 
 export class AddSelectedProduct {
-    static readonly type = ADD_SELECTED_PRODUCT;
+  static readonly type = ADD_SELECTED_PRODUCT;
 
-    constructor(public payload: ItemDTO) {}
+  constructor(public payload: ItemDTO) {}
 }

src/app/core/store/state/process.state.ts

@@ -10,7 +10,8 @@ import { RecentArticleSearch } from '../../models/recent-article-search.model';
 import {
   GetProducts,
   LoadRecentProducts,
-  AddSelectedProduct
+  AddSelectedProduct,
+  SetProducts
 } from '../actions/product.actions';
 import { ItemDTO } from 'dist/cat-service/lib/dtos';
 import { getCurrentProcess } from '../../utils/process.util';
@@ -413,6 +414,19 @@ export class ProcessState {
       });
     }
   }
+  @Action(SetProducts, { cancelUncompleted: true })
+  setProducts(ctx: StateContext<ProcessStateModel>, { payload }: SetProducts) {
+    const state = ctx.getState();
+    const currentProcess = getCurrentProcess(state.processes);
+
+    ctx.patchState({
+      ...state,
+      processes: this.changeProducResultsForCurrentProcess(
+        state.processes,
+        payload
+      )
+    });
+  }
 
   @Action(LoadRecentProducts)
   loadRecentProducts(ctx: StateContext<ProcessStateModel>) {