All files / app/search/presenter/pages/github-search/components/organisms/github-search-search-results github-search-search-results.component.ts

100% Statements 30/30
100% Branches 5/5
100% Functions 9/9
100% Lines 29/29

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84                      1x 10x         10x 10x 10x       10x 10x       10x           10x 23x         23x   23x 7x     16x       16x       16x 16x   16x 11x     5x 3x     2x 1x     1x       2x   2x 1x 1x     1x      
import { Component, OnDestroy } from '@angular/core';
import { map, Observable, Subject, takeUntil } from 'rxjs';
import { GithubSearchController } from '../../../github-search.controller';
import { InfoMessage } from '../../../models/info-message';
import { InfoMessageType } from '../../../models/info-message-type';
 
@Component({
  selector: 'app-github-search-search-results',
  templateUrl: './github-search-search-results.component.html',
  styleUrls: ['./github-search-search-results.component.scss'],
})
export class GithubSearchSearchResultsComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
 
  infoMessage!: InfoMessage | undefined;
  isLoading$!: Observable<boolean>;
 
  constructor(public controller: GithubSearchController) {
    this.listenToStatesChanges();
    this.createHelperObservables();
  }
 
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
 
  listenToStatesChanges() {
    this.controller.dataState$
      .pipe(takeUntil(this.destroy$))
      .subscribe(this.onDataStateChange.bind(this));
  }
 
  createHelperObservables() {
    this.isLoading$ = this.controller.dataState$.pipe(
      map((dataState) => dataState.isLoading)
    );
  }
 
  onDataStateChange() {
    const dataState = this.controller.dataState$.value;
 
    if (dataState.isLoading) {
      return;
    }
 
    this.setInfoCardMessage();
  }
 
  setInfoCardMessage() {
    this.infoMessage = this.buildInfoCardMessage();
  }
 
  buildInfoCardMessage(): InfoMessage | undefined {
    const filterState = this.controller.filterState$.value;
    const dataState = this.controller.dataState$.value;
 
    if (filterState.searchTerm === '') {
      return InfoMessage.find(InfoMessageType.INTRODUCTION);
    }
 
    if (dataState.hasError) {
      return InfoMessage.find(InfoMessageType.SEARCH_ERROR);
    }
 
    if (dataState.data.items.length === 0) {
      return InfoMessage.find(InfoMessageType.NO_SEARCH_RESULTS);
    }
 
    return undefined;
  }
 
  onInfoCardClick() {
    const dataState = this.controller.dataState$.value;
 
    if (dataState.hasError) {
      this.controller.load();
      return;
    }
 
    this.controller.focusSearchInput$.next();
  }
}