Add in pagination

src/app/shared/data/store/movie-store/movie-store.service.ts

@@ -15,7 +15,9 @@ export class MovieStoreService {
 
   public constructor(private theMovieDbService: TheMovieDbService) {}
 
-  public searchMovies(searchQuery: string): void {
+  public searchMovies(searchQuery: string, page = 1): void {
+    searchQuery = `${searchQuery}&page=${page}`;
+
     this.theMovieDbService
       .searchMovies(searchQuery)
       .subscribe((tmdbMovieResponse) => this._movies.next(tmdbMovieResponse));

src/app/views/search/search.component.html

@@ -16,41 +16,42 @@
 </header>
 <main>
   @if (movieStoreService.movies$ | async; as moviesResponse) {
-  <small>
-    Showing
-    {{ moviesResponse?.results?.length }} results out of
-    {{ moviesResponse?.total_results }}
-  </small>
+  <small> {{ moviesResponse?.total_results }} total results </small>
   <div class="movies">
-    @for (movie of (moviesResponse)?.results; track movie) {
+    @for (movie of (moviesResponse)?.results; track movie.id) {
     <div class="movie">
-      {{ movie.title }}
+      <!-- TODO: Use Mat Table here: -->
+      <span (click)="goToMovieDetail(movie.id)">
+        {{ movie.title }}
+      </span>
     </div>
     }
   </div>
 
   <div class="pagination">
     <span>
       <button
-        [disabled]="moviesResponse?.page === 1"
+        [disabled]="moviesResponse.page === 1"
         color="accent"
         mat-icon-button
         title="Back"
+        (click)="goToPage(moviesResponse.page - 1)"
       >
         <mat-icon>arrow_back</mat-icon>
       </button>
     </span>
     <small>
       Page
-      {{ moviesResponse?.page }}
-      of {{ moviesResponse?.total_pages }}
+      {{ moviesResponse.page }}
+      of {{ moviesResponse.total_pages }}
     </small>
     <span>
       <button
-        [disabled]="moviesResponse?.page === moviesResponse?.total_pages"
+        [disabled]="moviesResponse.page === moviesResponse.total_pages"
         color="accent"
         mat-icon-button
         title="Forward"
+        (click)="goToPage(moviesResponse.page + 1)"
       >
         <mat-icon>arrow_forward</mat-icon>
       </button>

src/app/views/search/search.component.scss

@@ -37,6 +37,10 @@ small {
   text-align: center;
   .movie {
     font-size: 1.2em;
+
+    span {
+      cursor: pointer;
+    }
   }
 
   .movie {

src/app/views/search/search.component.ts

@@ -27,14 +27,28 @@ import { debounce, debounceTime } from 'rxjs';
 export class SearchComponent {
   public searchFormControl = new FormControl('');
 
+  // TODO: Move this to the MovieStoreService:
+  private searchQuery: string | undefined;
+
   public constructor(public movieStoreService: MovieStoreService) {
     this.searchFormControl.valueChanges
       .pipe(debounceTime(500))
       .subscribe((searchQuery) => {
         // TODO: Add in a filter operator:
         if (searchQuery) {
           this.movieStoreService.searchMovies(searchQuery);
+          this.searchQuery = searchQuery;
         }
       });
   }
+
+  public goToPage(page: number): void {
+    if (this.searchQuery) {
+      this.movieStoreService.searchMovies(this.searchQuery, page);
+    }
+  }
+
+  public goToMovieDetail(movieId: number): void {
+    console.log({ movieId });
+  }
 }