WIP: Add server-side-search prototype to test with

rodekruis · Mar 8, 2024 · 49aa6f0 · 49aa6f0
1 parent f2b51cb
commit 49aa6f0
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 4 deletions.
diff --git a/src/app/pages/search/search.page.html b/src/app/pages/search/search.page.html
@@ -12,9 +12,19 @@
 </div>
 
 <h2 class="ion-no-margin text-style--header text-style--size-2">
-  {{ regionData?.labelSearchPageTitle }}
+  <ng-container *ngIf="!useSearchApi">
+    {{ regionData?.labelSearchPageTitle }}
+  </ng-container>
+  <ng-container *ngIf="!!useSearchApi"> Ask a question </ng-container>
 </h2>
 
+<p *ngIf="!!useSearchApi">
+  <i>
+    [Short introduction text to explain how to ask a question and what the
+    response will be.]
+  </i>
+</p>
+
 <app-search-input
   [(searchQuery)]="searchQuery"
   (doSearch)="onSearchInput($event)"
@@ -28,12 +38,37 @@ <h2 class="ion-no-margin text-style--header text-style--size-2">
   [tabindex]="-1"
   class="focus--minimal focus--fade-out"
 >
-  <p *ngIf="!!searchQuery">
+  <div style="padding: 0 1em; border: 1px solid white; border-radius: 0.25em">
+    <p *ngIf="useSearchApi && loadingSearch">
+      <span
+        class="loading-text"
+        style="width: 95%"
+      ></span>
+      <span class="loading-text"></span>
+      <span
+        class="loading-text"
+        style="width: 88%"
+      ></span>
+      <span
+        class="loading-text"
+        style="width: 75%"
+      ></span>
+    </p>
+
+    <p
+      *ngIf="useSearchApi && !!searchQuery && searchResultSummary && !loadingSearch"
+    >
+      <span class="text-style--use-newlines">{{ searchResultSummary }}</span>
+    </p>
+  </div>
+
+  <p *ngIf="!!searchQuery && !loadingSearch">
     {{ regionData?.labelSearchResultsCount }}
     <strong>{{ searchResults?.length }}</strong>
   </p>
 
   <app-q-a-set-list
+    *ngIf="!!searchQuery && !loadingSearch"
     [baseUrl]="'../'"
     [list]="searchResults"
     [showDateUpdatedOutsideQuestion]="false"

diff --git a/src/app/pages/search/search.page.ts b/src/app/pages/search/search.page.ts
@@ -13,6 +13,17 @@ import { RegionDataService } from 'src/app/services/region-data.service';
 import { SearchService } from 'src/app/services/search.service';
 import { environment } from 'src/environments/environment';
 
+type SearchApiResponse = {
+  status?: number;
+  answer?: string;
+  references?: {
+    category: string;
+    subcategory: string;
+    slug?: string;
+    parent?: string;
+  }[];
+};
+
 @Component({
   selector: 'app-search-page',
   templateUrl: './search.page.html',
@@ -28,6 +39,8 @@ export default class SearchPageComponent implements OnInit {
 
   public searchQuery: string;
   public searchResults: QASet[];
+  public searchResultSummary: string;
+  public loadingSearch: boolean;
 
   constructor(
     private route: ActivatedRoute,
@@ -84,7 +97,9 @@ export default class SearchPageComponent implements OnInit {
   }
 
   public onSearchInput(rawQuery: string) {
-    const safeQuery = this.searchService.sanitizeSearchQuery(rawQuery);
+    const safeQuery = this.useSearchApi
+      ? rawQuery
+      : this.searchService.sanitizeSearchQuery(rawQuery);
 
     this.router.navigate([], {
       queryParams: { q: safeQuery },
@@ -95,7 +110,23 @@ export default class SearchPageComponent implements OnInit {
   public async performSearch(query: string): Promise<void> {
     const safeQuery = this.searchService.sanitizeSearchQuery(query);
 
-    this.searchResults = this.searchService.query(safeQuery);
+    if (this.useSearchApi) {
+      this.loadingSearch = true;
+      const apiResponse: SearchApiResponse =
+        await this.fetchApiResults(safeQuery);
+
+      if (apiResponse) {
+        this.loadingSearch = false;
+      }
+      if (apiResponse && apiResponse.answer) {
+        this.searchResultSummary = apiResponse.answer;
+      }
+      if (apiResponse && apiResponse.references) {
+        this.searchResults = this.createReferences(apiResponse.references);
+      }
+    } else {
+      this.searchResults = this.searchService.query(safeQuery);
+    }
 
     if (this.searchResults.length > 1) {
       this.pageMeta.setTitle({
@@ -108,4 +139,47 @@ export default class SearchPageComponent implements OnInit {
       }
     }
   }
+
+  private createReferences(
+    references: SearchApiResponse['references'],
+  ): QASet[] {
+    const results = references.map((reference) => {
+      const result = this.qaSets.find((qa) => {
+        return (
+          qa.categoryID === Number(reference.category) &&
+          qa.subCategoryID === Number(reference.subcategory)
+        );
+      });
+
+      return result;
+    });
+    return results;
+  }
+
+  private async fetchApiResults(query: string): Promise<SearchApiResponse> {
+    const response = await window.fetch(environment.searchApi, {
+      method: 'POST',
+      credentials: 'omit',
+      mode: 'cors',
+      headers: {
+        Authorization: environment.searchApiKey,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        question: query,
+        googleSheetId: this.regionData.sheetId,
+      }),
+    });
+
+    if (!response || !response.ok) {
+      console.warn('Something went wrong:', response);
+      return {
+        answer: `Something went wrong.\nMaybe you can try again. \n\n ${response.status} ${response.statusText}`,
+        references: [],
+      };
+    }
+
+    return await response.json();
+  }
 }