add paging to search

src/frontend/src/app/api.service.ts

@@ -352,10 +352,11 @@ export class ApiService {
     );
   }
 
-  public searchMedia(query: string, mediaType: string) {
+  public searchMedia(query: string, mediaType: string, page = 1) {
     let params = {
       q: query,
       media_type: mediaType,
+      page: page.toString(),
     };
     params = _.assign(params, this._defaultParams());
     const httpParams = new HttpParams({fromObject: params});

src/frontend/src/app/search/search-auto.component.html

@@ -6,6 +6,13 @@
 
   <div class="alert alert-danger col-12 mt-3" *ngIf="errorMessage">{{ errorMessage }}</div>
 
-  <app-media-results [results]="results" [mediaType]="searchMediaType()"></app-media-results>
+  <!-- results -->
+  <app-media-results [results]="searchResults.results" [mediaType]="searchMediaType()"></app-media-results>
+
+  <!-- pagination -->
+  <div class="row justify-content-between my-3 mr-2" *ngIf="q.length">
+    <button class="btn btn-primary" type="button" [disabled]="page === 1" (click)="nextPage(-1)">Previous</button>
+    <button class="btn btn-info" type="button" [disabled]="page === searchResults.total_pages" (click)="nextPage(1)">Next</button>
+  </div>
 
 </div>

src/frontend/src/app/search/search-auto.component.ts

@@ -9,10 +9,20 @@ import { ApiService } from '../api.service';
   styleUrls: ['./search-auto.component.css']
 })
 export class SearchAutoComponent implements OnInit {
-  public results: any[] = [];
+  public page = 1;
+  public searchResults: {
+    page: number,
+    results: any[],
+    total_pages: number,
+  } = {
+    page: 0,
+    results: [],
+    total_pages: 0,
+  };
   public isSearching = false;
   public errorMessage: string;
   public type: string;
+  public q = '';
 
   constructor(
     private apiService: ApiService,
@@ -23,10 +33,12 @@ export class SearchAutoComponent implements OnInit {
   }
 
   ngOnInit() {
-    // auto search on load if query params exist
-    if (this.route.snapshot.queryParams['q'] && this.route.snapshot.queryParams['type']) {
-      this.search(this.route.snapshot.queryParams);
-    }
+    // search when query params change
+    this.route.queryParams.subscribe((params) => {
+      if (params['q'] && params['type']) {
+        this.search(params);
+      }
+    });
   }
 
   public searchMediaType() {
@@ -38,7 +50,10 @@ export class SearchAutoComponent implements OnInit {
   }
 
   public search(queryParams: any) {
+
     this.type = queryParams.type;
+    this.q = queryParams.q;
+    this.page = parseInt(queryParams.page || 1, 10);
 
     // add the search query to the route parameters
     this.router.navigate(
@@ -50,10 +65,10 @@ export class SearchAutoComponent implements OnInit {
     );
 
     this.errorMessage = null;
-    this.results = [];
+    this.searchResults.results = [];
     this.isSearching = true;
 
-    console.log('Searching %s for %s', queryParams.type, queryParams.q);
+    console.log('Searching %s for "%s"', queryParams.type, queryParams.q);
 
     let query;
 
@@ -66,13 +81,14 @@ export class SearchAutoComponent implements OnInit {
     } else if (recommendedToMediaQueryRegEx.test(queryParams['q'])) {
       query = this.apiService.searchRecommendedMedia(queryParams['q'].match(recommendedToMediaQueryRegEx)[1], queryParams.type);
     } else {
-      query = this.apiService.searchMedia(queryParams.q, queryParams.type);
+      query = this.apiService.searchMedia(queryParams.q, queryParams.type, this.page);
     }
 
     query.subscribe(
       (data) => {
+        this.searchResults = data;
         // remove results without a poster image
-        this.results = data.results.filter((result) => {
+        this.searchResults.results = data.results.filter((result) => {
           return result.poster_path;
         });
         this.isSearching = false;
@@ -83,10 +99,15 @@ export class SearchAutoComponent implements OnInit {
         console.error(error);
       },
       () => {
-        if (this.results.length <= 0) {
+        if (this.searchResults.results.length <= 0) {
           this.errorMessage = 'No results';
         }
       }
     );
   }
+
+  public nextPage(pageForward: number) {
+    this.page += pageForward;
+    this.search({type: this.type, q: this.q, page: this.page});
+  }
 }

src/nefarious/api/views.py

@@ -97,10 +97,12 @@ def get(self, request):
 
         # prepare query
         tmdb = get_tmdb_client(nefarious_settings)
+        page = request.query_params.get('page', 1)
         query = request.query_params.get('q')
 
         params = {
             'query': query,
+            'page': page,
             'language': nefarious_settings.language,
         }