refactor: show top of the list if query changed (no setTimeout)

src/app/modules/data/list/data-list.component.ts

@@ -43,10 +43,18 @@ export class DataListComponent implements OnChanges, OnInit {
    * Output binding to trigger pagination fetch
    */
   @Output('loadmore') loadMore = new EventEmitter<DataSourceRefreshed>();
+  /**
+   * Emits when scroll view should reset to top
+   */
+  @Input() resetToTop?: Observable<void>;
   /**
    * Indicates whether or not the list is to display SCThings of a single type
    */
   @Input() singleType = false;
+  /**
+   * Array of all subscriptions to Observables
+   */
+  subscriptions: Subscription[] = [];
   // tslint:disable-next-line: completed-docs
   @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;
 
@@ -72,8 +80,8 @@ export class DataListComponent implements OnChanges, OnInit {
 
   // tslint:disable-next-line: completed-docs
   ngOnInit(): void {
-    if (typeof this.queryChanged !== 'undefined') {
+    if (typeof this.resetToTop !== 'undefined') {
-      this.subscriptions.push(this.queryChanged.subscribe(() => {
+      this.subscriptions.push(this.resetToTop.subscribe(() => {
         this.viewPort.scrollToIndex(0);
       }));
     }

src/app/modules/data/list/search-page.component.ts

@@ -23,8 +23,8 @@ import {
   SCThings,
 } from '@openstapps/core';
 import {NGXLogger} from 'ngx-logger';
-import {Subject, Subscription} from 'rxjs';
+import {combineLatest, Subject, Subscription} from 'rxjs';
-import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
+import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
 import {ContextMenuService} from '../../menu/context/context-menu.service';
 import {SettingsProvider} from '../../settings/settings.provider';
 import {DataRoutingService} from '../data-routing.service';
@@ -64,6 +64,10 @@ export class SearchPageComponent implements OnInit {
    * Search value from search bar
    */
   queryText: string;
+  /**
+   * Emits when there is a change in the query (search, sort or filter changed)
+   */
+  queryChanged = new Subject<void>();
   /**
    * Subject to handle search text changes
    */
@@ -107,26 +111,22 @@ export class SearchPageComponent implements OnInit {
   ) {
     this.initialize();
 
-    this.subscriptions.push(this.queryTextChanged
+    combineLatest(
-      .pipe(
+      [this.queryTextChanged.pipe(debounceTime(this.searchQueryDueTime),
-        debounceTime(this.searchQueryDueTime),
+        distinctUntilChanged(),
-        distinctUntilChanged())
+        startWith(this.queryText),
-      .subscribe((model) => {
+      ),
+      this.contextMenuService.filterQueryChanged$.pipe(startWith(this.filterQuery)),
+      this.contextMenuService.sortQueryChanged$.pipe(startWith(this.sortQuery)),
+    ])
+      .subscribe(async (query) => {
+        this.queryText = query[0];
+        this.filterQuery = query[1];
+        this.sortQuery = query[2];
         this.from = 0;
-        this.queryText = model;
+        await this.fetchAndUpdateItems();
-        this.fetchAndUpdateItems();
+        this.queryChanged.next();
-      }));
+    });
-
-    this.subscriptions.push(this.contextMenuService.filterQueryChanged$.subscribe((query) => {
-      this.filterQuery = query;
-      this.from = 0;
-      this.fetchAndUpdateItems();
-    }));
-    this.subscriptions.push(this.contextMenuService.sortQueryChanged$.subscribe((query) => {
-      this.sortQuery = query;
-      this.from = 0;
-      this.fetchAndUpdateItems();
-    }));
 
     this.fetchAndUpdateItems();
 

src/app/modules/data/list/search-page.html

@@ -15,5 +15,5 @@
 </ion-header>
 
 <ion-content>
-  <stapps-data-list id="data-list" [items]="items | async" [singleType]="singleTypeResponse" (loadmore)="loadMore($event)"></stapps-data-list>
+  <stapps-data-list id="data-list" [items]="items | async" [singleType]="singleTypeResponse" (loadmore)="loadMore($event)" [resetToTop]="queryChanged.asObservable()"></stapps-data-list>
 </ion-content>