web-ui: Update the block view to use the API V2

web-ui/src/app/components/block-details/block-details.component.html

@@ -272,8 +272,8 @@
             </thead>
 
             <tbody>
-              <tr *ngFor="let index = index; let item of transactions | paginate: { id: 'transactions', itemsPerPage: pageSize, currentPage: currentPage, totalItems: total }">
-                <td>{{(currentPage - 1) * pageSize + index + 1}}</td>
+              <tr *ngFor="let index = index; let item of transactions">
+                <td>{{index + 1}}</td>
                 <td>
                   <a routerLink="/transactions/{{item.id}}">{{item.id | slice:0:35}}...</a>
                 </td>
@@ -287,8 +287,7 @@
 
         <div class="row">
           <div class="col-xs-11 col-xs-offset-1 col-sm-5 col-sm-offset-4">
-            <pagination-controls (pageChange)="loadPage($event)" id="transactions" previousLabel="" nextLabel="">
-            </pagination-controls>
+            <button (click)="load()">{{'label.more' | translate}}</button>
           </div>
         </div>
       </div>

web-ui/src/app/components/block-details/block-details.component.ts

@@ -19,10 +19,8 @@ export class BlockDetailsComponent implements OnInit {
   blockDetails: BlockDetails;
 
   // pagination
-  total = 0;
-  currentPage = 1;
-  pageSize = 10;
-  transactions: Transaction[] = null;
+  limit = 10;
+  transactions: Transaction[] = [];
 
   constructor(
     private route: ActivatedRoute,
@@ -44,32 +42,25 @@ export class BlockDetailsComponent implements OnInit {
   private clearCurrentValues() {
     this.blockhash = null;
     this.blockDetails = null;
-    this.total = 0;
-    this.currentPage = 1;
-    this.pageSize = 10;
-    this.transactions = null;
+    this.transactions = [];
   }
 
   private onBlockRetrieved(response: BlockDetails) {
     this.blockDetails = response;
     this.blockhash = response.block.hash;
-    this.loadPage(this.currentPage);
+    this.load();
   }
 
-  loadPage(page: number) {
-    const offset = (page - 1) * this.pageSize;
-    const limit = this.pageSize;
-    const order = 'time:desc';
+  load() {
+    let lastSeenTxid = '';
+    if (this.transactions.length > 0) {
+      lastSeenTxid = this.transactions[this.transactions.length - 1].id;
+    }
 
     this.blocksService
-      .getTransactions(this.blockhash, offset, limit, order)
-      .subscribe(response => this.onTransactionsResponse(response));
-  }
-
-  private onTransactionsResponse(response: PaginatedResult<Transaction>) {
-    this.total = response.total;
-    this.currentPage = 1 + (response.offset / this.pageSize);
-    this.transactions = response.data;
+      .getTransactionsV2(this.blockhash, this.limit, lastSeenTxid)
+      .do(response => this.transactions = this.transactions.concat(response.data))
+      .subscribe();
   }
 
   private onError(response: any) {

web-ui/src/app/services/blocks.service.ts

@@ -7,6 +7,7 @@ import { environment } from '../../environments/environment';
 import { Block, BlockDetails } from '../models/block';
 import { PaginatedResult } from '../models/paginated-result';
 import { Transaction } from '../models/transaction';
+import { WrappedResult } from '../models/wrapped-result';
 
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' })
@@ -16,6 +17,7 @@ const httpOptions = {
 export class BlocksService {
 
   private baseUrl = environment.api.url + '/blocks';
+  private baseUrlV2 = environment.api.url + '/v2/blocks';
 
   constructor(private http: HttpClient) { }
 
@@ -34,6 +36,15 @@ export class BlocksService {
     return this.http.get<PaginatedResult<Transaction>>(url);
   }
 
+  getTransactionsV2(hash: string, limit: number = 10, lastSeenTxid: string = ''): Observable<WrappedResult<Transaction>> {
+    let url = `${this.baseUrlV2}/${hash}/transactions?&limit=${limit}`;
+    if (lastSeenTxid !== '') {
+      url += `&lastSeenTxid=${lastSeenTxid}`;
+    }
+
+    return this.http.get<WrappedResult<Transaction>>(url);
+  }
+
   getLatest(): Observable<Block[]> {
     return this.http.get<Block[]>(this.baseUrl);
   }