Add disconnect message and ignore live reload if on page 2+ for transaction list page

apps/explorer_web/assets/__tests__/pages/transaction.js

@@ -127,4 +127,34 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
     expect(output.newTransactions).toEqual([])
     expect(output.batchCountAccumulator).toEqual(22)
   })
+  test('after disconnection', () => {
+    const state = Object.assign({}, initialState, {
+      channelDisconnected: true
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        transactionHtml: 'test'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual([])
+    expect(output.batchCountAccumulator).toEqual(0)
+  })
+  test('on page 2+', () => {
+    const state = Object.assign({}, initialState, {
+      beyondPageOne: true
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        transactionHtml: 'test'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual([])
+    expect(output.batchCountAccumulator).toEqual(0)
+  })
 })

apps/explorer_web/assets/js/pages/transaction.js

@@ -11,7 +11,9 @@ const BATCH_THRESHOLD = 10
 
 export const initialState = {
   batchCountAccumulator: 0,
+  beyondPageOne: null,
   blockNumber: null,
+  channelDisconnected: false,
   confirmations: null,
   newTransactions: []
 }
@@ -20,9 +22,18 @@ export function reducer (state = initialState, action) {
   switch (action.type) {
     case 'PAGE_LOAD': {
       return Object.assign({}, state, {
+        beyondPageOne: !!action.index,
         blockNumber: parseInt(action.blockNumber, 10)
       })
     }
+    case 'CHANNEL_DISCONNECTED': {
+      if (state.beyondPageOne) return state
+
+      return Object.assign({}, state, {
+        channelDisconnected: true,
+        batchCountAccumulator: 0
+      })
+    }
     case 'RECEIVED_NEW_BLOCK': {
       if ((action.msg.blockNumber - state.blockNumber) > state.confirmations) {
         return Object.assign({}, state, {
@@ -31,7 +42,8 @@ export function reducer (state = initialState, action) {
       } else return state
     }
     case 'RECEIVED_NEW_TRANSACTION_BATCH': {
-      debugger
+      if (state.channelDisconnected || state.beyondPageOne) return state
+
       if (!state.batchCountAccumulator && action.msgs.length < BATCH_THRESHOLD) {
         return Object.assign({}, state, {
           newTransactions: [
@@ -68,10 +80,14 @@ router.when('/transactions/:transactionHash').then(({ locale }) => initRedux(red
   }
 }))
 
-router.when('/transactions', { exactPathMatch: true }).then(({ locale }) => initRedux(reducer, {
+router.when('/transactions', { exactPathMatch: true }).then((params) => initRedux(reducer, {
   main (store) {
+    const { locale, index } = params
     const transactionsChannel = socket.channel(`transactions:new_transaction`)
+    numeral.locale(locale)
+    store.dispatch({ type: 'PAGE_LOAD', index })
     transactionsChannel.join()
+    transactionsChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' }))
     transactionsChannel.on('new_transaction', batchChannel((msgs) =>
       store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) }))
     )
@@ -79,8 +95,10 @@ router.when('/transactions', { exactPathMatch: true }).then(({ locale }) => init
   render (state, oldState) {
     const $channelBatching = $('[data-selector="channel-batching-message"]')
     const $channelBatchingCount = $('[data-selector="channel-batching-count"]')
+    const $channelDisconnected = $('[data-selector="channel-disconnected-message"]')
     const $transactionsList = $('[data-selector="transactions-list"]')
 
+    if (state.channelDisconnected) $channelDisconnected.show()
     if (state.batchCountAccumulator) {
       $channelBatching.show()
       $channelBatchingCount[0].innerHTML = numeral(state.batchCountAccumulator).format()

apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex

@@ -48,6 +48,11 @@
           <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="reload-button" class="alert alert-danger">
+          <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer transactions" %></a>
+        </div>
+      </div>
       <h2 class="card-title mb-0"><%= gettext "Transactions" %></h2>
       <p><%= gettext("Showing %{count} Validated Transactions", count: Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###")) %></p>
       <span data-selector="transactions-list">