Merge pull request #3029 from poanetwork/vb-fix-items-appearance

Fix transactions and blocks appearance on the main page

CHANGELOG.md

@@ -7,6 +7,7 @@
 - [#2834](https://github.com/poanetwork/blockscout/pull/2834) - always redirect to checksummed hash
 
 ### Fixes
+- [#3029](https://github.com/poanetwork/blockscout/pull/3029) - Fix transactions and blocks appearance on the main page
 - [#3028](https://github.com/poanetwork/blockscout/pull/3028) - Decrease polling period value for realtime fetcher
 - [#3027](https://github.com/poanetwork/blockscout/pull/3027) - Rescue for SUPPORTED_CHAINS env var parsing
 - [#3025](https://github.com/poanetwork/blockscout/pull/3025) - Fix splitting of indexer/web components setup

apps/block_scout_web/assets/__tests__/pages/chain.js

@@ -61,6 +61,36 @@ describe('RECEIVED_NEW_BLOCK', () => {
     expect(output.averageBlockTime).toEqual('5 seconds')
     expect(output.blocks).toEqual([
       { blockNumber: 2, chainBlockHtml: 'new block', averageBlockTime: '5 seconds' },
+      { blockNumber: 1, chainBlockHtml: 'test 1' },
+      { blockNumber: 0, chainBlockHtml: 'test 0' }
+    ])
+  })
+
+  test('receives new block if >= 4 blocks', () => {
+    const state = Object.assign({}, initialState, {
+      averageBlockTime: '6 seconds',
+      blocks: [
+        { blockNumber: 3, chainBlockHtml: 'test 3' },
+        { blockNumber: 2, chainBlockHtml: 'test 2' },
+        { blockNumber: 1, chainBlockHtml: 'test 1' },
+        { blockNumber: 0, chainBlockHtml: 'test 0' }
+      ]
+    })
+    const action = {
+      type: 'RECEIVED_NEW_BLOCK',
+      msg: {
+        averageBlockTime: '5 seconds',
+        blockNumber: 4,
+        chainBlockHtml: 'new block'
+      }
+    }
+    const output = reducer(state, action)
+
+    expect(output.averageBlockTime).toEqual('5 seconds')
+    expect(output.blocks).toEqual([
+      { blockNumber: 4, chainBlockHtml: 'new block', averageBlockTime: '5 seconds' },
+      { blockNumber: 3, chainBlockHtml: 'test 3' },
+      { blockNumber: 2, chainBlockHtml: 'test 2' },
       { blockNumber: 1, chainBlockHtml: 'test 1' }
     ])
   })
@@ -318,7 +348,8 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
   })
   test('single transaction after large batch of transactions', () => {
     const state = Object.assign({}, initialState, {
-      transactionsBatch: [1,2,3,4,5,6,7,8,9,10,11]
+      transactionsBatch: [6,7,8,9,10,11,12,13,14,15,16],
+      transactions: [1,2,3,4,5]
     })
     const action = {
       type: 'RECEIVED_NEW_TRANSACTION_BATCH',
@@ -328,7 +359,7 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
     }
     const output = reducer(state, action)
 
-    expect(output.transactions).toEqual([])
+    expect(output.transactions).toEqual([1,2,3,4,5])
     expect(output.transactionsBatch.length).toEqual(12)
   })
   test('large batch of transactions after large batch of transactions', () => {

apps/block_scout_web/assets/js/pages/chain.js

@@ -13,6 +13,7 @@ import { batchChannel, showLoader } from '../lib/utils'
 import listMorph from '../lib/list_morph'
 
 const BATCH_THRESHOLD = 6
+const BLOCKS_PER_PAGE = 4
 
 export const initialState = {
   addressCount: null,
@@ -45,11 +46,17 @@ function baseReducer (state = initialState, action) {
     }
     case 'RECEIVED_NEW_BLOCK': {
       if (!state.blocks.length || state.blocks[0].blockNumber < action.msg.blockNumber) {
+        let pastBlocks
+        if (state.blocks.length < BLOCKS_PER_PAGE) {
+          pastBlocks = state.blocks
+        } else {
+          pastBlocks = state.blocks.slice(0, -1)
+        }
         return Object.assign({}, state, {
           averageBlockTime: action.msg.averageBlockTime,
           blocks: [
             action.msg,
-            ...state.blocks.slice(0, -1)
+            ...pastBlocks
           ],
           blockCount: action.msg.blockNumber + 1
         })
@@ -88,7 +95,16 @@ function baseReducer (state = initialState, action) {
         return Object.assign({}, state, { transactionCount })
       }
 
-      if (!state.transactionsBatch.length && action.msgs.length < BATCH_THRESHOLD) {
+      const transactionsLength = state.transactions.length + action.msgs.length
+      if (transactionsLength < BATCH_THRESHOLD) {
+        return Object.assign({}, state, {
+          transactions: [
+            ...action.msgs.reverse(),
+            ...state.transactions
+          ],
+          transactionCount
+        })
+      } else if (!state.transactionsBatch.length && action.msgs.length < BATCH_THRESHOLD) {
         return Object.assign({}, state, {
           transactions: [
             ...action.msgs.reverse(),