send-photo.ts

import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import { DocumentModel } from 'src/app/core/models/document.model';
import { LifeProofModel } from 'src/app/core/models/life-proof.model';
import { uploadFaceCompare } from '../../../core/store/actions/face-compare.action';
import { DocumentsState } from '../../../core/store/states/documents.state';
import { FaceCompareState } from '../../../core/store/states/face-compare.state';
import { LifeProofState } from '../../../core/store/states/life-proof.state';

@Component({
  selector: 'app-send-photos',
  templateUrl: './send-photos.component.html',
  styleUrls: ['./send-photos.component.css'],
})
export class SendPhotosComponent implements OnInit, OnDestroy {
  subscriptions: Array<Subscription> = new Array();

  lifeProof: LifeProofModel | undefined;
  document: DocumentModel | undefined;

  constructor(
    private zone: NgZone,
    private router: Router,
    private store: Store<any>
  ) {}

  ngOnInit(): void {
    const $lifeProofSub = this.store
      .select('lifeProof')
      .pipe(
        map((state: LifeProofState) => {
          if (state.uploading) return;

          if (state.result != null) {
            this.lifeProof = state.result;
            this._requestFaceCompare();
          } else {
            if (state.error === '500') {
              this.zone.run(() => this.router.navigateByUrl('fake-photo'));
            }
          }
        })
      )
      .subscribe();

    const $documentsSub = this.store
      .select('personalDocument')
      .pipe(
        map((state: DocumentsState) => {
          console.log('documentState loading: ', state);
          if (state.uploading) return;
          if (state.result != null) {
            this.document = state.result.frontPhoto;
            this._requestFaceCompare();
          }
        })
      )
      .subscribe();

    const $faceCompareSub = this.store
      .select('faceCompare')
      .pipe(
        map((state: FaceCompareState) => {
          if (state.uploading) return;

          if (state.result != null) {
            if (state.result < 0.5) {
              this.zone.run(() =>
                this.router.navigateByUrl('proof-of-residence-request')
              );
            } else {
              this.zone.run(() => this.router.navigateByUrl('fake-photo'));
            }
          }
        })
      )
      .subscribe();

    this.subscriptions.push($lifeProofSub);
    this.subscriptions.push($documentsSub);
    this.subscriptions.push($faceCompareSub);
  }

  _requestFaceCompare() {
    if (this.document != undefined && this.lifeProof != undefined) {
      this.store.dispatch(
        uploadFaceCompare({
          payload: {
            documentPhoto: this.document.image!,
            userPhoto: this.lifeProof.frontalImage!,
          },
        })
      );
    }
  }

  ngOnDestroy() {
    this.subscriptions.forEach((sub) => sub.unsubscribe());
  }
}