smart.component.ts

import { ChangeDetectionStrategy, Component, HostListener, Inject, OnInit, OnDestroy } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Observable, tap } from 'rxjs';
import { InsectInfoDialogQuery } from '@generated-types';
import { InsectService } from '@app/services/insect.service';

export interface InsectInfoDialogData {
    id: string;
}

@Component({
    selector: 'insect-info-dialog',
    templateUrl: './insect-info-dialog.component.html',
    styleUrls: ['./insect-info-dialog.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InsectInfoDialogComponent implements OnInit, OnDestroy {
    loading = false;
    insectInfoDialog$!: Observable<InsectInfoDialogQuery['insect']>;
    constructor(
        @Inject(MAT_DIALOG_DATA) public data: InsectInfoDialogData,
        private dialogRef: MatDialogRef<InsectInfoDialogComponent>,
        private insectService: InsectService
    ) {}

    ngOnInit(): void {
        this.getInsectInfoDialogData(this.data.id);
    }

    ngOnDestroy(): void {
        this.dialogRef.close();
    }

    @HostListener('keydown.esc')
    close() {
        this.dialogRef.close();
    }

    getInsectInfoDialogData(id: string) {
        this.loading = true;
        this.insectInfoDialog$ = this.insectService.infoDialog(id).pipe(
            tap({
                next: () => {
                    this.loading = false;
                },
                error: (error: Error) => {
                    this.loading = true;
                },
            })
        );
    }
}