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

Replacing setTimeouts with rxjs

Browse Source
This commit is contained in:
softsimon 2024-04-22 14:42:48 +07:00
parent a4d8f2db58
commit 1c9e2b546b
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
2 changed files with 52 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { Observable, Subscription, delay, filter, tap } from 'rxjs';
import { StateService } from '../../services/state.service';
import { specialBlocks } from '../../app.constants';
import { BlockExtended } from '../../interfaces/node-api.interface';
@ -85,10 +85,33 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.dynamicBlocksAmount = Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT);
this.blockDisplayMode = this.stateService.blockDisplayMode$.value as 'size' | 'fees';
this.blockDisplayModeSubscription = this.stateService.blockDisplayMode$.subscribe((mode: 'size' | 'fees') => {
if (mode !== this.blockDisplayMode) {
this.applyAnimation(mode);
}
this.blockDisplayModeSubscription = this.stateService.blockDisplayMode$
.pipe(
filter((mode: 'size' | 'fees') => mode !== this.blockDisplayMode),
tap(() => {
this.blockTransformation = this.timeLtr ? {
transform: 'scaleX(-1) rotateX(90deg)',
transition: 'transform 0.375s'
} : {
transform: 'rotateX(90deg)',
transition: 'transform 0.375s'
};
}),
delay(375),
tap((mode) => {
this.blockDisplayMode = mode;
this.blockTransformation = this.timeLtr ? {
transform: 'scaleX(-1)',
transition: 'transform 0.375s'
} : {
transition: 'transform 0.375s'
};
this.cd.markForCheck();
}),
delay(375),
)
.subscribe(() => {
this.blockTransformation = {};
});
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
@ -240,29 +263,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
}
applyAnimation(mode: 'size' | 'fees') {
this.blockTransformation = this.timeLtr ? {
transform: 'scaleX(-1) rotateX(90deg)',
transition: 'transform 0.375s'
} : {
transform: 'rotateX(90deg)',
transition: 'transform 0.375s'
};
setTimeout(() => {
this.blockDisplayMode = mode;
this.blockTransformation = this.timeLtr ? {
transform: 'scaleX(-1)',
transition: 'transform 0.375s'
} : {
transition: 'transform 0.375s'
};
this.cd.markForCheck();
setTimeout(() => {
this.blockTransformation = {};
}, 375);
}, 375);
}
trackByBlocksFn(index: number, item: BlockchainBlock) {
return item.height;
}

48
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -1,9 +1,9 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { Subscription, Observable, of, combineLatest, BehaviorSubject } from 'rxjs';
import { Subscription, Observable, of, combineLatest } from 'rxjs';
import { MempoolBlock } from '../../interfaces/websocket.interface';
import { StateService } from '../../services/state.service';
import { Router } from '@angular/router';
import { map, switchMap, tap } from 'rxjs/operators';
import { delay, filter, map, switchMap, tap } from 'rxjs/operators';
import { feeLevels } from '../../app.constants';
import { specialBlocks } from '../../app.constants';
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
@ -103,11 +103,28 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.widthChange.emit(this.mempoolWidth);
this.blockDisplayMode = this.stateService.blockDisplayMode$.value as 'size' | 'fees';
this.blockDisplayModeSubscription = this.stateService.blockDisplayMode$.subscribe((mode: 'size' | 'fees') => {
if (mode !== this.blockDisplayMode) {
this.applyAnimation(mode);
}
});
this.blockDisplayModeSubscription = this.stateService.blockDisplayMode$
.pipe(
filter((mode: 'size' | 'fees') => mode !== this.blockDisplayMode),
tap(() => {
this.blockTransformation = {
transform: 'rotateX(90deg)',
transition: 'transform 0.375s'
};
}),
delay(375),
tap((mode) => {
this.blockDisplayMode = mode;
this.blockTransformation = {
transition: 'transform 0.375s'
};
this.cd.markForCheck();
}),
delay(375),
)
.subscribe(() => {
this.blockTransformation = {};
});
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !this.forceRtl && !!ltr;
@ -452,23 +469,6 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.rightPosition = Math.min(this.maxArrowPosition, this.rightPosition);
}
applyAnimation(mode: 'size' | 'fees') {
this.blockTransformation = {
transform: 'rotateX(90deg)',
transition: 'transform 0.375s'
};
setTimeout(() => {
this.blockDisplayMode = mode;
this.blockTransformation = {
transition: 'transform 0.375s'
};
this.cd.markForCheck();
setTimeout(() => {
this.blockTransformation = {};
}, 375);
}, 375);
}
mountEmptyBlocks() {
const emptyBlocks = [];
const numberOfBlocks = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT;