Merge branch 'master' into hunicus/move-on-in-it

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

@@ -1,11 +1,13 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
-import { BehaviorSubject, combineLatest, Observable, timer, of } from 'rxjs';
-import { delayWhen, map, retryWhen, scan, switchMap, tap } from 'rxjs/operators';
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, Inject, LOCALE_ID } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BehaviorSubject, combineLatest, Observable, timer, of, Subscription } from 'rxjs';
+import { debounceTime, delayWhen, filter, map, retryWhen, scan, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
 import { BlockExtended } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
 import { StateService } from '../../services/state.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from '../../services/seo.service';
+import { OpenGraphService } from '../../services/opengraph.service';
 import { seoDescriptionNetwork } from '../../shared/common.utils';
 
 @Component({
@@ -24,6 +26,7 @@ export class BlocksList implements OnInit {
   auditAvailable = false;
   isLoading = true;
   fromBlockHeight = undefined;
+  lastBlockHeightFetched = -1;
   paginationMaxSize: number;
   page = 1;
   lastPage = 1;
@@ -32,6 +35,10 @@ export class BlocksList implements OnInit {
   fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight);
   skeletonLines: number[] = [];
   lastBlockHeight = -1;
+  blocksCountInitialized$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  blocksCountInitializedSubscription: Subscription;
+  keyNavigationSubscription: Subscription;
+  dir: 'rtl' | 'ltr' = 'ltr';
 
   constructor(
     private apiService: ApiService,
@@ -39,8 +46,15 @@ export class BlocksList implements OnInit {
     public stateService: StateService,
     private cd: ChangeDetectorRef,
     private seoService: SeoService,
+    private ogService: OpenGraphService,
+    private route: ActivatedRoute,
+    private router: Router,
+    @Inject(LOCALE_ID) private locale: string,
   ) {
     this.isMempoolModule = this.stateService.env.BASE_MODULE === 'mempool';
+    if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
+      this.dir = 'rtl';
+    }
   }
 
   ngOnInit(): void {
@@ -50,26 +64,60 @@ export class BlocksList implements OnInit {
 
     if (!this.widget) {
       this.websocketService.want(['blocks']);
+      
       this.seoService.setTitle($localize`:@@meta.title.blocks-list:Blocks`);
+      this.ogService.setManualOgImage('recent-blocks.jpg');
       if( this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet' ) {
         this.seoService.setDescription($localize`:@@meta.description.liquid.blocks:See the most recent Liquid${seoDescriptionNetwork(this.stateService.network)} blocks along with basic stats such as block height, block size, and more.`);
       } else {
         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(
+        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.cd.markForCheck();
+          }
+          if (event.key === nextKey && this.page * 15 < this.blocksCount) {
+            this.page++;
+            this.cd.markForCheck();
+          }
+        }),
+        throttleTime(1000, undefined, { leading: true, trailing: true }),
+      ).subscribe(() => {
+        this.pageChange(this.page);
+      });
     }
 
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
-
+    
     this.blocks$ = combineLatest([
       this.fromHeightSubject.pipe(
+        filter(fromBlockHeight => fromBlockHeight !== this.lastBlockHeightFetched),
         switchMap((fromBlockHeight) => {
           this.isLoading = true;
+          this.lastBlockHeightFetched = fromBlockHeight;
           return this.apiService.getBlocks$(this.page === 1 ? undefined : fromBlockHeight)
             .pipe(
               tap(blocks => {
                 if (this.blocksCount === undefined) {
                   this.blocksCount = blocks[0].height + 1;
+                  this.blocksCountInitialized$.next(true);
                 }
                 this.isLoading = false;
                 this.lastBlockHeight = Math.max(...blocks.map(o => o.height));
@@ -107,7 +155,7 @@ export class BlocksList implements OnInit {
             this.lastPage = this.page;
             return blocks[0];
           }
-          if (blocks[1]) {
+          if (blocks[1] && blocks[1].length) {
             this.blocksCount = Math.max(this.blocksCount, blocks[1][0].height) + 1;
             if (this.isMempoolModule) {
               // @ts-ignore: Need to add an extra field for the template
@@ -131,7 +179,7 @@ export class BlocksList implements OnInit {
   }
 
   pageChange(page: number): void {
-    this.fromHeightSubject.next((this.blocksCount - 1) - (page - 1) * 15);
+    this.router.navigate([], { queryParams: { page: page } });
   }
 
   trackByBlock(index: number, block: BlockExtended): number {
@@ -141,4 +189,9 @@ export class BlocksList implements OnInit {
   isEllipsisActive(e): boolean {
     return (e.offsetWidth < e.scrollWidth);
   }
+
+  ngOnDestroy(): void {
+    this.blocksCountInitializedSubscription?.unsubscribe();
+    this.keyNavigationSubscription?.unsubscribe();
+  }
 }