import { Component , HostBinding , OnInit , OnDestroy , ViewChild , AfterViewInit , } from '@angular/core' ; import { Subject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { ActivatedRoute } from '@angular/router' ; import { CoffeeListStore } from '../../services/coffee-list.store' ; import { CoffeeListEndpoint } from '../../services/coffee-list.endpoint' ; import { ModalComponent } from '../../../../shared/components/modal/modal.component' ; import { COFFEE_LIST_CONFIG } from '../../coffee-list.config' ; import * as sortHelpers from '../../../../shared/helpers/sort.helpers' ; @ Component ( { templateUrl : './coffee-list.view.html' , styleUrls : [ './coffee-list.view.scss' ] , providers : [ CoffeeListStore , CoffeeListEndpoint ] , } ) export class CoffeeListView implements OnInit , AfterViewInit , OnDestroy { @ HostBinding ( 'class' ) cssClass = 'ce-view ce-coffee-list-view' ; @ ViewChild ( 'detailsModal' ) detailsModal : ModalComponent ; private ngUnsubscribe$ : Subject < undefined > = new Subject ( ) ; constructor ( public store , private route ) { } ngOnInit ( ) { this . store . init ( ) ; this . subscribeToQueryParamsUpdates ( ) ; } ngAfterViewInit ( ) { this . store . setDetailsModal ( this . detailsModal ) ; } ngOnDestroy ( ) { this . ngUnsubscribe$ . next ( ) ; this . ngUnsubscribe$ . complete ( ) ; } private subscribeToQueryParamsUpdates ( ) { this . route . queryParams . pipe ( takeUntil ( this . ngUnsubscribe$ ) ) . subscribe ( params => { this . store . sortCandidates ( sortHelpers . convertQueryParamsToSort ( params , COFFEE_LIST_CONFIG . defaultSortField ) ) ; } ) ; } }