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

Merge pull request #826 from mempool/simon/bisq-transaciton-filter-fix

Browse Source 
Fix for stuck Bisq transaction page when filtering
This commit is contained in:
wiz 2021-09-27 19:20:28 +09:00 committed by GitHub
commit d0a8509194
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts
View File

@ -1,8 +1,8 @@
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { BisqTransaction, BisqOutput } from '../bisq.interfaces'; import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
import { merge, Observable } from 'rxjs'; import { Observable, Subscription } from 'rxjs';
import { switchMap, map, tap, filter } from 'rxjs/operators'; import { switchMap, map, tap } from 'rxjs/operators';
import { BisqApiService } from '../bisq-api.service'; import { BisqApiService } from '../bisq-api.service';
import { SeoService } from 'src/app/services/seo.service'; import { SeoService } from 'src/app/services/seo.service';
import { FormGroup, FormBuilder } from '@angular/forms'; import { FormGroup, FormBuilder } from '@angular/forms';
@ -16,7 +16,7 @@ import { WebsocketService } from 'src/app/services/websocket.service';
styleUrls: ['./bisq-transactions.component.scss'], styleUrls: ['./bisq-transactions.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class BisqTransactionsComponent implements OnInit { export class BisqTransactionsComponent implements OnInit, OnDestroy {
transactions$: Observable<[BisqTransaction[], number]>; transactions$: Observable<[BisqTransaction[], number]>;
page = 1; page = 1;
itemsPerPage = 50; itemsPerPage = 50;
@ -25,6 +25,7 @@ export class BisqTransactionsComponent implements OnInit {
loadingItems: number[]; loadingItems: number[];
radioGroupForm: FormGroup; radioGroupForm: FormGroup;
types: string[] = []; types: string[] = [];
radioGroupSubscription: Subscription;
txTypeOptions: IMultiSelectOption[] = [ txTypeOptions: IMultiSelectOption[] = [
{ id: 1, name: $localize`Asset listing fee` }, { id: 1, name: $localize`Asset listing fee` },
@ -90,52 +91,39 @@ export class BisqTransactionsComponent implements OnInit {
this.paginationMaxSize = 3; this.paginationMaxSize = 3;
} }
this.transactions$ = merge( this.transactions$ = this.route.queryParams
this.route.queryParams
.pipe(
filter((queryParams) => {
const newPage = parseInt(queryParams.page, 10);
const types = queryParams.types;
if (newPage !== this.page || types !== this.types.map((type) => this.txTypes.indexOf(type) + 1).join(',')) {
return true;
}
return false;
}),
tap((queryParams) => {
if (queryParams.page) {
const newPage = parseInt(queryParams.page, 10);
this.page = newPage;
} else {
this.page = 1;
}
if (queryParams.types) {
const types = queryParams.types.split(',').map((str: string) => parseInt(str, 10));
this.types = types.map((id: number) => this.txTypes[id - 1]);
this.radioGroupForm.get('txTypes').setValue(types, { emitEvent: false });
} else {
this.types = [];
this.radioGroupForm.get('txTypes').setValue(this.txTypesDefaultChecked, { emitEvent: false });
}
this.cd.markForCheck();
})
),
this.radioGroupForm.valueChanges
.pipe(
tap((data) => {
this.types = data.txTypes.map((id: number) => this.txTypes[id - 1]);
if (this.types.length === this.txTypes.length) {
this.types = [];
}
this.page = 1;
this.typesChanged(data.txTypes);
this.cd.markForCheck();
})
),
)
.pipe( .pipe(
tap((queryParams) => {
if (queryParams.page) {
const newPage = parseInt(queryParams.page, 10);
this.page = newPage;
} else {
this.page = 1;
}
if (queryParams.types) {
const types = queryParams.types.split(',').map((str: string) => parseInt(str, 10));
this.types = types.map((id: number) => this.txTypes[id - 1]);
this.radioGroupForm.get('txTypes').setValue(types, { emitEvent: false });
} else {
this.types = [];
this.radioGroupForm.get('txTypes').setValue([], { emitEvent: false });
}
this.cd.markForCheck();
}),
switchMap(() => this.bisqApiService.listTransactions$((this.page - 1) * this.itemsPerPage, this.itemsPerPage, this.types)), switchMap(() => this.bisqApiService.listTransactions$((this.page - 1) * this.itemsPerPage, this.itemsPerPage, this.types)),
map((response) => [response.body, parseInt(response.headers.get('x-total-count'), 10)]) map((response) => [response.body, parseInt(response.headers.get('x-total-count'), 10)])
); );
this.radioGroupSubscription = this.radioGroupForm.valueChanges
.subscribe((data) => {
this.types = data.txTypes.map((id: number) => this.txTypes[id - 1]);
if (this.types.length === this.txTypes.length) {
this.types = [];
}
this.page = 1;
this.typesChanged(data.txTypes);
this.cd.markForCheck();
});
} }
pageChange(page: number) { pageChange(page: number) {
@ -144,8 +132,6 @@ export class BisqTransactionsComponent implements OnInit {
queryParams: { page: page }, queryParams: { page: page },
queryParamsHandling: 'merge', queryParamsHandling: 'merge',
}); });
// trigger queryParams change
this.page = -1;
} }
typesChanged(types: number[]) { typesChanged(types: number[]) {
@ -172,4 +158,8 @@ export class BisqTransactionsComponent implements OnInit {
onResize(event: any) { onResize(event: any) {
this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5; this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
} }
ngOnDestroy(): void {
this.radioGroupSubscription.unsubscribe();
}
} }