Skip to content

Commit

Permalink
Merge pull request #1273 from LiskHQ/1269-pending-transaction-details
Browse files Browse the repository at this point in the history 
Fix pending details missing - Closes #1269
  • Loading branch information
@michaeltomasik
michaeltomasik committed Sep 14, 2018
2 parents e762a55 + d3ff75f commit 79d0cb3
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 26 deletions.
1 change: 1 addition & 0 deletions src/components/transactions/explorerTransactions/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ describe('ExplorerTransactions Component', () => {
address: accounts.genesis.address,
activeFilter: txFilters.all,
history: { push: spy(), location: { search: ' ' } },
pendingTransactions: [],
t: key => key,
};

Expand Down
84 changes: 60 additions & 24 deletions src/components/transactions/transactionDetailView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ class TransactionsDetailView extends React.Component {
constructor(props) {
super(props);

const { search } = this.props.location || window.location;
const params = new URLSearchParams(search);
const transactionId = params.get('id');
const transactionId = this.getTransactionIdFromURL();

if (props.peers.data && transactionId) {
this.props.loadTransaction({
Expand All @@ -34,6 +32,25 @@ class TransactionsDetailView extends React.Component {

componentWillReceiveProps(nextProps) {
if (nextProps.location && !nextProps.location.search) this.props.prevStep();

// It rerenders component when pending status changed to confirmed
if (nextProps.pendingTransactions &&
nextProps.pendingTransactions.length === 0 && typeof nextProps.transaction === 'string') {
const transactionId = this.getTransactionIdFromURL();

if (this.props.peers.data && transactionId) {
this.props.loadTransaction({
id: transactionId,
});
}
}
}

getTransactionIdFromURL() {
const { search } = this.props.location || window.location;
const params = new URLSearchParams(search);

return params.get('id');
}

getVoters(dataName) {
Expand Down Expand Up @@ -66,40 +83,50 @@ class TransactionsDetailView extends React.Component {
}

getFirstRow() {
const isSendTransaction = this.props.transaction.type === transactions.send;
const transactionId = this.getTransactionIdFromURL();
const isTransactionEmpty = (typeof this.props.transaction === 'object' &&
Object.keys(this.props.transaction).length !== 0);

const transaction = isTransactionEmpty || (isTransactionEmpty &&
this.props.pendingTransactions.find(tx => tx.id === transactionId)) ?
this.props.transaction :
(this.props.pendingTransactions.find(tx => tx.id === transactionId) || {});

const isSendTransaction = this.props.transaction.type === transactions.send
|| (this.props.pendingTransactions && this.props.pendingTransactions.length > 0);

return (
<TransactionDetailViewRow>
<TransactionDetailViewField
label={this.props.t('Sender')}
value={
<Link className={`${styles.addressLink} ${styles.clickable}`} id='sender-address'
to={`${routes.explorer.path}${routes.accounts.path}/${this.props.transaction.senderId}`}>
{this.props.transaction.senderId}
to={`${routes.explorer.path}${routes.accounts.path}/${transaction.senderId}`}>
{transaction.senderId}
</Link>
}
column>
{this.props.transaction.senderId ?
{transaction.senderId ?
<figure className={styles.accountVisual}>
<AccountVisual address={this.props.transaction.senderId} size={43} />
<AccountVisual address={transaction.senderId} size={43} />
</figure> : null}
</TransactionDetailViewField>

{!isSendTransaction ? this.getDateField() :
<TransactionDetailViewField
shouldShow={this.props.transaction.recipientId}
shouldShow={transaction.recipientId}
label={this.props.t('Recipient')}
style={styles.sender}
value={
<Link className={`${styles.addressLink} ${styles.clickable}`} id='receiver-address'
to={`${routes.explorer.path}${routes.accounts.path}/${this.props.transaction.recipientId}`}>
{this.props.transaction.recipientId}
to={`${routes.explorer.path}${routes.accounts.path}/${transaction.recipientId}`}>
{transaction.recipientId}
</Link>
}
column>
{this.props.transaction.recipientId ?
{transaction.recipientId ?
<figure className={styles.accountVisual}>
<AccountVisual address={this.props.transaction.recipientId} size={43} />
<AccountVisual address={transaction.recipientId} size={43} />
</figure> : null
}
</TransactionDetailViewField>
Expand All @@ -109,6 +136,15 @@ class TransactionsDetailView extends React.Component {
}

render() {
const transactionId = this.getTransactionIdFromURL();
const isTransactionEmpty = (typeof this.props.transaction === 'object' &&
Object.keys(this.props.transaction).length !== 0);

const transaction = isTransactionEmpty || (isTransactionEmpty &&
this.props.pendingTransactions.find(tx => tx.id === transactionId)) ?
this.props.transaction :
(this.props.pendingTransactions.find(tx => tx.id === transactionId) || {});

return (
<div className={`${styles.details}`}>
{
Expand All @@ -129,8 +165,8 @@ class TransactionsDetailView extends React.Component {
<header>
<h2 className={styles.title}>
<TransactionType
{...this.props.transaction}
address={this.props.transaction.senderId}
{...transaction}
address={transaction.senderId}
showTransaction />
</h2>
</header>
Expand All @@ -139,20 +175,20 @@ class TransactionsDetailView extends React.Component {

{this.getFirstRow()}

<TransactionDetailViewRow shouldShow={this.props.transaction.type === 0}>
<TransactionDetailViewRow shouldShow={transaction.type === 0}>
{this.getDateField()}
<TransactionDetailViewField
label={this.props.t('Amount (LSK)')}
value={
<Amount
value={this.props.transaction}
value={transaction}
address={this.props.address}>
</Amount>
}
style={styles.amount} />
</TransactionDetailViewRow>

<TransactionDetailViewRow shouldShow={this.props.transaction.type === transactions.vote}>
<TransactionDetailViewRow shouldShow={transaction.type === transactions.vote}>
<TransactionDetailViewField
label={this.props.t('Added votes')}
value={this.getVoters('added')} />
Expand All @@ -164,10 +200,10 @@ class TransactionsDetailView extends React.Component {
<TransactionDetailViewRow>
<TransactionDetailViewField
label={this.props.t('Additional fee')}
value={<LiskAmount val={this.props.transaction.fee} />} />
value={<LiskAmount val={transaction.fee} />} />
<TransactionDetailViewField
label={this.props.t('Confirmations')}
value={<span>{this.props.transaction.confirmations}</span>} />
value={<span>{transaction.confirmations}</span>} />
</TransactionDetailViewRow>

<TransactionDetailViewRow>
Expand All @@ -176,15 +212,15 @@ class TransactionsDetailView extends React.Component {
label={this.props.t('Transaction ID')}
value={
<CopyToClipboard
value={this.props.transaction.id}
text={this.props.transaction.id}
value={transaction.id}
text={transaction.id}
copyClassName={`${styles.copy}`} />
} />
}
<TransactionDetailViewField
shouldShow={this.props.transaction.asset && this.props.transaction.asset.data}
shouldShow={transaction.asset && transaction.asset.data}
label={this.props.t('Reference')}
value={(this.props.transaction.asset && this.props.transaction.asset.data) || '-'} />
value={(transaction.asset && transaction.asset.data) || '-'} />
</TransactionDetailViewRow>
</div>
<footer>
Expand Down
43 changes: 42 additions & 1 deletion src/components/transactions/transactionDetailView.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import TransactionDetailView from './transactionDetailView';
import txTypes from '../../constants/transactionTypes';

describe('TransactionDetailView', () => {
it('should render 6 rows', () => {
it('should render 5 rows', () => {
const context = {
storeState: {
peers: {
Expand All @@ -34,6 +34,7 @@ describe('TransactionDetailView', () => {
confirmations: '',
id: '',
},
pendingTransactions: [],
match: { params: {} },
history: { push: spy(), location: { search: '' } },
};
Expand All @@ -45,6 +46,45 @@ describe('TransactionDetailView', () => {
expect(props.history.push).to.have.been.calledWith();
});

it('should render 4 rows for pendingTransactions', () => {
const context = {
storeState: {
peers: {
data: {},
options: {},
},
transaction: {
votesName: {},
},
voting: { votes: {} },
},
middlewares: [thunk],
};
const props = {
prevStep: spy(),
t: () => {},
transaction: '',
pendingTransactions: [{
type: txTypes.send,
amount: '0',
senderId: '',
recipientId: '123L',
timestamp: '',
fee: '',
confirmations: '',
id: '',
}],
match: { params: { address: '123L' } },
history: { push: spy(), location: { search: '' } },
};
const wrapper = mountWithContext(<TransactionDetailView {...props} />, context);
const expectedValue = /grid-row/g;
const html = wrapper.html();
expect(html.match(expectedValue)).to.have.lengthOf(4);
wrapper.find('.transaction-details-back-button').simulate('click');
expect(props.history.push).to.have.been.calledWith();
});

it('should display 2 voter-address Links', () => {
const transaction = {
senderId: '',
Expand Down Expand Up @@ -79,6 +119,7 @@ describe('TransactionDetailView', () => {
added: [{ account: { address: 123 }, username: 123 }],
},
},
pendingTransactions: [],
match: { params: {} },
history: { push: () => {}, location: { search: '' } },
};
Expand Down
2 changes: 1 addition & 1 deletion test/integration/transactionID.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ describe('@integration: Single Transaction', () => {
if (accountType) { store.dispatch(accountLoggedIn(account)); }
wrapper = mount(renderWithRouter(
SingleTransaction, store,
{ match: { params: { id } }, transaction: transactionMock },
{ match: { params: { id } }, transaction: transactionMock, pendingTransactions: [] },
));
helper = new Helper(wrapper, store);
};
Expand Down

0 comments on commit 79d0cb3

Please sign in to comment.