From efc4e6a8ed756382b449bfd07235a1ae7ce17ee2 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@users.noreply.github.com>
Date: Wed, 25 Aug 2021 15:44:55 +0300
Subject: [PATCH] Fix for multiple arrow navigation bugs. (#741)

* Fix for multiple arrow navigation bugs.

fixes #731

* Updating test to handle left arrow navigation.

* Updating test to handle left arrow navigation.

* Arrow right click fix.

* Update frontend/cypress/integration/mainnet/mainnet.spec.ts

Co-authored-by: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>

Co-authored-by: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
---
 .../cypress/integration/mainnet/mainnet.spec.ts   |  2 +-
 .../src/app/components/block/block.component.html | 14 +++++++-------
 .../src/app/components/block/block.component.ts   | 15 +++++++++++----
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/cypress/integration/mainnet/mainnet.spec.ts b/frontend/cypress/integration/mainnet/mainnet.spec.ts
index 2914be5f5..59f8518d5 100644
--- a/frontend/cypress/integration/mainnet/mainnet.spec.ts
+++ b/frontend/cypress/integration/mainnet/mainnet.spec.ts
@@ -82,7 +82,7 @@ describe('Mainnet', () => {
                         cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
                         cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
                         cy.document().left();
-                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
+                        cy.get('h1').invoke('.title-block h1').should('equal', 'Next block');
                     });
                 });
 
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index d1f919403..0c391f9e2 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -5,28 +5,28 @@
       <ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis 
         <div class="next-previous-blocks">
           <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
-            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
+            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
           </a>
           <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
           <span placement="bottom" class="disable">
-            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
+            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
           </span>
         </div>
       </ng-template>
       <ng-template [ngIf]="blockHeight" i18n="block.block"> Block 
         <div class="next-previous-blocks">
           <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
-            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
+            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
           </a>
           <span *ngIf="!showNextBlocklink" placement="bottom" class="disable">
-            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
+            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
           </span>
           <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
-          <a *ngIf="showPreviousBlocklink" [routerLink]="['/block/' | relativeUrl, block?.previousblockhash]" (click)="navigateToPreviousBlock()" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
-            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
+          <a *ngIf="showPreviousBlocklink && block" [routerLink]="['/block/' | relativeUrl, block.previousblockhash]" (click)="navigateToPreviousBlock()" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
+            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
           </a>
           <span *ngIf="!showPreviousBlocklink" placement="bottom" class="disable">
-            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
+            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
           </span>
         </div>
       </ng-template>
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index dfbaf4522..3ded44e0d 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -182,8 +182,12 @@ export class BlockComponent implements OnInit, OnDestroy {
       if (this.showPreviousBlocklink && event.key === 'ArrowRight' && this.nextBlockHeight - 2 >= 0) {
         this.navigateToPreviousBlock();
       }
-      if (this.showNextBlocklink && event.key === 'ArrowLeft') {
-        this.navigateToNextBlock();
+      if (event.key === 'ArrowLeft') {
+        if (this.showNextBlocklink) {
+          this.navigateToNextBlock();
+        } else {
+          this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + '/mempool-block/', '0']);
+        }
       }
     });
   }
@@ -261,13 +265,16 @@ export class BlockComponent implements OnInit, OnDestroy {
   }
 
   navigateToPreviousBlock() {
+    if (!this.block) {
+      return;
+    }
     const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight - 2);
-    this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', block ? block.id : this.block.previousblockhash], { state: { data: { block, blockHeight: this.nextBlockHeight - 2 } } });
+    this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + '/block/', block ? block.id : this.block.previousblockhash], { state: { data: { block, blockHeight: this.nextBlockHeight - 2 } } });
   }
 
   navigateToNextBlock() {
     const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight);
-    this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', block ? block.id : this.nextBlockHeight], { state: { data: { block, blockHeight: this.nextBlockHeight } } });
+    this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + '/block/', block ? block.id : this.nextBlockHeight], { state: { data: { block, blockHeight: this.nextBlockHeight } } });
   }
 
   setNextAndPreviousBlockLink(){