Search page.component.ts

export class SearchPageComponent implements OnInit {
  selectedOption = 'countries';
  searchTerm = '';

  results$: Observable<any[]> = of([]);
  results: any[] = [];

  loading: boolean = false;

  constructor(
    private countryApiService: CountryApiService,
    private journalApiService: JournalApiService
  ) {}

  ngOnInit() {}

  onSearch(): void {
    console.log(`Searching ${this.searchTerm}`);

    switch (this.selectedOption) {
      case 'countries':
        this.searchCountries();
        break;
      case 'journals':
        this.searchJournals();
        break;
    }
  }

  private searchCountries() {
    this.results$ = this.countryApiService.findByName(this.searchTerm);
    this.subscribe();
  }

  private searchJournals() {
    this.results$ = this.journalApiService.findByName(this.searchTerm)
    .pipe(
      map((journalApiResponse: JournalApiResponse) => {
        return journalApiResponse.message.items;
      })
    );
    this.subscribe();
  }

  private subscribe(): void {
    this.loading = true;
    this.results$.pipe(take(1)).subscribe({
      next: (data) => {
        this.results = data;
      },
      complete: () => {
        this.loading = false;
      },
    });
  }

  get componentInput() {
    return {
      apiResults: this.results,
      loading: this.loading,
    };
  }

  get selectedComponent(): Type<any> {
    switch (this.selectedOption) {
      case 'countries':
        return CountryTableComponent;
      case 'journals':
        return JournalTableComponent;
      default:
        return CountryTableComponent;
    }
  }
}