Merge pull request #5213 from mempool/natsoni/accelerations-table-fixes

Add page in URL to accelerations table

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts

@@ -1,9 +1,11 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy, Inject, LOCALE_ID } from '@angular/core';
-import { BehaviorSubject, Observable, catchError, of, switchMap, tap } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription, catchError, of, switchMap, tap, throttleTime } from 'rxjs';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { ServicesApiServices } from '../../../services/services-api.service';
+import { SeoService } from '../../../services/seo.service';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-accelerations-list',
@@ -25,25 +27,44 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
   maxSize = window.innerWidth <= 767.98 ? 3 : 5;
   skeletonLines: number[] = [];
   pageSubject: BehaviorSubject<number> = new BehaviorSubject(this.page);
+  keyNavigationSubscription: Subscription;
+  dir: 'rtl' | 'ltr' = 'ltr';
+  paramSubscription: Subscription;
 
   constructor(
     private servicesApiService: ServicesApiServices,
     private websocketService: WebsocketService,
     public stateService: StateService,
     private cd: ChangeDetectorRef,
+    private seoService: SeoService,
+    private route: ActivatedRoute,
+    private router: Router,
+    @Inject(LOCALE_ID) private locale: string,
   ) {
+    if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
+      this.dir = 'rtl';
+    }
   }
 
   ngOnInit(): void {
     if (!this.widget) {
       this.websocketService.want(['blocks']);
+      this.seoService.setTitle($localize`:@@02573b6980a2d611b4361a2595a4447e390058cd:Accelerations`);
     }
 
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
     
+    this.paramSubscription = this.route.params.pipe(
+      tap(params => {
+        this.page = +params['page'] || 1;
+        this.pageSubject.next(this.page);
+      })
+    ).subscribe();
+
     this.accelerationList$ = this.pageSubject.pipe(
       switchMap((page) => {
+        this.isLoading = true;
         const accelerationObservable$ = this.accelerations$ || (this.pending ? this.stateService.liveAccelerations$ : this.servicesApiService.getAccelerationHistoryObserveResponse$({ page: page }));
         if (!this.accelerations$ && this.pending) {
           this.websocketService.ensureTrackAccelerations();
@@ -79,10 +100,30 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
         );
       })
     );
+
+    this.keyNavigationSubscription = this.stateService.keyNavigation$.pipe(
+      tap((event) => {
+        const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
+        const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
+        if (event.key === prevKey && this.page > 1) {
+          this.page--;
+          this.isLoading = true;
+          this.cd.markForCheck();
+        }
+        if (event.key === nextKey && this.page * 15 < this.accelerationCount) {
+          this.page++;
+          this.isLoading = true;
+          this.cd.markForCheck();
+        }
+      }),
+      throttleTime(1000, undefined, { leading: true, trailing: true }),
+    ).subscribe(() => {
+      this.pageChange(this.page);
+    });
   }
 
   pageChange(page: number): void {
-    this.pageSubject.next(page);
+    this.router.navigate(['acceleration', 'list', page]);
   }
 
   trackByBlock(index: number, block: BlockExtended): number {
@@ -91,5 +132,7 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.websocketService.stopTrackAccelerations();
+    this.paramSubscription?.unsubscribe();
+    this.keyNavigationSubscription?.unsubscribe();
   }
 }

frontend/src/app/components/blocks-list/blocks-list.component.ts

@@ -73,27 +73,27 @@ export class BlocksList implements OnInit {
         this.seoService.setDescription($localize`:@@meta.description.bitcoin.blocks:See the most recent Bitcoin${seoDescriptionNetwork(this.stateService.network)} blocks along with basic stats such as block height, block reward, block size, and more.`);
       }
 
-      this.blocksCountInitializedSubscription = combineLatest([this.blocksCountInitialized$, this.route.queryParams]).pipe(
+      this.blocksCountInitializedSubscription = combineLatest([this.blocksCountInitialized$, this.route.params]).pipe(
         filter(([blocksCountInitialized, _]) => blocksCountInitialized),
         tap(([_, params]) => {
           this.page = +params['page'] || 1;
           this.page === 1 ? this.fromHeightSubject.next(undefined) : this.fromHeightSubject.next((this.blocksCount - 1) - (this.page - 1) * 15);
-          this.cd.markForCheck();
         })
       ).subscribe();
 
       this.keyNavigationSubscription = this.stateService.keyNavigation$
       .pipe(
         tap((event) => {
-          this.isLoading = true;
           const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
           const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
           if (event.key === prevKey && this.page > 1) {
             this.page--;
+            this.isLoading = true;
             this.cd.markForCheck();
           }
           if (event.key === nextKey && this.page * 15 < this.blocksCount) {
             this.page++;
+            this.isLoading = true;
             this.cd.markForCheck();
           }
         }),
@@ -118,6 +118,7 @@ export class BlocksList implements OnInit {
                 if (this.blocksCount === undefined) {
                   this.blocksCount = blocks[0].height + 1;
                   this.blocksCountInitialized$.next(true);
+                  this.blocksCountInitialized$.complete();
                 }
                 this.isLoading = false;
                 this.lastBlockHeight = Math.max(...blocks.map(o => o.height));
@@ -179,7 +180,7 @@ export class BlocksList implements OnInit {
   }
 
   pageChange(page: number): void {
-    this.router.navigate([], { queryParams: { page: page } });
+    this.router.navigate(['blocks', page]);
   }
 
   trackByBlock(index: number, block: BlockExtended): number {

frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts

@@ -36,7 +36,7 @@ export class RecentPegsListComponent implements OnInit {
   lastPegBlockUpdate: number = 0;
   lastPegAmount: string = '';
   isLoad: boolean = true;
-  queryParamSubscription: Subscription;
+  paramSubscription: Subscription;
   keyNavigationSubscription: Subscription;
   dir: 'rtl' | 'ltr' = 'ltr';
 
@@ -66,7 +66,7 @@ export class RecentPegsListComponent implements OnInit {
       this.seoService.setTitle($localize`:@@a8b0889ea1b41888f1e247f2731cc9322198ca04:Recent Peg-In / Out's`);
       this.websocketService.want(['blocks']);
 
-      this.queryParamSubscription = this.route.queryParams.pipe(
+      this.paramSubscription = this.route.params.pipe(
         tap((params) => {
           this.page = +params['page'] || 1;
           this.startingIndexSubject.next((this.page - 1) * 15);
@@ -76,15 +76,16 @@ export class RecentPegsListComponent implements OnInit {
       this.keyNavigationSubscription = this.stateService.keyNavigation$
       .pipe(
         tap((event) => {
-          this.isLoading = true;
           const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
           const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
           if (event.key === prevKey && this.page > 1) {
             this.page--;
+            this.isLoading = true;
             this.cd.markForCheck();
           }
           if (event.key === nextKey && this.page < this.pegsCount / this.pageSize) {
             this.page++;
+            this.isLoading = true;
             this.cd.markForCheck();
           }
         }),
@@ -172,12 +173,12 @@ export class RecentPegsListComponent implements OnInit {
   ngOnDestroy(): void {
     this.destroy$.next(1);
     this.destroy$.complete();
-    this.queryParamSubscription?.unsubscribe();
+    this.paramSubscription?.unsubscribe();
     this.keyNavigationSubscription?.unsubscribe();
   }
 
   pageChange(page: number): void {
-    this.router.navigate([], { queryParams: { page: page } });
+    this.router.navigate(['audit', 'pegs', page]);
   }
 
 }

frontend/src/app/graphs/graphs.routing.module.ts

@@ -60,10 +60,14 @@ const routes: Routes = [
         ]
       },
       {
-        path: 'acceleration/list',
+        path: 'acceleration/list/:page',
         data: { networks: ['bitcoin'] },
         component: AccelerationsListComponent,
       },
+      {
+        path: 'acceleration/list',
+        redirectTo: 'acceleration/list/1',
+      },
       {
         path: 'mempool-block/:id',
         data: { networks: ['bitcoin', 'liquid'] },

frontend/src/app/liquid/liquid-master-page.module.ts

@@ -84,10 +84,14 @@ const routes: Routes = [
         ]
       },
       {
-        path: 'audit/pegs',
+        path: 'audit/pegs/:page',
         data: { networks: ['liquid'] },
         component: RecentPegsListComponent,
       },
+      {
+        path: 'audit/pegs',
+        redirectTo: 'audit/pegs/1'
+      },
       {
         path: 'assets',
         data: { networks: ['liquid'] },

frontend/src/app/master-page.module.ts

@@ -45,9 +45,13 @@ const routes: Routes = [
         loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
       },
       {
-        path: 'blocks',
+        path: 'blocks/:page',
         component: BlocksList,
       },
+      {
+        path: 'blocks',
+        redirectTo: 'blocks/1',
+      },
       {
         path: 'rbf',
         component: RbfList,