From 8df247626638347d65d83c34739acebaa738fdfc Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Sat, 25 Feb 2023 13:38:09 +0900
Subject: [PATCH] Improve error handling on channel component

---
 .../lightning/channel/channel.component.html  | 47 +++++++++----------
 .../lightning/channel/channel.component.ts    |  4 +-
 .../app/lightning/node/node.component.html    | 23 +++++----
 3 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/frontend/src/app/lightning/channel/channel.component.html b/frontend/src/app/lightning/channel/channel.component.html
index f52b85762..96af4ab67 100644
--- a/frontend/src/app/lightning/channel/channel.component.html
+++ b/frontend/src/app/lightning/channel/channel.component.html
@@ -1,25 +1,32 @@
 <div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">
-  <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
-  <div class="title-container">
-    <h1 class="mb-0">{{ channel.short_id }}</h1>
-    <span class="tx-link">
-      <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
-      <app-clipboard [text]="channel.id"></app-clipboard>
-    </span>
-  </div>
-  <div class="badges mb-2">
-    <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
-    <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
-    <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2" i18n="status.closed">Closed</span>
-    <app-closing-type *ngIf="channel.closing_reason" [type]="channel.closing_reason"></app-closing-type>
-  </div>
+
+  <ng-container *ngIf="!error">
+    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
+    <div class="title-container">
+      <h1 class="mb-0">{{ channel.short_id }}</h1>
+      <span class="tx-link">
+        <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
+        <app-clipboard [text]="channel.id"></app-clipboard>
+      </span>
+    </div>
+    <div class="badges mb-2">
+      <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
+      <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
+      <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2" i18n="status.closed">Closed</span>
+      <app-closing-type *ngIf="channel.closing_reason" [type]="channel.closing_reason"></app-closing-type>
+    </div>
+  </ng-container>
 
   <div class="clearfix"></div>
 
+  <div *ngIf="error" class="d-flex flex-column justify-content-around align-items-center mt-5 w-100" style="min-height: 100px">
+    <span i18n="lightning.channel-not-found">No channel found for short id "{{ channel.short_id }}"</span>
+  </div>
+
   <app-nodes-channels-map *ngIf="!error && (channelGeo$ | async) as channelGeo" [style]="'channelpage'"
     [channel]="channelGeo"></app-nodes-channels-map>
 
-  <div class="box">
+  <div class="box" *ngIf="!error">
 
       <div class="row">
         <div class="col-md">
@@ -65,7 +72,7 @@
 
   <br>
 
-  <div class="row row-cols-1 row-cols-md-2">
+  <div class="row row-cols-1 row-cols-md-2" *ngIf="!error">
     <div class="col">
       <app-channel-box [channel]="channel.node_left"></app-channel-box>
       <app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [local]="channel.node_left" [remote]="channel.node_right"></app-channel-close-box>
@@ -104,14 +111,6 @@
 
 <br>
 
-<ng-template [ngIf]="error">
-  <div class="text-center">
-    <span i18n="error.general-loading-data">Error loading data.</span>
-    <br><br>
-    <i>{{ error.status }}: {{ error.error }}</i>
-  </div>
-</ng-template>
-
 <ng-template #skeletonLoader>
   <div class="container-xl">
     <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
diff --git a/frontend/src/app/lightning/channel/channel.component.ts b/frontend/src/app/lightning/channel/channel.component.ts
index 379e8a005..d57aa3f01 100644
--- a/frontend/src/app/lightning/channel/channel.component.ts
+++ b/frontend/src/app/lightning/channel/channel.component.ts
@@ -38,7 +38,9 @@ export class ChannelComponent implements OnInit {
               }),
               catchError((err) => {
                 this.error = err;
-                return of(null);
+                return [{
+                  short_id: params.get('short_id')
+                }];
               })
             );
         }),
diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index 575614c10..1519eb1da 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -1,15 +1,18 @@
 <div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
-  <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
-  <div class="title-container mb-2" *ngIf="!error">
-    <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
-    <span class="tx-link">
-      <span class="node-id">
-        <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
-          <app-clipboard [text]="node.public_key"></app-clipboard>
-        </app-truncate>
+
+  <ng-container *ngIf="!error">
+    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
+    <div class="title-container mb-2">
+      <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
+      <span class="tx-link">
+        <span class="node-id">
+          <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
+            <app-clipboard [text]="node.public_key"></app-clipboard>
+          </app-truncate>
+        </span>
       </span>
-    </span>
-  </div>
+    </div>
+  </ng-container>
 
   <div class="clearfix"></div>