refactor(ui): add debounce time to marketplace search
To reduce the number of request we should use debounce time for search inputs.
The debounce time is now used on the marketplace search,  only after 300 ms without input the request will be sent
MODIFY
src/app/components/api-card-list/api-card-list.component.html
src/app/components/api-card-list/api-card-list.component.html
<mat-form-field id="search-form-field">
<mat-icon matPrefix color="primary">search</mat-icon>
<input
+ id="search-input"
matInput
type="search"
[placeholder]="'MPLACE.SEARCH' | translate"
class="search-input"
- [value]="searchTerm"
- (input)="OnInput($event)" />
+ [value]="searchTerm" />
<button
*ngIf="searchTerm.length > 0"
mat-button

MODIFY
src/app/components/api-card-list/api-card-list.component.ts
src/app/components/api-card-list/api-card-list.component.ts
* imitations under the License.
*/
-import { Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
import { ApiService } from '../../services/api/api.service';
import { PageEvent } from '@angular/material/paginator';
-import { map, switchMap } from 'rxjs/operators';
-import { forkJoin, Observable, of } from 'rxjs';
+import { debounceTime, map, switchMap } from 'rxjs/operators';
+import { forkJoin, fromEvent, Observable, of } from 'rxjs';
import { SpinnerService } from '../../services/spinner/spinner.service';
import { IApiSummary, ISearchCriteria } from '../../interfaces/ICommunication';
import { ActivatedRoute, Params, Router } from '@angular/router';
@@ -29,7 +29,7 @@ import { IApiSummaryExt } from '../../interfaces/IApiSummaryExt';
templateUrl: './api-card-list.component.html',
styleUrls: ['./api-card-list.component.scss']
})
-export class ApiCardListComponent implements OnInit {
+export class ApiCardListComponent implements OnInit, AfterViewInit {
apis: IApiSummaryExt[] = [];
totalSize = 0;
ready = false;
@@ -66,6 +66,20 @@ export class ApiCardListComponent implements OnInit {
this.handleQueryParams();
}
+ ngAfterViewInit(): void {
+ const searchBox = document.getElementById('search-input');
+ fromEvent(searchBox as HTMLElement, 'keyup')
+ .pipe(
+ // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types,@typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
+ map((event: any) => event.currentTarget.value as string),
+ debounceTime(300)
+ )
+ .subscribe((searchStr) => {
+ this.searchTerm = searchStr;
+ this.search(this.searchTerm);
+ });
+ }
+
handleQueryParams(): void {
this.route.queryParams.subscribe((params: Params) => {
if (params && params.page) {
@@ -97,13 +111,6 @@ export class ApiCardListComponent implements OnInit {
});
}
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types,@typescript-eslint/no-explicit-any
- OnInput(event: any): void {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
- this.searchTerm = event.target.value as string;
- this.search(this.searchTerm);
- }
-
public search(searchTerm: string): void {
void this.router.navigate(['/marketplace'], {
queryParams: {

refactor(ui): add debounce time to marketplace search

To reduce the number of request we should use debounce time for search inputs.
The debounce time is now used on the marketplace search,  only after 300 ms without input the request will be sent