From afb4f6e70b6d7ba4791e8bc153b13dad48c4dc3d Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Wed, 13 May 2020 13:03:57 +0700
Subject: [PATCH] Fixed keyboard navigation bugs.

---
 .../src/app/components/app/app.component.ts   | 13 +++++-
 .../app/components/block/block.component.html |  4 +-
 .../blockchain-blocks.component.ts            | 44 +++++++++----------
 .../mempool-blocks.component.ts               | 20 ++++-----
 frontend/src/app/services/state.service.ts    |  1 +
 5 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts
index 0d50da492..63d1fd5a0 100644
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { Router } from '@angular/router';
 import { WebsocketService } from '../../services/websocket.service';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-root',
@@ -14,5 +15,15 @@ export class AppComponent {
   constructor(
     public router: Router,
     private websocketService: WebsocketService,
+    private stateService: StateService,
   ) { }
+
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvents(event: KeyboardEvent) {
+    if (event.target !== document.body) {
+      return;
+    }
+    this.stateService.keyNavigation$.next(event);
+  }
+
 }
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 6744f7043..0bb90df60 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -48,7 +48,7 @@
                   <td><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat>)</td>
                 </tr>
                 <tr>
-                  <td>Reward + fees:</td>
+                  <td>Subsidy + fees:</td>
                   <td>
                     <app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>)
                   </td>
@@ -60,7 +60,7 @@
                   <td style="width: 75%;"><span class="skeleton-loader"></span></td>
                 </tr>
                 <tr>
-                  <td>Reward + fees:</td>
+                  <td>Subsidy + fees:</td>
                   <td><span class="skeleton-loader"></span></td>
                 </tr>
               </ng-template>
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
index 9a4dabd8f..90e0d274d 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -54,6 +54,28 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
         }
         this.moveArrowToPosition(false);
       });
+
+    this.stateService.keyNavigation$.subscribe((event) => {
+      if (!this.markHeight) {
+        return;
+      }
+
+      if (event.key === 'ArrowRight') {
+        const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
+        if (this.blocks[blockindex + 1]) {
+          this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
+            this.blocks[blockindex + 1].id], { state: { data: { block: this.blocks[blockindex + 1] } } });
+        }
+      } else if (event.key === 'ArrowLeft') {
+        const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
+        if (blockindex === 0) {
+          this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', '0']);
+        } else {
+          this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
+            this.blocks[blockindex - 1].id], { state: { data: { block: this.blocks[blockindex - 1] }}});
+        }
+      }
+    });
   }
 
   ngOnDestroy() {
@@ -61,28 +83,6 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
     clearInterval(this.interval);
   }
 
-  @HostListener('document:keydown', ['$event'])
-  handleKeyboardEvents(event: KeyboardEvent) {
-    if (!this.markHeight) {
-      return;
-    }
-    if (event.key === 'ArrowRight') {
-      const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
-      if (this.blocks[blockindex + 1]) {
-        this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
-          this.blocks[blockindex + 1].id], { state: { data: { block: this.blocks[blockindex + 1] } } });
-      }
-    } else if (event.key === 'ArrowLeft') {
-      const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
-      if (blockindex === 0) {
-        this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', '0']);
-      } else {
-        this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
-          this.blocks[blockindex - 1].id], { state: { data: { block: this.blocks[blockindex - 1] }}});
-      }
-    }
-  }
-
   moveArrowToPosition(animate: boolean) {
     if (!this.markHeight) {
       this.arrowVisible = false;
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index 2cddfd4bf..e26102af7 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -65,21 +65,12 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
 
     this.stateService.networkChanged$
       .subscribe((network) => this.network = network);
-  }
 
-  @HostListener('window:resize', ['$event'])
-  onResize() {
-    if (this.mempoolBlocks && this.mempoolBlocks.length) {
-      this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(JSON.stringify(this.mempoolBlocksFull)));
-    }
-  }
-
-  @HostListener('document:keydown', ['$event'])
-  handleKeyboardEvents(event: KeyboardEvent) {
-    setTimeout(() => {
+    this.stateService.keyNavigation$.subscribe((event) => {
       if (this.markIndex === undefined) {
         return;
       }
+
       if (event.key === 'ArrowRight') {
         if (this.mempoolBlocks[this.markIndex - 1]) {
           this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', this.markIndex - 1]);
@@ -100,6 +91,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
     });
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    if (this.mempoolBlocks && this.mempoolBlocks.length) {
+      this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(JSON.stringify(this.mempoolBlocksFull)));
+    }
+  }
+
   ngOnDestroy() {
     this.mempoolBlocksSubscription.unsubscribe();
   }
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 51207c744..96dde4526 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -34,6 +34,7 @@ export class StateService {
   connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
 
   markBlock$ = new Subject<MarkBlockState>();
+  keyNavigation$ = new Subject<KeyboardEvent>();
 
   constructor(
     private router: Router,