From ad9bf93eebe73f11f75e5d28b2730b66eb7ee5ab Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 30 Jul 2020 13:50:21 +0700
Subject: [PATCH] Refactor footer component to using OnPush.

---
 .../components/footer/footer.component.html   | 10 +-
 .../app/components/footer/footer.component.ts | 91 +++++++++++--------
 2 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html
index 4e52aecb7..fd355d23c 100644
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/frontend/src/app/components/footer/footer.component.html
@@ -1,24 +1,24 @@
 <footer class="footer">
   <div class="container-xl">
-    <div class="row text-center" *ngIf="memPoolInfo">
+    <div class="row text-center" *ngIf="mempoolInfoData$ | async as mempoolInfoData">
       <div class="col d-none d-sm-block">
         <span class="txPerSecond">Tx weight per second:</span>
-        <span class="" *ngIf="memPoolInfo?.vBytesPerSecond === 0; else inSync">
+        <span *ngIf="mempoolInfoData.memPoolInfo.vBytesPerSecond === 0; else inSync">
           &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
         </span>
         <ng-template #inSync>
           <div class="progress sub-text">
-            <div class="progress-bar {{ progressClass }}" role="progressbar" [ngStyle]="{'width': progressWidth}">{{ memPoolInfo?.vBytesPerSecond | ceil | number }} vBytes/s</div>
+            <div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.memPoolInfo.vBytesPerSecond | ceil | number }} vBytes/s</div>
           </div>
         </ng-template>    
       </div>
       <div class="col">
         <span class="unconfirmedTx">Unconfirmed<span class="extra-text"> transactions</span>:</span>
-        <div class="sub-text">{{ memPoolInfo?.memPoolInfo?.size | number }}</div>
+        <div class="sub-text">{{ mempoolInfoData.memPoolInfo.memPoolInfo.size | number }}</div>
       </div>
       <div class="col">
         <span class="mempoolSize">Mempool size:</span>
-        <div class="sub-text">{{ mempoolSize | bytes }} ({{ mempoolBlocks }} block<span [hidden]="mempoolBlocks <= 1">s</span>)</div>
+        <div class="sub-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</div>
       </div>
     </div>
   </div>
diff --git a/frontend/src/app/components/footer/footer.component.ts b/frontend/src/app/components/footer/footer.component.ts
index 889033b0c..2a2fa38b0 100644
--- a/frontend/src/app/components/footer/footer.component.ts
+++ b/frontend/src/app/components/footer/footer.component.ts
@@ -1,61 +1,72 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
 import { MemPoolState } from 'src/app/interfaces/websocket.interface';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+interface MempoolBlocksData {
+  blocks: number;
+  size: number;
+}
+
+interface MempoolInfoData {
+  memPoolInfo: MemPoolState;
+  progressWidth: string;
+  progressClass: string;
+}
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
+  styleUrls: ['./footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent implements OnInit {
-  memPoolInfo: MemPoolState | undefined;
-  mempoolBlocks = 0;
-  progressWidth = '';
-  progressClass: string;
-  mempoolSize = 0;
+  mempoolBlocksData$: Observable<MempoolBlocksData>;
+  mempoolInfoData$: Observable<MempoolInfoData>;
 
   constructor(
     private stateService: StateService,
   ) { }
 
   ngOnInit() {
-    this.stateService.mempoolStats$
-      .subscribe((mempoolState) => {
-        this.memPoolInfo = mempoolState;
-        this.updateProgress();
-      });
+    this.mempoolInfoData$ = this.stateService.mempoolStats$
+      .pipe(
+        map((mempoolState) => {
+          const vBytesPerSecondLimit = 1667;
+          let vBytesPerSecond = mempoolState.vBytesPerSecond;
+          if (vBytesPerSecond > 1667) {
+            vBytesPerSecond = 1667;
+          }
 
-    this.stateService.mempoolBlocks$
-      .subscribe((mempoolBlocks) => {
-        if (!mempoolBlocks.length) { return; }
-        const size = mempoolBlocks.map((m) => m.blockSize).reduce((a, b) => a + b);
-        const vsize = mempoolBlocks.map((m) => m.blockVSize).reduce((a, b) => a + b);
-        this.mempoolSize = size;
-        this.mempoolBlocks = Math.ceil(vsize / 1000000);
-      });
-  }
+          const percent = Math.round((vBytesPerSecond / vBytesPerSecondLimit) * 100);
 
-  updateProgress() {
-    if (!this.memPoolInfo) {
-      return;
-    }
+          let progressClass = 'bg-danger';
+          if (percent <= 75) {
+            progressClass = 'bg-success';
+          } else if (percent <= 99) {
+            progressClass = 'bg-warning';
+          }
 
-    const vBytesPerSecondLimit = 1667;
+          return {
+            memPoolInfo: mempoolState,
+            progressWidth: percent + '%',
+            progressClass: progressClass,
+          };
+        })
+      );
 
-    let vBytesPerSecond = this.memPoolInfo.vBytesPerSecond;
-    if (vBytesPerSecond > 1667) {
-      vBytesPerSecond = 1667;
-    }
+    this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
+      .pipe(
+        map((mempoolBlocks) => {
+          const size = mempoolBlocks.map((m) => m.blockSize).reduce((a, b) => a + b, 0);
+          const vsize = mempoolBlocks.map((m) => m.blockVSize).reduce((a, b) => a + b, 0);
 
-    const percent = Math.round((vBytesPerSecond / vBytesPerSecondLimit) * 100);
-    this.progressWidth = percent + '%';
-
-    if (percent <= 75) {
-      this.progressClass = 'bg-success';
-    } else if (percent <= 99) {
-      this.progressClass = 'bg-warning';
-    } else {
-      this.progressClass = 'bg-danger';
-    }
+          return {
+            size: size,
+            blocks: Math.ceil(vsize / 1000000)
+          };
+        })
+      );
   }
 }