From bd641271a9d55befa9bb46eb877da771f4fb89dc Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 22 Mar 2020 23:45:16 +0700
Subject: [PATCH] Bugfix and inprovments for arrow navigation.

---
 .../app/components/block/block.component.ts    | 18 ++++++++++--------
 .../mempool-block/mempool-block.component.ts   |  4 ----
 .../mempool-blocks/mempool-blocks.component.ts |  2 ++
 .../transaction/transaction.component.ts       |  2 --
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index 2b2a1637f..446d524b7 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -1,11 +1,10 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
-import { switchMap, tap, debounceTime } from 'rxjs/operators';
+import { switchMap, tap, debounceTime, catchError } from 'rxjs/operators';
 import { Block, Transaction, Vout } from '../../interfaces/electrs.interface';
-import { of, Observable } from 'rxjs';
+import { of, empty } from 'rxjs';
 import { StateService } from '../../services/state.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
 
 @Component({
   selector: 'app-block',
@@ -28,12 +27,9 @@ export class BlockComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private electrsApiService: ElectrsApiService,
     private stateService: StateService,
-    private websocketService: WebsocketService,
   ) { }
 
   ngOnInit() {
-    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
-
     this.route.paramMap
     .pipe(
       switchMap((params: ParamMap) => {
@@ -68,8 +64,14 @@ export class BlockComponent implements OnInit, OnDestroy {
         this.isLoadingTransactions = true;
         this.transactions = null;
       }),
-      debounceTime(250),
-      switchMap((block) => this.electrsApiService.getBlockTransactions$(block.id))
+      debounceTime(300),
+      switchMap((block) => this.electrsApiService.getBlockTransactions$(block.id)
+        .pipe(
+          catchError((err) => {
+            console.log(err);
+            return of([]);
+        }))
+      ),
     )
     .subscribe((transactions: Transaction[]) => {
       if (this.fees === undefined) {
diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.ts b/frontend/src/app/components/mempool-block/mempool-block.component.ts
index bf299165f..781177f55 100644
--- a/frontend/src/app/components/mempool-block/mempool-block.component.ts
+++ b/frontend/src/app/components/mempool-block/mempool-block.component.ts
@@ -3,7 +3,6 @@ import { StateService } from 'src/app/services/state.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { switchMap, map } from 'rxjs/operators';
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
-import { WebsocketService } from 'src/app/services/websocket.service';
 
 @Component({
   selector: 'app-mempool-block',
@@ -17,12 +16,9 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
   constructor(
     private route: ActivatedRoute,
     private stateService: StateService,
-    private websocketService: WebsocketService,
   ) { }
 
   ngOnInit(): void {
-    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
-
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         this.mempoolBlockIndex = parseInt(params.get('id'), 10) || 0;
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 7e507a31b..40d129bdb 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
+import { take } from 'rxjs/operators';
 
 @Component({
   selector: 'app-mempool-blocks',
@@ -69,6 +70,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
           this.router.navigate(['/mempool-block/', this.markIndex - 1]);
         } else {
           this.stateService.blocks$
+            .pipe(take(8))
             .subscribe((block) => {
               if (this.stateService.latestBlockHeight === block.height) {
                 this.router.navigate(['/block/', block.id], { state: { data: { block } }});
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index bbc27768c..6946b95eb 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -38,8 +38,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
-
     this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         this.txId = params.get('id') || '';