Merge pull request #1489 from mempool/nymkappa/bugfix/single-call-pool-page

Fix spam call to `/api/v1/mining/pool/{slug}`

frontend/src/app/components/pool/pool.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit }
 import { ActivatedRoute } from '@angular/router';
 import { EChartsOption, graphic } from 'echarts';
 import { BehaviorSubject, Observable, timer } from 'rxjs';
-import { map, switchMap, tap } from 'rxjs/operators';
+import { distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended, PoolStat } from 'src/app/interfaces/node-api.interface';
 import { ApiService } from 'src/app/services/api.service';
 import { StateService } from 'src/app/services/state.service';
@@ -20,7 +20,7 @@ export class PoolComponent implements OnInit {
   @Input() left: number | string = 75;
 
   gfg = true;
-  
+
   formatNumber = formatNumber;
   poolStats$: Observable<PoolStat>;
   blocks$: Observable<BlockExtended[]>;
@@ -34,7 +34,7 @@ export class PoolComponent implements OnInit {
   blocks: BlockExtended[] = [];
   slug: string = undefined;
 
-  loadMoreSubject: BehaviorSubject<string> = new BehaviorSubject(this.slug);
+  loadMoreSubject: BehaviorSubject<number> = new BehaviorSubject(this.blocks[this.blocks.length - 1]?.height);
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
@@ -50,18 +50,20 @@ export class PoolComponent implements OnInit {
         switchMap((slug: any) => {
           this.isLoading = true;
           this.slug = slug;
-          this.loadMoreSubject.next(this.slug);
           return this.apiService.getPoolHashrate$(this.slug)
             .pipe(
               switchMap((data) => {
                 this.isLoading = false;
                 this.prepareChartOptions(data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]));
-                return slug;
+                return [slug];
               }),
             );
         }),
-        switchMap(() => {
+        switchMap((slug) => {
-          return this.apiService.getPoolStats$(this.slug);
+          return this.apiService.getPoolStats$(slug);
+        }),
+        tap(() => {
+          this.loadMoreSubject.next(this.blocks[this.blocks.length - 1]?.height);
         }),
         map((poolStats) => {
           let regexes = '"';
@@ -79,6 +81,7 @@ export class PoolComponent implements OnInit {
 
     this.blocks$ = this.loadMoreSubject
       .pipe(
+        distinctUntilChanged(),
         switchMap((flag) => {
           if (this.slug === undefined) {
             return [];
@@ -88,7 +91,8 @@ export class PoolComponent implements OnInit {
         tap((newBlocks) => {
           this.blocks = this.blocks.concat(newBlocks);
         }),
-        map(() => this.blocks)
+        map(() => this.blocks),
+        share(),
       );
   }
 
@@ -124,7 +128,7 @@ export class PoolComponent implements OnInit {
           align: 'left',
         },
         borderColor: '#000',
-        formatter: function(ticks: any[]) {
+        formatter: function (ticks: any[]) {
           let hashratePowerOfTen: any = selectPowerOfTen(1);
           let hashrate = ticks[0].data[1];
 
@@ -192,14 +196,14 @@ export class PoolComponent implements OnInit {
         bottom: 0,
         left: 20,
         right: 15,
-        selectedDataBackground: {          
+        selectedDataBackground: {
           lineStyle: {
             color: '#fff',
             opacity: 0.45,
           },
           areaStyle: {
             opacity: 0,
-          },          
+          },
         },
       }],
     };
@@ -210,7 +214,7 @@ export class PoolComponent implements OnInit {
   }
 
   loadMore() {
-    this.loadMoreSubject.next(this.slug);
+    this.loadMoreSubject.next(this.blocks[this.blocks.length - 1]?.height);
   }
 
   trackByBlock(index: number, block: BlockExtended) {