Skip to content

Commit

Permalink
WIP: Add server-side-search prototype to test with
Browse files Browse the repository at this point in the history
  • Loading branch information
elwinschmitz committed Mar 8, 2024
1 parent f2b51cb commit a0fe108
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 5 deletions.
46 changes: 44 additions & 2 deletions src/app/pages/search/search.page.html
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand All @@ -28,12 +38,44 @@ <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: 1em 1em 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>

<div
*ngIf="useSearchApi && !!searchQuery && searchResultSummary && !loadingSearch"
markdown
[data]="searchResultSummary"
[inline]="false"
></div>
</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"
Expand Down
87 changes: 84 additions & 3 deletions src/app/pages/search/search.page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { OnInit } from '@angular/core';
import { Component } from '@angular/core';
import type { Params } from '@angular/router';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { MarkdownModule } from 'ngx-markdown';
import { QASetListComponent } from 'src/app/components/q-a-set-list/q-a-set-list.component';
import { SearchInputComponent } from 'src/app/components/search-input/search-input.component';
import type { QASet } from 'src/app/models/qa-set.model';
Expand All @@ -13,12 +14,29 @@ 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',
styleUrls: ['./search.page.css'],
standalone: true,
imports: [NgIf, RouterLink, QASetListComponent, SearchInputComponent],
imports: [
NgIf,
RouterLink,
QASetListComponent,
SearchInputComponent,
MarkdownModule,
],
})
export default class SearchPageComponent implements OnInit {
public useSearchApi = environment.useQandASearch && !!environment.searchApi;
Expand All @@ -28,6 +46,8 @@ export default class SearchPageComponent implements OnInit {

public searchQuery: string;
public searchResults: QASet[];
public searchResultSummary: string;
public loadingSearch: boolean;

constructor(
private route: ActivatedRoute,
Expand Down Expand Up @@ -84,7 +104,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 },
Expand All @@ -95,7 +117,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({
Expand All @@ -108,4 +146,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();
}
}

0 comments on commit a0fe108

Please sign in to comment.