Merge pull request #1137 from fvictorio/1101-remove-infinite-scroll-transactions
Remove infinite scroll in address transactions pagepull/1170/head
Andrew Cravenho
6 years ago
committed by
GitHub
commit
37b1f91fe8
@ -0,0 +1,124 @@ |
||||
import { reducer, initialState } from '../../../js/pages/address/transactions' |
||||
|
||||
describe('RECEIVED_NEW_TRANSACTION', () => { |
||||
test('with new transaction', () => { |
||||
const state = Object.assign({}, initialState, { |
||||
items: ['transaction html'] |
||||
}) |
||||
const action = { |
||||
type: 'RECEIVED_NEW_TRANSACTION', |
||||
msg: { transactionHtml: 'another transaction html' } |
||||
} |
||||
const output = reducer(state, action) |
||||
|
||||
expect(output.items).toEqual([ 'another transaction html', 'transaction html' ]) |
||||
}) |
||||
|
||||
test('when channel has been disconnected', () => { |
||||
const state = Object.assign({}, initialState, { |
||||
channelDisconnected: true, |
||||
items: ['transaction html'] |
||||
}) |
||||
const action = { |
||||
type: 'RECEIVED_NEW_TRANSACTION', |
||||
msg: { transactionHtml: 'another transaction html' } |
||||
} |
||||
const output = reducer(state, action) |
||||
|
||||
expect(output.items).toEqual(['transaction html']) |
||||
}) |
||||
|
||||
test('beyond page one', () => { |
||||
const state = Object.assign({}, initialState, { |
||||
beyondPageOne: true, |
||||
items: ['transaction html'] |
||||
}) |
||||
const action = { |
||||
type: 'RECEIVED_NEW_TRANSACTION', |
||||
msg: { transactionHtml: 'another transaction html' } |
||||
} |
||||
const output = reducer(state, action) |
||||
|
||||
expect(output.items).toEqual([ 'transaction html' ]) |
||||
}) |
||||
|
||||
test('adds the new transaction to state even when it is filtered by to', () => { |
||||
const state = Object.assign({}, initialState, { |
||||
addressHash: '0x001', |
||||
filter: 'to', |
||||
items: [] |
||||
}) |
||||
const action = { |
||||
type: 'RECEIVED_NEW_TRANSACTION', |
||||
msg: { |
||||
fromAddressHash: '0x002', |
||||
transactionHtml: 'transaction html', |
||||
toAddressHash: '0x001' |
||||
} |
||||
} |
||||
const output = reducer(state, action) |
||||
|
||||
expect(output.items).toEqual(['transaction html']) |
||||
}) |
||||
|
||||
test( |
||||
'does nothing when it is filtered by to but the toAddressHash is different from addressHash', |
||||
() => { |
||||
const state = Object.assign({}, initialState, { |
||||
addressHash: '0x001', |
||||
filter: 'to', |
||||
items: [] |
||||
}) |
||||
const action = { |
||||
type: 'RECEIVED_NEW_TRANSACTION', |
||||
msg: { |
||||
fromAddressHash: '0x003', |
||||
transactionHtml: 'transaction html', |
||||
toAddressHash: '0x002' |
||||
} |
||||
} |
||||
const output = reducer(state, action) |
||||
|
||||
expect(output.items).toEqual([]) |
||||
}) |
||||
|
||||
test('adds the new transaction to state even when it is filtered by from', () => { |
||||
const state = Object.assign({}, initialState, { |
||||
addressHash: '0x001', |
||||
filter: 'from', |
||||
items: [] |
||||
}) |
||||
const action = { |
||||
type: 'RECEIVED_NEW_TRANSACTION', |
||||
msg: { |
||||
fromAddressHash: '0x001', |
||||
transactionHtml: 'transaction html', |
||||
toAddressHash: '0x002' |
||||
} |
||||
} |
||||
const output = reducer(state, action) |
||||
|
||||
expect(output.items).toEqual(['transaction html']) |
||||
}) |
||||
|
||||
test( |
||||
'does nothing when it is filtered by from but the fromAddressHash is different from addressHash', |
||||
() => { |
||||
const state = Object.assign({}, initialState, { |
||||
addressHash: '0x001', |
||||
filter: 'to', |
||||
items: [] |
||||
}) |
||||
const action = { |
||||
type: 'RECEIVED_NEW_TRANSACTION', |
||||
msg: { |
||||
addressHash: '0x001', |
||||
transactionHtml: 'transaction html', |
||||
fromAddressHash: '0x002' |
||||
} |
||||
} |
||||
const output = reducer(state, action) |
||||
|
||||
expect(output.items).toEqual([]) |
||||
}) |
||||
}) |
||||
@ -0,0 +1,73 @@ |
||||
import $ from 'jquery' |
||||
import _ from 'lodash' |
||||
import URI from 'urijs' |
||||
import humps from 'humps' |
||||
import socket from '../../socket' |
||||
import { connectElements } from '../../lib/redux_helpers.js' |
||||
import { createAsyncLoadStore } from '../../lib/async_listing_load' |
||||
|
||||
export const initialState = { |
||||
addressHash: null, |
||||
channelDisconnected: false, |
||||
filter: null |
||||
} |
||||
|
||||
export function reducer (state, action) { |
||||
switch (action.type) { |
||||
case 'PAGE_LOAD': |
||||
case 'ELEMENTS_LOAD': { |
||||
return Object.assign({}, state, _.omit(action, 'type')) |
||||
} |
||||
case 'CHANNEL_DISCONNECTED': { |
||||
if (state.beyondPageOne) return state |
||||
|
||||
return Object.assign({}, state, { channelDisconnected: true }) |
||||
} |
||||
case 'RECEIVED_NEW_TRANSACTION': { |
||||
if (state.channelDisconnected) return state |
||||
|
||||
if (state.beyondPageOne || |
||||
(state.filter === 'to' && action.msg.toAddressHash !== state.addressHash) || |
||||
(state.filter === 'from' && action.msg.fromAddressHash !== state.addressHash)) { |
||||
return state |
||||
} |
||||
|
||||
return Object.assign({}, state, { items: [ action.msg.transactionHtml, ...state.items ] }) |
||||
} |
||||
default: |
||||
return state |
||||
} |
||||
} |
||||
|
||||
const elements = { |
||||
'[data-selector="channel-disconnected-message"]': { |
||||
render ($el, state) { |
||||
if (state.channelDisconnected) $el.show() |
||||
} |
||||
} |
||||
} |
||||
|
||||
if ($('[data-page="address-transactions"]').length) { |
||||
const store = createAsyncLoadStore(reducer, initialState, 'dataset.transactionHash') |
||||
const addressHash = $('[data-page="address-details"]')[0].dataset.pageAddressHash |
||||
const { filter, blockNumber } = humps.camelizeKeys(URI(window.location).query(true)) |
||||
|
||||
connectElements({ store, elements }) |
||||
|
||||
store.dispatch({ |
||||
type: 'PAGE_LOAD', |
||||
addressHash, |
||||
filter, |
||||
beyondPageOne: !!blockNumber |
||||
}) |
||||
|
||||
const addressChannel = socket.channel(`addresses:${addressHash}`, {}) |
||||
addressChannel.join() |
||||
addressChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' })) |
||||
addressChannel.on('transaction', (msg) => { |
||||
store.dispatch({ |
||||
type: 'RECEIVED_NEW_TRANSACTION', |
||||
msg: humps.camelizeKeys(msg) |
||||
}) |
||||
}) |
||||
} |
||||
Loading…
Reference in new issue