From 09f7dddf1469ade02653c86beb933fb73331e675 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Wed, 26 Jun 2024 15:09:52 +0900
Subject: [PATCH] Use url parameter instead of query parameter

---
 .../app/components/blocks-list/blocks-list.component.ts   | 5 ++---
 .../recent-pegs-list/recent-pegs-list.component.ts        | 8 ++++----
 frontend/src/app/liquid/liquid-master-page.module.ts      | 6 +++++-
 frontend/src/app/master-page.module.ts                    | 6 +++++-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.ts b/frontend/src/app/components/blocks-list/blocks-list.component.ts
index 4903499bc..9bf4e9814 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.ts
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.ts
@@ -73,12 +73,11 @@ 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();
 
@@ -181,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 {
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
index 0e2a003af..31a52fd9d 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
+++ b/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);
@@ -173,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]);
   }
 
 }
diff --git a/frontend/src/app/liquid/liquid-master-page.module.ts b/frontend/src/app/liquid/liquid-master-page.module.ts
index 5df9a5447..3375a066a 100644
--- a/frontend/src/app/liquid/liquid-master-page.module.ts
+++ b/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'] },
diff --git a/frontend/src/app/master-page.module.ts b/frontend/src/app/master-page.module.ts
index 6ea8bfd93..510756cbc 100644
--- a/frontend/src/app/master-page.module.ts
+++ b/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,