Search Functionality

import { Injectable } from '@angular/core';
import { Observable} from 'rxjs';
import { HttpClient, HttpParams } from '@angular/common/http';
import { environment } from 'src/environments/environment.development';
import { OmdbResponse } from '../../models/omdbResponse.model';
import { OmdbDetails } from '../../models/ombdDetails';

@Injectable({
  providedIn: 'root'
})
export class OmdbService {

  constructor(private http: HttpClient) { }

  fetchMediaItems(title: string, type: string, year: string, page: number): Observable<OmdbResponse> {
    const options = {
      params: new HttpParams()
        .set('title', title.trim())
        .set('type', type)
        .set('year', year)
        .set('page', page.toString())
    };
    return this.http.get<OmdbResponse>(`${environment.serverSearchURL}`, options)
  }
  
  getMediaItemInfo(imdbId: string): Observable<OmdbDetails> {
    return this.http.get<OmdbDetails>(`${environment.serverSearchURL}/${imdbId}`)
  }
}

searchState: SearchState = {
  title: '',
  type: 'all',
  year: '',
  currentPage: 1,
  pageSize: 10,
  collection: [],
  collectionSize: 0,
  searchOnProcess: false,
};

loadPage(page: number): void {
  this.searchState.currentPage = page;
  this.fetchMediaItems();
}

openMediaItem(mediaItem: MediaItem): void {
  this.loadingCard = true;
  this.dialogService
    .openMediaItem(window.innerWidth, mediaItem, false)
    .pipe(finalize(() => (this.loadingCard = false)))
    .subscribe();
}

addToFavorites(mediaItem: MediaItem) {
  this.authService.isLoggedInObservable().pipe(
    take(1),
    switchMap(loggedIn => {
      if (!loggedIn) {
        this.toastrService.warning('You must be logged in to add movies to your list', 'Error');
        this.router.navigate(['/auth/login']);
        return EMPTY; 
      }
      return this.favoritesService.addToFavorites(mediaItem);
    })
  ).subscribe({
    next: () => this.toastrService.success(mediaItem.title, 'Added to favorites'),
    error: (error) => this.toastrService.warning(error.message)
  });
}

featuredMedia: MediaItem[] = FEATURED_MEDIA;

export const environment = {
    serverSearchURL : 'http://localhost:9000/api/omdb',
    // ...
};

displayedColumns: string[] = ['title', 'year', 'type', 'poster', 'Add'];