Need to figure out how to make search page search without duplicating the api calls and to not have a limit set.

UI/Web/src/app/_services/search.service.ts

@@ -14,6 +14,7 @@ export class SearchService {
 
   private searchSubject: ReplaySubject<string> = new ReplaySubject(1);
   searchResults$: Observable<SearchResultGroup>;
+  searchTerm$: Observable<string> = this.searchSubject.asObservable();
 
   constructor(private httpClient: HttpClient) {
     this.searchResults$ = this.searchSubject.pipe(

UI/Web/src/app/nav/grouped-typeahead/grouped-typeahead.component.ts

@@ -180,6 +180,7 @@ export class GroupedTypeaheadComponent implements OnInit, OnDestroy {
   }
 
   open(event?: FocusEvent) {
+    // TODO: Supress showing the groupped results when on the search page directly
     this.hasFocus = true;
     this.focusChanged.emit(this.hasFocus);
     this.cdRef.markForCheck();

UI/Web/src/app/search/search/search.component.html

@@ -1,15 +1,13 @@
-<!-- <app-card-detail-layout
-    [isLoading]="loadingSeries"
-    [items]="series"
-    [pagination]="pagination"
-    [filterSettings]="filterSettings"
-    [trackByIdentity]="trackByIdentity"
-    [filterOpen]="filterOpen"
-    [jumpBarKeys]="jumpKeys"
-    [refresh]="refresh"
-    (applyFilter)="updateFilter($event)"
+<h3>Search Results: {{searchService.searchTerm$ | async}}</h3>
+<app-card-detail-layout
+    [isLoading]="isLoading"
+    [items]="(series$ | async) || []"
+
 >
     <ng-template #cardItem let-item let-position="idx">
         <app-series-card [data]="item" [libraryId]="item.libraryId" [suppressLibraryLink]="false" (reload)="loadPage()"[allowSelection]="false"></app-series-card>
     </ng-template>
-</app-card-detail-layout> -->
+</app-card-detail-layout>
+<!--    [pagination]="pagination"
+    [trackByIdentity]="trackByIdentity"
+    [refresh]="refresh"-->

UI/Web/src/app/search/search/search.component.ts

@@ -1,28 +1,52 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AccountService } from 'src/app/_services/account.service';
+import { map, Observable, Subject, switchMap, takeUntil } from 'rxjs';
+import { SearchResult } from 'src/app/_models/search-result';
+import { SearchService } from 'src/app/_services/search.service';
 
 @Component({
   selector: 'app-search',
   templateUrl: './search.component.html',
   styleUrls: ['./search.component.scss']
 })
-export class SearchComponent implements OnInit {
+export class SearchComponent implements OnInit, OnDestroy {
 
+  isLoading: boolean = false;
   originalQueryString: string = '';
+  series$!: Observable<SearchResult[]>;
 
-  constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService,) {
+  private onDestroy: Subject<void> = new Subject();
+
+  constructor(private route: ActivatedRoute, private router: Router, public searchService: SearchService,) {
 
   }
 
   ngOnInit(): void {
     const queryString = this.route.snapshot.queryParamMap.get('query');
     console.log('query: ', queryString)
-    if (queryString === undefined || queryString === null) {
-      //this.router.navigateByUrl('/libraries');
+    if (queryString === undefined || queryString === null || queryString === '') {
+      this.router.navigateByUrl('/libraries');
       return;
     }
     this.originalQueryString = queryString;
+
+    // const searchResults$ = this.searchService.searchTerm$.pipe(
+    //   takeUntil(this.onDestroy),
+    //   switchMap(() =>)
+
+    // );
+
+    this.series$ = this.searchService.searchResults$.pipe(
+      takeUntil(this.onDestroy),
+      map(g => g.series),
+    );
   }
 
+  ngOnDestroy() {
+    this.onDestroy.next();
+    this.onDestroy.complete();
+  }
+
+  loadPage() {}
+
 }