Refactor to use OnPush

frontend/src/app/components/mempool-block/mempool-block.component.html

@@ -1,7 +1,7 @@
 <div class="container-xl" *ngIf="mempoolBlock$ | async as mempoolBlock">
 
   <div class="title-block">
-    <h1 class="float-left">{{ ordinal }}</h1>
+    <h1 class="float-left">{{ ordinal$ | async }}</h1>
     <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right mr-2 mt-2">&#10005;</button>
   </div>
 
@@ -32,7 +32,7 @@
               <td>Filled</td>
               <td>
                 <div class="progress position-relative">
-                  <div class="progress-bar progress-mempool {{ network }}" role="progressbar" [ngStyle]="{'width': (mempoolBlock.blockVSize / 1000000) * 100 + '%' }"></div>
+                  <div class="progress-bar progress-mempool {{ (network$ | async) }}" role="progressbar" [ngStyle]="{'width': (mempoolBlock.blockVSize / 1000000) * 100 + '%' }"></div>
                   <div class="progress-text">{{ mempoolBlock.blockSize | bytes: 2 }}</div>
                 </div>
               </td>

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

@@ -1,22 +1,23 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { switchMap, map, tap, filter } from 'rxjs/operators';
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
-import { Observable } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
 import { env } from 'src/app/app.constants';
 
 @Component({
   selector: 'app-mempool-block',
   templateUrl: './mempool-block.component.html',
-  styleUrls: ['./mempool-block.component.scss']
+  styleUrls: ['./mempool-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MempoolBlockComponent implements OnInit, OnDestroy {
-  network = '';
+  network$: Observable<string>;
   mempoolBlockIndex: number;
   mempoolBlock$: Observable<MempoolBlock>;
-  ordinal: string;
+  ordinal$: BehaviorSubject<string> = new BehaviorSubject('');
 
   constructor(
     private route: ActivatedRoute,
@@ -30,47 +31,47 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
         switchMap((params: ParamMap) => {
           this.mempoolBlockIndex = parseInt(params.get('id'), 10) || 0;
           return this.stateService.mempoolBlocks$
-          .pipe(
-            map((blocks) => {
-              if (!blocks.length) {
-                return [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }];
-              }
-              return blocks;
-            }),
-            filter((mempoolBlocks) => mempoolBlocks.length > 0),
-            map((mempoolBlocks) => {
-              while (!mempoolBlocks[this.mempoolBlockIndex]) {
-                this.mempoolBlockIndex--;
-              }
-              this.setOrdinal(mempoolBlocks[this.mempoolBlockIndex]);
-              this.seoService.setTitle(this.ordinal);
-              return mempoolBlocks[this.mempoolBlockIndex];
-            })
-          );
+            .pipe(
+              map((blocks) => {
+                if (!blocks.length) {
+                  return [{ index: 0, blockSize: 0, blockVSize: 0, feeRange: [0, 0], medianFee: 0, nTx: 0, totalFees: 0 }];
+                }
+                return blocks;
+              }),
+              filter((mempoolBlocks) => mempoolBlocks.length > 0),
+              map((mempoolBlocks) => {
+                while (!mempoolBlocks[this.mempoolBlockIndex]) {
+                  this.mempoolBlockIndex--;
+                }
+                const ordinal = this.getOrdinal(mempoolBlocks[this.mempoolBlockIndex]);
+                this.ordinal$.next(ordinal);
+                this.seoService.setTitle(ordinal);
+                return mempoolBlocks[this.mempoolBlockIndex];
+              })
+            );
         }),
         tap(() => {
           this.stateService.markBlock$.next({ mempoolBlockIndex: this.mempoolBlockIndex });
         })
       );
 
-    this.stateService.networkChanged$
-      .subscribe((network) => this.network = network);
+    this.network$ = this.stateService.networkChanged$;
   }
 
   ngOnDestroy(): void {
     this.stateService.markBlock$.next({});
   }
 
-  setOrdinal(mempoolBlock: MempoolBlock) {
+  getOrdinal(mempoolBlock: MempoolBlock): string {
     const blocksInBlock = Math.ceil(mempoolBlock.blockVSize / 1000000);
     if (this.mempoolBlockIndex === 0) {
-      this.ordinal = 'Next block';
+      return 'Next block';
     } else if (this.mempoolBlockIndex === env.KEEP_BLOCKS_AMOUNT - 1 && blocksInBlock > 1 ) {
-      this.ordinal = `Stack of ${blocksInBlock} blocks`;
+      return `Stack of ${blocksInBlock} blocks`;
     } else {
       const s = ['th', 'st', 'nd', 'rd'];
       const v = this.mempoolBlockIndex + 1 % 100;
-      this.ordinal = this.mempoolBlockIndex + 1 + (s[(v - 20) % 10] || s[v] || s[0]) + ' next block';
+      return this.mempoolBlockIndex + 1 + (s[(v - 20) % 10] || s[v] || s[0]) + ' next block';
     }
  }
 }

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -3,7 +3,7 @@
     <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks" let-i="index" [ngForTrackBy]="trackByFn">
       <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
         <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
-        <div class="block-body" *ngIf="mempoolBlocks?.length">
+        <div class="block-body">
           <div class="fees">
             ~{{ projectedBlock.medianFee | number:'1.0-0' }} sat/vB
           </div>