From 2c88056a8f4266ac28300788d7a1357b3a05fc7e Mon Sep 17 00:00:00 2001
From: Viktor Baranov <baranov.viktor.27@gmail.com>
Date: Mon, 7 Jun 2021 13:49:14 +0300
Subject: [PATCH] Reload transactions on the main page without reloading of the
 whole page

---
 CHANGELOG.md                                     |  1 +
 apps/block_scout_web/assets/js/pages/chain.js    | 16 ++++++++++++++++
 .../address_coin_balance/index.html.eex          |  2 +-
 .../templates/block/index.html.eex               |  2 +-
 .../templates/chain/show.html.eex                |  4 ++--
 .../templates/pending_transaction/index.html.eex |  4 ++--
 6 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ace449bb3..6ac4f8d870 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#4241](https://github.com/blockscout/blockscout/pull/4241) - Reload transactions on the main page without reloading of the whole page
 - [#4218](https://github.com/blockscout/blockscout/pull/4218) - Hide long arrays in smart-contract's 
 - [#4205](https://github.com/blockscout/blockscout/pull/4205) - Total transactions fees per day API endpoint
 - [#4158](https://github.com/blockscout/blockscout/pull/4158) - Calculate total fee per day
diff --git a/apps/block_scout_web/assets/js/pages/chain.js b/apps/block_scout_web/assets/js/pages/chain.js
index 82920ab8e5..7a5e4dee79 100644
--- a/apps/block_scout_web/assets/js/pages/chain.js
+++ b/apps/block_scout_web/assets/js/pages/chain.js
@@ -124,6 +124,11 @@ function baseReducer (state = initialState, action) {
         })
       }
     }
+    case 'TRANSACTION_BATCH_EXPANDED': {
+      return Object.assign({}, state, {
+        transactionsBatch: []
+      })
+    }
     case 'RECEIVED_UPDATED_TRANSACTION_STATS': {
       return Object.assign({}, state, {
         transactionStats: action.msg.stats
@@ -339,6 +344,17 @@ if ($chainDetailsPage.length) {
     type: 'RECEIVED_UPDATED_TRANSACTION_STATS',
     msg: msg
   }))
+
+  const $txReloadButton = $('[data-selector="reload-transactions-button"]')
+  const $channelBatching = $('[data-selector="channel-batching-message"]')
+  $txReloadButton.on('click', (event) => {
+    event.preventDefault()
+    loadTransactions(store)
+    $channelBatching.hide()
+    store.dispatch({
+      type: 'TRANSACTION_BATCH_EXPANDED'
+    })
+  })
 }
 
 function loadTransactions (store) {
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
index 8562a08f24..4455bfcc9a 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
@@ -9,7 +9,7 @@
     <div class="card">
       <%= render BlockScoutWeb.AddressView, "_tabs.html", address: @address, is_proxy: is_proxy, conn: @conn %>
       <div class="card-body" data-async-listing="<%= @current_path %>">
-        <div data-selector="channel-disconnected-message" style="display:none;">
+        <div data-selector="channel-disconnected-message" style="display: none;">
           <div data-selector="reload-button" class="alert alert-danger" style="padding: 0.75rem 0rem; cursor: pointer;">
             <span href="#" class="alert alert-danger"><%= gettext "Connection Lost, click to load newer blocks" %></span>
           </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex
index 9f596c07f7..ddc2839853 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex
@@ -1,7 +1,7 @@
 <section class="container" data-page="<%= String.downcase(@block_type) %>-list">
   <div class="card">
     <div class="card-body" data-async-listing="<%= @current_path %>">
-      <div data-selector="channel-disconnected-message" style="display:none;">
+      <div data-selector="channel-disconnected-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-danger">
           <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer blocks" %></a>
         </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
index 2a90dfbadd..695f4ca386 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
@@ -236,8 +236,8 @@
     <div class="card-body">
       <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %>
       <h2 class="card-title lg-card-title"><%= gettext "Transactions" %></h2>
-      <div data-selector="channel-batching-message" class="d-none">
-        <div data-selector="reload-button" class="alert alert-info">
+      <div data-selector="channel-batching-message" style="display: none;">
+        <div data-selector="reload-transactions-button" class="alert alert-info">
           <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
         </div>
       </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex
index d857b9ccc8..a40bb5c645 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex
@@ -7,12 +7,12 @@
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
       </div>
  
-      <div data-selector="channel-batching-message" style="display:none;">
+      <div data-selector="channel-batching-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-info">
           <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
         </div>
       </div>
-      <div data-selector="channel-disconnected-message" style="display:none;">
+      <div data-selector="channel-disconnected-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-danger">
           <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer transactions" %></a>
         </div>