From 1d0e800faae63998f93ce06fc725bbefc5a433b0 Mon Sep 17 00:00:00 2001
From: Ronan Connolly <Ronan@RonanConnolly.dev>
Date: Tue, 7 May 2024 14:52:12 +0200
Subject: [PATCH] Add in pagination

---
 .../store/movie-store/movie-store.service.ts  |  4 +++-
 src/app/views/search/search.component.html    | 23 ++++++++++---------
 src/app/views/search/search.component.scss    |  4 ++++
 src/app/views/search/search.component.ts      | 14 +++++++++++
 4 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/app/shared/data/store/movie-store/movie-store.service.ts b/src/app/shared/data/store/movie-store/movie-store.service.ts
index 2538f49..18315a0 100644
--- a/src/app/shared/data/store/movie-store/movie-store.service.ts
+++ b/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));
diff --git a/src/app/views/search/search.component.html b/src/app/views/search/search.component.html
index eacc060..70c00b4 100644
--- a/src/app/views/search/search.component.html
+++ b/src/app/views/search/search.component.html
@@ -16,15 +16,14 @@
 </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>
@@ -32,25 +31,27 @@
   <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>
diff --git a/src/app/views/search/search.component.scss b/src/app/views/search/search.component.scss
index d087439..db52b08 100644
--- a/src/app/views/search/search.component.scss
+++ b/src/app/views/search/search.component.scss
@@ -37,6 +37,10 @@ small {
   text-align: center;
   .movie {
     font-size: 1.2em;
+
+    span {
+      cursor: pointer;
+    }
   }
 
   .movie {
diff --git a/src/app/views/search/search.component.ts b/src/app/views/search/search.component.ts
index 8ac55ce..0c807f5 100644
--- a/src/app/views/search/search.component.ts
+++ b/src/app/views/search/search.component.ts
@@ -27,6 +27,9 @@ 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))
@@ -34,7 +37,18 @@ export class SearchComponent {
         // 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 });
+  }
 }