machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring debounce mechanism

Browse Source
This commit is contained in:
softsimon 2024-03-21 17:58:34 +09:00
parent 5deb8c3149
commit c18779b4e3
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
1 changed files with 19 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/app/components/blocks-list/blocks-list.component.ts
View File

@ -1,7 +1,7 @@
import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, Inject, LOCALE_ID } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, Inject, LOCALE_ID } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, combineLatest, Observable, timer, of, Subscription } from 'rxjs'; import { BehaviorSubject, combineLatest, Observable, timer, of, Subscription } from 'rxjs';
import { delayWhen, filter, map, retryWhen, scan, switchMap, take, tap } from 'rxjs/operators'; import { debounceTime, delayWhen, filter, map, retryWhen, scan, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
import { BlockExtended } from '../../interfaces/node-api.interface'; import { BlockExtended } from '../../interfaces/node-api.interface';
import { ApiService } from '../../services/api.service'; import { ApiService } from '../../services/api.service';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
@ -28,9 +28,6 @@ export class BlocksList implements OnInit {
fromBlockHeight = undefined; fromBlockHeight = undefined;
lastKeyNavTime = 0; lastKeyNavTime = 0;
lastBlockHeightFetched = -1; lastBlockHeightFetched = -1;
isArrowKeyPressed = false;
keydownListener: EventListener;
keyupListener: EventListener;
paginationMaxSize: number; paginationMaxSize: number;
page = 1; page = 1;
lastPage = 1; lastPage = 1;
@ -59,10 +56,6 @@ export class BlocksList implements OnInit {
if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) { if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
this.dir = 'rtl'; this.dir = 'rtl';
} }
this.keydownListener = this.onKeyDown.bind(this);
this.keyupListener = this.onKeyUp.bind(this);
window.addEventListener('keydown', this.keydownListener);
window.addEventListener('keyup', this.keyupListener);
} }
ngOnInit(): void { ngOnInit(): void {
@ -81,23 +74,23 @@ export class BlocksList implements OnInit {
}) })
).subscribe(); ).subscribe();
this.keyNavigationSubscription = this.stateService.keyNavigation$.subscribe((event) => { this.keyNavigationSubscription = this.stateService.keyNavigation$
const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight'; .pipe(
const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft'; tap((event) => {
if (event.key === prevKey && this.page > 1) { const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
this.page--; const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
this.page === 1 ? this.isArrowKeyPressed = false : null; if (event.key === prevKey && this.page > 1) {
this.keyNavPageChange(this.page); this.page--;
this.lastKeyNavTime = Date.now(); this.cd.markForCheck();
this.cd.markForCheck(); }
} if (event.key === nextKey && this.page * 15 < this.blocksCount) {
if (event.key === nextKey && this.page * 15 < this.blocksCount) { this.page++;
this.page++; this.cd.markForCheck();
this.page >= this.blocksCount / 15 ? this.isArrowKeyPressed = false : null; }
this.keyNavPageChange(this.page); }),
this.lastKeyNavTime = Date.now(); throttleTime(1000, undefined, { leading: true, trailing: true }),
this.cd.markForCheck(); ).subscribe(() => {
} this.pageChange(this.page);
}); });
} }
@ -192,29 +185,7 @@ export class BlocksList implements OnInit {
} }
keyNavPageChange(page: number): void { keyNavPageChange(page: number): void {
this.isLoading = true; this.pageChange(page);
if (this.isArrowKeyPressed) {
timer(400).pipe(
take(1),
filter(() => Date.now() - this.lastKeyNavTime >= 400 && this.isArrowKeyPressed === false),
).subscribe(() => {
this.pageChange(page);
});
} else {
this.pageChange(page);
}
}
onKeyDown(event: KeyboardEvent) {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
this.isArrowKeyPressed = true;
}
}
onKeyUp(event: KeyboardEvent) {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
this.isArrowKeyPressed = false;
}
} }
trackByBlock(index: number, block: BlockExtended): number { trackByBlock(index: number, block: BlockExtended): number {
@ -228,7 +199,5 @@ export class BlocksList implements OnInit {
ngOnDestroy(): void { ngOnDestroy(): void {
this.blocksCountInitializedSubscription?.unsubscribe(); this.blocksCountInitializedSubscription?.unsubscribe();
this.keyNavigationSubscription?.unsubscribe(); this.keyNavigationSubscription?.unsubscribe();
window.removeEventListener('keydown', this.keydownListener);
window.removeEventListener('keyup', this.keyupListener);
} }
} }