api-debug.component.ts

import { HttpRequest, HttpResponseBase } from '@angular/common/http';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  EventEmitter,
  Inject,
  InjectionToken,
  Output,
} from '@angular/core';

import { DebugStateService } from '../debug-state.service';

import { ApiDebugInterceptor, DebugEvent } from './api-debug.interceptor';

interface RequestInfo {
  id: string;
  url: string;
  status: 'pending' | 'success' | 'error' | 'cancelled';
  method: string;
  response?: ResponseInfo;
}

interface ResponseInfo {
  status: number;
  statusText: string;
  token?: string;
  tokenLink?: string;
}

export const ApiBaseUrlToken = new InjectionToken<string>('apiBaseUrl');

@Component({
  selector: 'dbg-api-debug',
  templateUrl: './api-debug.component.html',
  styleUrls: ['./api-debug.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ApiDebugComponent {
  @Output() public countChanged = new EventEmitter<number>();
  private readonly requests = new Map<string, RequestInfo>();
  private readonly unseen = new Set<string>();
  private readonly ids: string[] = [];

  constructor(
    interceptor: ApiDebugInterceptor,
    public readonly debug: DebugStateService,
    private readonly cd: ChangeDetectorRef,
    @Inject(ApiBaseUrlToken) private readonly apiPrefix: string
  ) {
    interceptor.events$.subscribe(ev => {
      this.handle(ev);
    });
  }

  public isUnseen({ id }: RequestInfo): boolean {
    return this.unseen.has(id);
  }

  public seen({ id }: RequestInfo): void {
    if (this.unseen.has(id)) {
      this.unseen.delete(id);
      this.cd.markForCheck();
    }
  }

  private handle(ev: DebugEvent): void {
    if (ev.type === 'request') {
      this.addRequest(ev.id, ev.request);
      this.countChanged.emit(this.ids.length);