Gbuomprisco

@Component({
    selector: 'cf-tile',
    templateUrl: './tile.component.html',
    styleUrls: ['./tile.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class TileComponent {
    @Input() tile: Tile;

    constructor(

Gbuomprisco

@Injectable()
export class AssetsFacadeImplService implements AssetsFacadeService {
    public assets$ = this.store.select(selectAllAssets);

    constructor(private store: Store<EntityState<Asset>>) {}

    getAssets() {
        this.store.dispatch(
            getAssetsRequestStarted({
                payload: []

Gbuomprisco

@Injectable()
export class DashboardFacadeServiceImpl implements DashboardFacadeService {
    public tiles$: Observable<Tile[]> = this.store.select(selectAllTiles);

    constructor(private store: Store<EntityAdapter<Tile>>) {}

    addTile(payload: Tile) {
        this.store.dispatch(addTile({ payload }));
    }

Gbuomprisco

@Component({
    selector: 'cf-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent implements OnInit {
    public tiles$ = this.dashboardFacade.tiles$;

    constructor(

Gbuomprisco

<mat-grid-list
    cols="4"
    rowHeight="2:1"
    gutterSize="15px"
    *ngIf="tiles$ | async as tiles"
>
    <ng-container *ngFor="let tile of tiles">
        <mat-grid-tile class="pricer">
            <cf-tile [tile]="tile"></cf-tile>
        </mat-grid-tile>

Gbuomprisco

@Injectable()
export class PricesEffects {
    constructor(
        private actions: Actions,
        private coincap: CoincapService,
        private pricesFacade: PricesFacadeService
    ) {}

    createPriceSubscription$ = this.createPriceSubscription();
    prices$ = this.getPrices();

Gbuomprisco

export class CoincapService {
    // .. other methods
    
    webSocket: WebSocket;
    
    public connectToPriceStream(assets: string[]): Observable<PriceState> {
        this.createConnection(assets);

        return new Observable(observer => {
            const webSocket = this.webSocket;

Gbuomprisco

private addAssets() {
    return createEffect(() =>
        this.actions.pipe(
            ofType(getAssetsRequestSuccess.type),
            map(({ payload }: { payload: Asset[] }) =>
                addAssets({ payload })
            )
        )
    );
}

Gbuomprisco

private getAllAssets() {
    return createEffect(() =>
        this.actions.pipe(
            ofType(getAssetsRequestStarted.type),
            mergeMap(({ payload }: { payload: string[] }) =>
                this.coincap.getAssets(payload).pipe(
                    map((response: GetAssetsResponseDto) => response.data),
                    catchError(() => of(undefined))
                )
            ),

Gbuomprisco

@Injectable()
export class AssetsEffects {
    constructor(private actions: Actions, private coincap: CoincapService) {}

    public getAllAssets$ = this.getAllAssets();
    public addAssets$ = this.addAssets();

    private addAssets() {
        return createEffect(() =>
            this.actions.pipe(