Refactor to replace any block that matches the new block received

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

@@ -23,7 +23,7 @@ describe('RECEIVED_NEW_BLOCK', () => {
     const output = reducer(initialState, action)
 
     expect(output.newBlock).toBe('test')
-    expect(output.currentBlockNumber).toBe(1)
+    expect(output.blockNumbers).toEqual([1])
   })
   test('on page 2+', () => {
     const state = Object.assign({}, initialState, {
@@ -38,10 +38,12 @@ describe('RECEIVED_NEW_BLOCK', () => {
     const output = reducer(state, action)
 
     expect(output.newBlock).toBe(null)
+    expect(output.blockNumbers).toEqual([])
+    expect(output.skippedBlockNumbers).toEqual([])
   })
   test('inserts place holders if block received out of order', () => {
     const state = Object.assign({}, initialState, {
-      currentBlockNumber: 2
+      blockNumbers: [2]
     })
     const action = {
       type: 'RECEIVED_NEW_BLOCK',
@@ -53,7 +55,57 @@ describe('RECEIVED_NEW_BLOCK', () => {
     const output = reducer(state, action)
 
     expect(output.newBlock).toBe('test5')
-    expect(output.currentBlockNumber).toBe(5)
+    expect(output.blockNumbers).toEqual([5, 4, 3, 2])
     expect(output.skippedBlockNumbers).toEqual([3, 4])
   })
+  test('replaces skipped block', () => {
+    const state = Object.assign({}, initialState, {
+      blockNumbers: [5, 4, 3, 2, 1],
+      skippedBlockNumbers: [1, 3, 4]
+    })
+    const action = {
+      type: 'RECEIVED_NEW_BLOCK',
+      msg: {
+        blockHtml: 'test3',
+        blockNumber: 3
+      }
+    }
+    const output = reducer(state, action)
+
+    expect(output.newBlock).toBe('test3')
+    expect(output.blockNumbers).toEqual([5, 4, 3, 2, 1])
+    expect(output.skippedBlockNumbers).toEqual([1, 4])
+  })
+  test('replaces duplicated block', () => {
+    const state = Object.assign({}, initialState, {
+      blockNumbers: [5, 4]
+    })
+    const action = {
+      type: 'RECEIVED_NEW_BLOCK',
+      msg: {
+        blockHtml: 'test5',
+        blockNumber: 5
+      }
+    }
+    const output = reducer(state, action)
+
+    expect(output.newBlock).toBe('test5')
+    expect(output.blockNumbers).toEqual([5, 4])
+  })
+  test('skips if new block height is lower than lowest on page', () => {
+    const state = Object.assign({}, initialState, {
+      blockNumbers: [5, 4, 3, 2]
+    })
+    const action = {
+      type: 'RECEIVED_NEW_BLOCK',
+      msg: {
+        blockHtml: 'test1',
+        blockNumber: 1
+      }
+    }
+    const output = reducer(state, action)
+
+    expect(output.newBlock).toBe(null)
+    expect(output.blockNumbers).toEqual([5, 4, 3, 2])
+  })
 })

apps/block_scout_web/assets/js/pages/block.js

@@ -7,9 +7,9 @@ import { updateAllAges } from '../lib/from_now'
 import { initRedux, prependWithClingBottom } from '../utils'
 
 export const initialState = {
+  blockNumbers: [],
   beyondPageOne: null,
   channelDisconnected: false,
-  currentBlockNumber: null,
   newBlock: null,
   replaceBlock: null,
   skippedBlockNumbers: []
@@ -18,13 +18,9 @@ export const initialState = {
 export function reducer (state = initialState, action) {
   switch (action.type) {
     case 'PAGE_LOAD': {
-      let blockNumber = parseInt(state.currentBlockNumber)
-      if (!action.beyondPageOne) {
-        blockNumber = parseInt(action.highestBlockNumber)
-      }
       return Object.assign({}, state, {
         beyondPageOne: action.beyondPageOne,
-        currentBlockNumber: blockNumber
+        blockNumbers: action.blockNumbers
       })
     }
     case 'CHANNEL_DISCONNECTED': {
@@ -35,23 +31,29 @@ export function reducer (state = initialState, action) {
     case 'RECEIVED_NEW_BLOCK': {
       if (state.channelDisconnected || state.beyondPageOne) return state
 
-      let skippedBlockNumbers = state.skippedBlockNumbers.slice(0)
-      let replaceBlock = null
       const blockNumber = parseInt(action.msg.blockNumber)
-      if (blockNumber > state.currentBlockNumber + 1) {
+      if (_.includes(state.blockNumbers, blockNumber)) {
-        for (let i = state.currentBlockNumber + 1; i < action.msg.blockNumber; i++) {
+        return Object.assign({}, state, {
-          skippedBlockNumbers.push(i)
+          newBlock: action.msg.blockHtml,
+          replaceBlock: blockNumber,
+          skippedBlockNumbers: _.without(state.skippedBlockNumbers, blockNumber)
+        })
+      } else if (blockNumber < _.last(state.blockNumbers)){
+        return state
+      } else {
+        let skippedBlockNumbers = state.skippedBlockNumbers.slice(0)
+        if (blockNumber > state.blockNumbers[0] + 1) {
+          for (let i = state.blockNumbers[0] + 1; i < blockNumber; i++) {
+            skippedBlockNumbers.push(i)
+          }
         }
-      } else if (_.indexOf(skippedBlockNumbers, blockNumber) != -1) {
+        return Object.assign({}, state, {
-        skippedBlockNumbers = _.without(skippedBlockNumbers, blockNumber)
+          blockNumbers: _.chain([blockNumber]).union(skippedBlockNumbers, state.blockNumbers).orderBy([],['desc']).value(),
-        replaceBlock = blockNumber
+          newBlock: action.msg.blockHtml,
+          replaceBlock: null,
+          skippedBlockNumbers
+        })
       }
-      return Object.assign({}, state, {
-        currentBlockNumber: blockNumber > state.currentBlockNumber ? blockNumber : state.currentBlockNumber,
-        newBlock: action.msg.blockHtml,
-        replaceBlock,
-        skippedBlockNumbers
-      })
     }
     default:
       return state
@@ -65,7 +67,7 @@ if ($blockListPage.length) {
       const state = store.dispatch({
         type: 'PAGE_LOAD',
         beyondPageOne: !!humps.camelizeKeys(URI(window.location).query(true)).blockNumber,
-        highestBlockNumber: $('[data-selector="block-number"]').filter(':first').text()
+        blockNumbers: $('[data-selector="block-number"]').map((index, el) => parseInt(el.innerText)).toArray()
       })
       if (!state.beyondPageOne) {
         const blocksChannel = socket.channel(`blocks:new_block`, {})
@@ -81,20 +83,18 @@ if ($blockListPage.length) {
       const $blocksList = $('[data-selector="blocks-list"]')
 
       if (state.channelDisconnected) $channelDisconnected.show()
-      if (oldState.newBlock !== state.newBlock) {
+      if (oldState.newBlock !== state.newBlock || (state.replaceBlock && oldState.replaceBlock !== state.replaceBlock)) {
-        if (oldState.skippedBlockNumbers !== state.skippedBlockNumbers) {
+        if (state.replaceBlock && oldState.replaceBlock !== state.replaceBlock) {
-          const newSkippedBlockNumbers = _.difference(state.skippedBlockNumbers, oldState.skippedBlockNumbers)
+          const $replaceBlock = $(`[data-block-number="${state.replaceBlock}"]`)
-          if (state.replaceBlock) {
+          $replaceBlock.addClass('shrink-out')
-            const $placeHolder = $(`[data-selector="place-holder"][data-block-number="${state.replaceBlock}"] div.tile`)
+          setTimeout(() => $replaceBlock.replaceWith(state.newBlock), 400)
-            $placeHolder.addClass('shrink-out')
+        } else {
-            setTimeout(() => $placeHolder.replaceWith(state.newBlock), 400)
+          if (oldState.skippedBlockNumbers !== state.skippedBlockNumbers) {
-          } else {
+            const newSkippedBlockNumbers = _.difference(state.skippedBlockNumbers, oldState.skippedBlockNumbers)
             _.map(newSkippedBlockNumbers, (skippedBlockNumber) => {
               prependWithClingBottom($blocksList, placeHolderBlock(skippedBlockNumber))
             })
-            prependWithClingBottom($blocksList, state.newBlock)
           }
-        } else {
           prependWithClingBottom($blocksList, state.newBlock)
         }
         updateAllAges()

apps/block_scout_web/lib/block_scout_web/templates/block/_tile.html.eex

@@ -1,4 +1,4 @@
-<div class="tile tile-type-block fade-up">
+<div class="tile tile-type-block fade-up" data-block-number="<%= to_string(@block.number) %>">
   <div class="row">
     <div class="col-md-8 col-lg-9">
       <!-- block height -->
@@ -6,8 +6,7 @@
             @block,
             class: "tile-title",
             to: block_path(BlockScoutWeb.Endpoint, :show, @block),
-            "data-selector": "block-number",
+            "data-selector": "block-number"
-            "data-block-number": to_string(@block.number)
           ) %>
       <div>
         <!-- transactions -->

apps/block_scout_web/test/block_scout_web/features/pages/block_list_page.ex

@@ -12,7 +12,7 @@ defmodule BlockScoutWeb.BlockListPage do
   end
 
   def block(%Block{number: block_number}) do
-    css("[data-selector='block-number'][data-block-number='#{block_number}']")
+    css("[data-block-number='#{block_number}']")
   end
 
   def place_holder_blocks(count) do