From b6296fcbeb7780be963ad4acd7b10cb5080bbdbd Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 12 Sep 2022 19:20:22 +0200
Subject: [PATCH] Suggest block height in search result

---
 .../search-form/search-form.component.html    |  2 +-
 .../search-form/search-form.component.ts      | 18 ++++++++++++-----
 .../search-results.component.html             | 20 ++++++++++++-------
 .../search-results.component.ts               |  9 +++++----
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/components/search-form/search-form.component.html b/frontend/src/app/components/search-form/search-form.component.html
index 8badcc3cf..f8cb05d1c 100644
--- a/frontend/src/app/components/search-form/search-form.component.html
+++ b/frontend/src/app/components/search-form/search-form.component.html
@@ -3,7 +3,7 @@
     <div class="search-box-container mr-2">
       <input (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" i18n-placeholder="search-form.searchbar-placeholder" placeholder="Search the full Bitcoin ecosystem">
       
-      <app-search-results #searchResults [results]="typeAhead$ | async" [searchTerm]="searchForm.get('searchText').value" (selectedResult)="selectedResult($event)"></app-search-results>
+      <app-search-results #searchResults [results]="typeAhead$ | async" (selectedResult)="selectedResult($event)"></app-search-results>
     
     </div>
     <div>
diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts
index 712f7438c..abddc3b6e 100644
--- a/frontend/src/app/components/search-form/search-form.component.ts
+++ b/frontend/src/app/components/search-form/search-form.component.ts
@@ -74,6 +74,7 @@ export class SearchFormComponent implements OnInit {
         switchMap((text) => {
           if (!text.length) {
             return of([
+              '',
               [],
               {
                 nodes: [],
@@ -84,11 +85,14 @@ export class SearchFormComponent implements OnInit {
           this.isTypeaheading$.next(true);
           if (!this.stateService.env.LIGHTNING) {
             return zip(
+              of(text),
               this.electrsApiService.getAddressesByPrefix$(text).pipe(catchError(() => of([]))),
-              [{ nodes: [], channels: [] }]
+              [{ nodes: [], channels: [] }],
+              of(this.regexBlockheight.test(text)),
             );
           }
           return zip(
+            of(text),
             this.electrsApiService.getAddressesByPrefix$(text).pipe(catchError(() => of([]))),
             this.apiService.lightningSearch$(text).pipe(catchError(() => of({
               nodes: [],
@@ -102,10 +106,12 @@ export class SearchFormComponent implements OnInit {
             return result[0].map((address: string) => 'B' + address);
           }
           return {
-            addresses: result[0],
-            nodes: result[1].nodes,
-            channels: result[1].channels,
-            totalResults: result[0].length + result[1].nodes.length + result[1].channels.length,
+            searchText: result[0],
+            blockHeight: this.regexBlockheight.test(result[0]) ? [parseInt(result[0], 10)] : [],
+            addresses: result[1],
+            nodes: result[2].nodes,
+            channels: result[2].channels,
+            totalResults: result[1].length + result[2].nodes.length + result[2].channels.length,
           };
         })
       );
@@ -121,6 +127,8 @@ export class SearchFormComponent implements OnInit {
   selectedResult(result: any) {
     if (typeof result === 'string') {
       this.search(result);
+    } else if (typeof result === 'number') {
+      this.navigate('/block/', result.toString());
     } else if (result.alias) {
       this.navigate('/lightning/node/', result.public_key);
     } else if (result.short_id) {
diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.html b/frontend/src/app/components/search-form/search-results/search-results.component.html
index cc289ddac..9ed829aff 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.html
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.html
@@ -1,25 +1,31 @@
-<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.addresses.length && !results.nodes.length && !results.channels.length">
+<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.blockHeight.length && !results.addresses.length && !results.nodes.length && !results.channels.length">
+  <ng-template [ngIf]="results.blockHeight.length">
+    <div class="card-title">Bitcoin Block Height</div>
+    <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
+      Go to "{{ results.searchText }}"
+    </button>
+  </ng-template>
   <ng-template [ngIf]="results.addresses.length">
     <div class="card-title" *ngIf="stateService.env.LIGHTNING">Bitcoin Addresses</div>
     <ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index">
-      <button (click)="clickItem(i)" [class.active]="i === activeIdx" type="button" role="option" class="dropdown-item">
-        <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="searchTerm"></ngb-highlight>
+      <button (click)="clickItem(results.blockHeight.length + i)" [class.active]="(results.blockHeight.length + i) === activeIdx" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="results.searchText"></ngb-highlight>
       </button>
     </ng-template>
   </ng-template>
   <ng-template [ngIf]="results.nodes.length">
     <div class="card-title">Lightning Nodes</div>
     <ng-template ngFor [ngForOf]="results.nodes" let-node let-i="index">
-      <button (click)="clickItem(results.addresses.length + i)" [class.inactive]="node.status === 0" [class.active]="results.addresses.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
-        <ngb-highlight [result]="node.alias" [term]="searchTerm"></ngb-highlight> &nbsp;<span class="symbol">{{ node.public_key | shortenString : 10 }}</span>
+      <button (click)="clickItem(results.blockHeight.length + results.addresses.length + i)" [class.inactive]="node.status === 0" [class.active]="results.blockHeight.length + results.addresses.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="node.alias" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ node.public_key | shortenString : 10 }}</span>
       </button>
     </ng-template>
   </ng-template>
   <ng-template [ngIf]="results.channels.length">
     <div class="card-title">Lightning Channels</div>
     <ng-template ngFor [ngForOf]="results.channels" let-channel let-i="index">
-      <button (click)="clickItem(results.addresses.length + results.nodes.length + i)" [class.inactive]="channel.status === 2"  [class.active]="results.addresses.length + results.nodes.length + i === activeIdx" type="button" role="option" class="dropdown-item">
-        <ngb-highlight [result]="channel.short_id" [term]="searchTerm"></ngb-highlight> &nbsp;<span class="symbol">{{ channel.id }}</span>
+      <button (click)="clickItem(results.blockHeight.length + results.addresses.length + results.nodes.length + i)" [class.inactive]="channel.status === 2"  [class.active]="results.blockHeight.length + results.addresses.length + results.nodes.length + i === activeIdx" type="button" role="option" class="dropdown-item">
+        <ngb-highlight [result]="channel.short_id" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ channel.id }}</span>
       </button>
     </ng-template>
   </ng-template>
diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.ts b/frontend/src/app/components/search-form/search-results/search-results.component.ts
index 7bda62c02..1fd0b2913 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.ts
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.ts
@@ -8,7 +8,6 @@ import { StateService } from 'src/app/services/state.service';
 })
 export class SearchResultsComponent implements OnChanges {
   @Input() results: any = {};
-  @Input() searchTerm = '';
   @Output() selectedResult = new EventEmitter();
 
   isMobile = (window.innerWidth <= 767.98);
@@ -16,12 +15,14 @@ export class SearchResultsComponent implements OnChanges {
   activeIdx = 0;
   focusFirst = true;
 
-  constructor(public stateService: StateService) { }
+  constructor(
+    public stateService: StateService,
+    ) { }
 
   ngOnChanges() {
     this.activeIdx = 0;
     if (this.results) {
-      this.resultsFlattened = [...this.results.addresses, ...this.results.nodes, ...this.results.channels];
+      this.resultsFlattened = [...this.results.blockHeight, ...this.results.addresses, ...this.results.nodes, ...this.results.channels];
     }
   }
 
@@ -47,7 +48,7 @@ export class SearchResultsComponent implements OnChanges {
         if (this.resultsFlattened[this.activeIdx]) {
           this.selectedResult.emit(this.resultsFlattened[this.activeIdx]);
         } else {
-          this.selectedResult.emit(this.searchTerm);
+          this.selectedResult.emit(this.results.searchText);
         }
         this.results = null;
         break;