show-ipfs-image.component.ts

import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewChild , ElementRef } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { windowRefToken } from '../../../core/services/tokens';
import { Observable } from 'rxjs';
import { takeUntil, map, tap, filter, take } from 'rxjs/operators';

import { Store, select } from '@ngrx/store';
import * as fromStore from '../../store/ipfs-upload.reducer';
import * as IpfsActions from '../../store/ipfs-upload.actions';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-show-ipfs-image',
  templateUrl: 'show-ipfs-image.component.html',
  styleUrls: ['show-ipfs-image.component.css']
})
export class ShowIpfsImageComponent implements OnInit {
  @ViewChild('ipfsImage', {static: true}) image: ElementRef;
  image$: Observable<Blob>;

  constructor(
        private store$: Store<fromStore.AppState>,
        public dialogRef: MatDialogRef<ShowIpfsImageComponent>,
        @Inject(windowRefToken) private windowRef: Window
        ) { }

  ngOnInit() {
    this.image$ = this.checkStore().pipe(
      tap((blob) => 
          this.image.nativeElement.src = this.windowRef.URL.createObjectURL(blob)
       )
    );
  }

  checkStore(): Observable<Blob> {
    return this.store$.pipe(
      select(fromStore.getImageBlob),
       tap(image => {
        if (!image) {
          this.store$.dispatch(IpfsActions.load_image);
        }
      }),
      filter(image => !!image),
      take(1)
    );
 }
}