From d844185c18b938a7047d798aa72aba643621d380 Mon Sep 17 00:00:00 2001 From: jimmay5469 Date: Mon, 29 Oct 2018 14:59:56 -0400 Subject: [PATCH] Cleanup --- .../assets/js/pages/address.js | 29 +++++++++--- apps/block_scout_web/assets/js/utils.js | 14 +++--- .../address_transaction_controller.ex | 45 ++++++++++++------- .../address_transaction/index.html.eex | 3 ++ 4 files changed, 61 insertions(+), 30 deletions(-) diff --git a/apps/block_scout_web/assets/js/pages/address.js b/apps/block_scout_web/assets/js/pages/address.js index bed4421aa4..12bcd3a33d 100644 --- a/apps/block_scout_web/assets/js/pages/address.js +++ b/apps/block_scout_web/assets/js/pages/address.js @@ -27,6 +27,7 @@ export const initialState = { internalTransactionsBatch: [], validatedBlocks: [], + loadingNextPage: false, nextPage: null, beyondPageOne: null @@ -148,8 +149,14 @@ export function reducer (state = initialState, action) { balance: action.msg.balance }) } + case 'LOADING_NEXT_PAGE': { + return Object.assign({}, state, { + loadingNextPage: true + }) + } case 'NEXT_TRANSACTIONS_PAGE': { return Object.assign({}, state, { + loadingNextPage: false, nextPage: action.msg.nextPage, transactions: [ ...state.transactions, @@ -196,7 +203,7 @@ if ($addressDetailsPage.length) { blockHtml: el.outerHTML })).toArray(), - nextPage: $('[data-selector="next-page-button"]').length ? `${$('[data-selector="next-page-button"]').hide().attr("href")}&type=JSON` : null, + nextPage: $('[data-selector="next-page-button"]').length ? `${$('[data-selector="next-page-button"]').hide().attr('href')}&type=JSON` : null, beyondPageOne: !!blockNumber }) @@ -218,15 +225,23 @@ if ($addressDetailsPage.length) { blocksChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' })) blocksChannel.on('new_block', (msg) => store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) })) - $('[data-selector="transactions-list"]').length && atBottom(function loadMoreTransactions() { - $.get(store.getState().nextPage).done(msg => { - store.dispatch({ type: 'NEXT_TRANSACTIONS_PAGE', msg: humps.camelizeKeys(msg) }) - setTimeout(() => atBottom(loadMoreTransactions), 1000) - }) + $('[data-selector="transactions-list"]').length && atBottom(function loadMoreTransactions () { + const nextPage = store.getState().nextPage + if (nextPage) { + store.dispatch({ type: 'LOADING_NEXT_PAGE' }) + $.get(nextPage).done(msg => { + store.dispatch({ type: 'NEXT_TRANSACTIONS_PAGE', msg: humps.camelizeKeys(msg) }) + }) + } }) }, render (state, oldState) { if (state.channelDisconnected) $('[data-selector="channel-disconnected-message"]').show() + if (state.loadingNextPage) { + $('[data-selector="loading-next-page"]').show() + } else { + $('[data-selector="loading-next-page"]').hide() + } if (oldState.balance !== state.balance) { $('[data-selector="balance-card"]').empty().append(state.balance) @@ -240,7 +255,7 @@ if ($addressDetailsPage.length) { const container = $('[data-selector="pending-transactions-list"]')[0] const newElements = _.map(state.pendingTransactions, ({ transactionHtml }) => $(transactionHtml)[0]) listMorph(container, newElements, { key: 'dataset.transactionHash' }) - if($('[data-selector="pending-transactions-count"]').length) $('[data-selector="pending-transactions-count"]')[0].innerHTML = numeral(state.pendingTransactions.filter(({ validated }) => !validated).length).format() + if ($('[data-selector="pending-transactions-count"]').length) $('[data-selector="pending-transactions-count"]')[0].innerHTML = numeral(state.pendingTransactions.filter(({ validated }) => !validated).length).format() } function updateTransactions () { const container = $('[data-selector="transactions-list"]')[0] diff --git a/apps/block_scout_web/assets/js/utils.js b/apps/block_scout_web/assets/js/utils.js index b7996827bc..53bd77351f 100644 --- a/apps/block_scout_web/assets/js/utils.js +++ b/apps/block_scout_web/assets/js/utils.js @@ -116,6 +116,7 @@ function smarterSlideUp ($el, { complete = _.noop } = {}) { } export function listMorph (container, newElements, { key, horizontal }) { + if (!container) return const oldElements = $(container).children().get() let currentList = _.map(oldElements, (el) => ({ id: _.get(el, key), el })) const newList = _.map(newElements, (el) => ({ id: _.get(el, key), el })) @@ -150,13 +151,14 @@ export function listMorph (container, newElements, { key, horizontal }) { }) } -export function atBottom(callback) { - $(window).on("scroll", function infiniteScrollChecker () { - var scrollHeight = $(document).height(); - var scrollPosition = $(window).height() + $(window).scrollTop(); +export function atBottom (callback) { + function infiniteScrollChecker () { + var scrollHeight = $(document).height() + var scrollPosition = $(window).height() + $(window).scrollTop() if ((scrollHeight - scrollPosition) / scrollHeight === 0) { - $(window).off("scroll", infiniteScrollChecker) callback() } - }); + } + infiniteScrollChecker() + $(window).on('scroll', infiniteScrollChecker) } diff --git a/apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex b/apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex index 06eff87dd9..040d388985 100644 --- a/apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex +++ b/apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex @@ -33,26 +33,37 @@ defmodule BlockScoutWeb.AddressTransactionController do transactions_plus_one = Chain.address_to_transactions(address, full_options) {transactions, next_page} = split_list_by_page(transactions_plus_one) + next_page = + case next_page_params(next_page, transactions, params) do + nil -> + nil + + next_page_params -> + address_transaction_path( + conn, + :index, + address, + next_page_params + ) + end + json( conn, %{ - transactions: Enum.map(transactions, fn transaction -> - %{ - transaction_hash: Hash.to_string(transaction.hash), - transaction_html: View.render_to_string( - TransactionView, - "_tile.html", - current_address: address, - transaction: transaction - ) - } - end), - next_page: address_transaction_path( - conn, - :index, - address, - next_page_params(next_page, transactions, params) - ) + transactions: + Enum.map(transactions, fn transaction -> + %{ + transaction_hash: Hash.to_string(transaction.hash), + transaction_html: + View.render_to_string( + TransactionView, + "_tile.html", + current_address: address, + transaction: transaction + ) + } + end), + next_page: next_page } ) else diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex index 1708e41bb3..db56f3ad01 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex @@ -74,6 +74,9 @@ <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: transaction) %> <% end %> +
+ <%= gettext("Loading") %>... +
<% else %>
<%= gettext "There are no transactions for this address." %>