dars-audit-view.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Observable, combineLatest } from 'rxjs';
import {
  map,
  filter,
  flatMap,
  shareReplay,
  distinctUntilKeyChanged,
} from 'rxjs/operators';
import { AuditStatus, MetadataStatus } from '../store/state';
import { Store } from '@ngrx/store';
import { GlobalState } from '@app/core/state';
import * as selectors from '../store/selectors';
import { StartLoadingAudit, StartLoadingMetadata } from '../store/actions';
import { AuditMetadata } from '../models/audit-metadata';

@Component({
  selector: 'cse-dars-audit-view',
  templateUrl: './dars-audit-view.component.html',
  styleUrls: ['./dars-audit-view.component.scss'],
})
export class AuditViewComponent implements OnInit {
  public metadataStatus$: Observable<MetadataStatus['status']>;
  public darsDegreeAuditReportId$: Observable<number>;
  public metadata$: Observable<AuditMetadata>;
  public audit$: Observable<AuditStatus>;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private store: Store<GlobalState>,
  ) {}

  public ngOnInit() {
    /**
     * If a user opens the DARS report view directly, the list of all audit
     * metadata hasn't been loaded yet. This subscription loads the all of the
     * user's audit metadata if it hasn't been loaded yet.
     */
    this.metadataStatus$ = this.store
      .select(selectors.metadataStatus)
      .pipe(shareReplay());

    this.metadataStatus$.subscribe(metadataStatus => {
      if (metadataStatus === 'NotLoaded') {
        this.store.dispatch(new StartLoadingMetadata());
      }
    });

    /**
     * Get the `darsDegreeAuditReportId` from the route URL. Sanitize and parse
     * the value to an integer.
     */
    this.darsDegreeAuditReportId$ = this.route.paramMap.pipe(
      map(params => params.get('darsDegreeAuditReportId')),
      filter((id): id is string => id !== null),
      map(id => parseInt(id, 10)),
      shareReplay(),
    );

    this.metadata$ = combineLatest([
      this.darsDegreeAuditReportId$,
      this.store.select(selectors.programMetadata),
    ]).pipe(
      map(([darsDegreeAuditReportId, metadata]) => {
        return metadata.find(md => {
          return md.darsDegreeAuditReportId === darsDegreeAuditReportId;
        });
      }),
      filter((metadata): metadata is AuditMetadata => !!metadata),
      shareReplay(),
    );

    this.audit$ = this.darsDegreeAuditReportId$.pipe(
      flatMap(darsDegreeAuditReportId => {
        return this.store.select(selectors.getAudit, darsDegreeAuditReportId);
      }),
      shareReplay(),
    );

    combineLatest([
      this.metadata$.pipe(distinctUntilKeyChanged('darsDegreeAuditReportId')),
      this.audit$.pipe(distinctUntilKeyChanged('status')),
    ]).subscribe(([metadata, audit]) => {
      if (audit.status === 'NotLoaded') {
        this.store.dispatch(new StartLoadingAudit(metadata));
      }
    });
  }

  public openNewTab() {
    // TODO
  }

  public closeAudit() {
    this.router.navigateByUrl(`/dars`);
  }
}