Merge pull request #6327 from blockscout/mf-fix-address-logs

Fix and refactor address logs page and search

CHANGELOG.md

@@ -30,6 +30,7 @@
 - [#6163](https://github.com/blockscout/blockscout/pull/6163) - Fix rate limit logs
 - [#6223](https://github.com/blockscout/blockscout/pull/6223) - Fix coin_id test
 - [#6336](https://github.com/blockscout/blockscout/pull/6336) - Fix sending request on each key in token search
+- [#6327](https://github.com/blockscout/blockscout/pull/6327) - Fix and refactor address logs page and search
 
 ### Chore
 

apps/block_scout_web/assets/js/pages/address/logs.js

@@ -1,8 +1,7 @@
 import $ from 'jquery'
 import omit from 'lodash.omit'
-import humps from 'humps'
 import { connectElements } from '../../lib/redux_helpers.js'
-import { createAsyncLoadStore } from '../../lib/async_listing_load'
+import { createAsyncLoadStore, loadPage } from '../../lib/async_listing_load'
 import '../address'
 import { utils } from 'web3'
 
@@ -57,18 +56,16 @@ const elements = {
 }
 
 if ($('[data-page="address-logs"]').length) {
+  let timer
+  const waitTime = 500
+
   const store = createAsyncLoadStore(reducer, initialState, 'dataset.identifierLog')
   const addressHash = $('[data-page="address-details"]')[0].dataset.pageAddressHash
   const $element = $('[data-async-listing]')
 
   connectElements({ store, elements })
 
-  store.dispatch({
-    type: 'PAGE_LOAD',
-    addressHash
-  })
-
-  $element.on('click', '[data-search-button]', (_event) => {
+  const searchFunc = (_event) => {
     store.dispatch({
       type: 'START_SEARCH',
       addressHash
@@ -77,14 +74,31 @@ if ($('[data-page="address-logs"]').length) {
     const addressHashPlain = store.getState().addressHash
     const addressHashChecksum = addressHashPlain && utils.toChecksumAddress(addressHashPlain)
     const path = '/search-logs?topic=' + topic + '&address_id=' + addressHashChecksum
-    store.dispatch({ type: 'START_REQUEST' })
-    $.getJSON(path, { type: 'JSON' })
-      .done(response => store.dispatch(Object.assign({ type: 'ITEMS_FETCHED' }, humps.camelizeKeys(response))))
-      .fail(() => store.dispatch({ type: 'REQUEST_ERROR' }))
-      .always(() => store.dispatch({ type: 'FINISH_REQUEST' }))
+    loadPage(store, path)
+  }
+
+  store.dispatch({
+    type: 'PAGE_LOAD',
+    addressHash
   })
 
+  $element.on('click', '[data-search-button]', searchFunc)
+
   $element.on('click', '[data-cancel-search-button]', (_event) => {
-    window.location.replace(window.location.href.split('?')[0])
+    $('[data-search-field]').val('')
+    loadPage(store, window.location.pathname)
+  })
+
+  $element.on('input keyup', '[data-search-field]', (event) => {
+    if (event.type === 'input') {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        searchFunc(event)
+      }, waitTime)
+    }
+    if (event.type === 'keyup' && event.keyCode === 13) {
+      clearTimeout(timer)
+      searchFunc(event)
+    }
   })
 }

apps/block_scout_web/lib/block_scout_web/templates/address_logs/index.html.eex

@@ -6,7 +6,7 @@
   <div class="card">
     <%= render BlockScoutWeb.AddressView, "_tabs.html", address: @address, is_proxy: is_proxy, conn: @conn %>
 
-    <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
+    <div class="card-body" data-async-load data-async-listing="<%= @current_path %>" data-no-self-calls>
       <h2 class="card-title"><%= gettext "Logs" %></h2>
       <div class="logs-topbar">