Use block cache when searching or opening a recent block. (#749)

* Use block cache when searching or opening a recent block.

fixes #715

* Fixed linting errors.

frontend/src/app/components/block/block.component.ts

@@ -65,8 +65,20 @@ export class BlockComponent implements OnInit, OnDestroy {
         map((indicators) => indicators['blocktxs-' + this.blockHash] !== undefined ? indicators['blocktxs-' + this.blockHash] : 0)
       );
 
-    this.subscription = this.route.paramMap
+    this.blocksSubscription = this.stateService.blocks$
-    .pipe(
+      .subscribe(([block]) => {
+        this.latestBlock = block;
+        this.latestBlocks.unshift(block);
+        this.latestBlocks = this.latestBlocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
+        this.setNextAndPreviousBlockLink();
+
+        if (block.id === this.blockHash) {
+          this.block = block;
+          this.fees = block.reward / 100000000 - this.blockSubsidy;
+        }
+      });
+
+    this.subscription = this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         const blockHash: string = params.get('id') || '';
         this.block = undefined;
@@ -94,7 +106,12 @@ export class BlockComponent implements OnInit, OnDestroy {
         } else {
           this.isLoadingBlock = true;
 
+          let blockInCache: Block;
           if (isBlockHeight) {
+            blockInCache = this.latestBlocks.find((block) => block.height === parseInt(blockHash, 10));
+            if (blockInCache) {
+              return of(blockInCache);
+            }
             return this.electrsApiService.getBlockHashFromHeight$(parseInt(blockHash, 10))
               .pipe(
                 switchMap((hash) => {
@@ -107,12 +124,11 @@ export class BlockComponent implements OnInit, OnDestroy {
               );
           }
 
-          this.stateService.blocks$.subscribe(([block]) => {
+          blockInCache = this.latestBlocks.find((block) => block.id === this.blockHash);
-            if (block.id === blockHash) {
+          if (blockInCache) {
-              this.block = block;
+            return of(blockInCache);
-            }
+          }
-          });
+
-          
           return this.electrsApiService.getBlock$(blockHash);
         }
       }),
@@ -159,14 +175,6 @@ export class BlockComponent implements OnInit, OnDestroy {
       this.isLoadingBlock = false;
     });
 
-    this.blocksSubscription = this.stateService.blocks$
-      .subscribe(([block]) => {
-        this.latestBlock = block;
-        this.latestBlocks.unshift(block);
-        this.latestBlocks = this.latestBlocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
-        this.setNextAndPreviousBlockLink();
-      });
-
     this.networkChangedSubscription = this.stateService.networkChanged$
       .subscribe((network) => this.network = network);
 
@@ -269,12 +277,14 @@ export class BlockComponent implements OnInit, OnDestroy {
       return;
     }
     const block = this.latestBlocks.find((b) => b.height === 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 } } });
+    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.stateService.env.BASE_MODULE === 'mempool' ? '/' + 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(){

frontend/tslint.json

@@ -12,6 +12,7 @@
     "arrow-parens": false,
     "arrow-return-shorthand": true,
     "curly": true,
+    "no-bitwise": false,
     "deprecation": {
       "severity": "warning"
     },