Merge pull request #615 from LiskHQ/593-dashboard-transaction-rows

Direct dashboard transaction row to tx details
LiskHQ · Mar 28, 2018 · f9c0c07 · f9c0c07
2 parents ab1eca6 + 7d286ca
commit f9c0c07
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 17 deletions.
diff --git a/src/components/accountTransactions/index.js b/src/components/accountTransactions/index.js
@@ -27,6 +27,7 @@ class accountTransactions extends React.Component {
       </div>
       <div className={`${grid['col-sm-12']} ${styles.transactions} ${grid['col-md-8']}`}>
         <Transactions
+          history={this.props.history}
           address={this.props.match.params.address}
           balance={this.props.balance} />
       </div>

diff --git a/src/components/accountTransactions/index.test.js b/src/components/accountTransactions/index.test.js
@@ -25,7 +25,7 @@ describe('AccountTransaction Component', () => {
 
     props = {
       match: { params: { address: '987654321L' } },
-      history: { push: spy() },
+      history: { push: spy(), location: { search: ' ' } },
       t: key => key,
     };
     wrapper = mountWithContext(<AccountTransactions {...props}/>, { storeState });

diff --git a/src/components/dashboard/index.js b/src/components/dashboard/index.js
@@ -13,7 +13,8 @@ import styles from './dashboard.css';
 
 class Dashboard extends React.Component {
   render() {
-    const { transactions, t, account, loading } = this.props;
+    const { transactions, t, account, loading, history } = this.props;
+
     return <div className={`${grid.row} ${styles.wrapper}`}>
       <div className={`${grid['col-md-8']} ${grid['col-xs-12']} ${styles.main}`}>
         <Box className={`${styles.graph}`}>
@@ -35,6 +36,8 @@ class Dashboard extends React.Component {
             address: account.address,
             dashboard: true,
             loading,
+            history,
+            onClick: props => history.push(`${routes.main.path}${routes.wallet.path}?id=${props.value.id}`),
           }} />
         </Box>
       </div>

diff --git a/src/components/dashboard/index.test.js b/src/components/dashboard/index.test.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import { expect } from 'chai';
+import { spy } from 'sinon';
 
 import { mountWithContext } from '../../../test/utils/mountHelpers';
 import Dashboard from './index';
 import TransactionRow from '../transactions/transactionRow';
+import routes from '../../constants/routes';
 
 describe('Dashboard', () => {
   let wrapper;
-
+  const history = { location: {}, push: spy() };
   beforeEach(() => {
     const context = {
       storeState: {
@@ -33,10 +35,15 @@ describe('Dashboard', () => {
         account: { address: 'some address', serverPublicKey: 'public_key' },
       },
     };
-    wrapper = mountWithContext(<Dashboard history={ { location: {} } }/>, context);
+    wrapper = mountWithContext(<Dashboard history={history}/>, context);
   });
 
   it('should render transaction list with at most 3 transactions', () => {
     expect(wrapper.find(TransactionRow)).to.have.lengthOf(3);
   });
+
+  it('should be possible to click the transaction rows', () => {
+    wrapper.find(TransactionRow).at(0).simulate('click');
+    expect(history.push).to.have.been.calledWith(`${routes.main.path}${routes.wallet.path}?id=1038520263604146911`);
+  });
 });
diff --git a/src/components/transactions/index.test.js b/src/components/transactions/index.test.js
@@ -36,7 +36,7 @@ describe('TransactionsHOC', () => {
       loading: [],
       voting,
     });
-    wrapper = mount(<Provider store={store}><Router><TransactionsHOC /></Router></Provider>, {
+    wrapper = mount(<Provider store={store}><Router><TransactionsHOC history={ { location: { search: '' } }} /></Router></Provider>, {
       context: { store, history, i18n },
       childContextTypes: {
         store: PropTypes.object.isRequired,

diff --git a/src/components/transactions/transactionDetailView.js b/src/components/transactions/transactionDetailView.js
@@ -17,7 +17,10 @@ const TransactionsDetailView = props => (
       props.prevStep ?
         <header>
           <h3>
-            <small className={`${styles.backButton}`} onClick={() => { props.prevStep(); }} id='transactionDetailsBackButton'>
+            <small className={`${styles.backButton}`} onClick={() => {
+              props.history.push(props.history.location.pathname);
+              props.prevStep();
+            }} id='transactionDetailsBackButton'>
               <FontIcon className={`${styles.arrow}`} value='arrow-left'/>
               <span className={`${styles.text}`}>{props.t('Back to overview')}</span>
             </small>

diff --git a/src/components/transactions/transactionDetailView.test.js b/src/components/transactions/transactionDetailView.test.js
@@ -17,6 +17,7 @@ describe('TransactionDetailView', () => {
         confirmations: '',
         id: '',
       },
+      history: { push: () => {}, location: { search: '' } },
     };
     const wrapper = mountWithContext(<TransactionDetailView {...props} />, { });
 

diff --git a/src/components/transactions/transactionList.js b/src/components/transactions/transactionList.js
@@ -8,6 +8,7 @@ import { transactionsRequestInit } from '../../actions/transactions';
 import txFilters from './../../constants/transactionFilters';
 import txTypes from './../../constants/transactionTypes';
 import styles from './transactions.css';
+import { parseSearchParams } from './../../utils/searchParams';
 
 class TransactionsList extends React.Component {
   constructor(props) {
@@ -21,7 +22,19 @@ class TransactionsList extends React.Component {
     if (nextProps.peers.data !== this.props.peers.data) {
       this.props.transactionsRequestInit({ address: this.props.address });
     }
+
+    if (nextProps.transactions && this.props.nextStep) this.showDetails(nextProps.transactions);
+  }
+
+  showDetails(transactions) {
+    const paramsId = parseSearchParams(this.props.history.location.search).id;
+
+    if (paramsId) {
+      const value = transactions.filter(transaction => transaction.id === paramsId)[0];
+      if (value) this.props.nextStep({ value, t: this.props.t });
+    }
   }
+
   // eslint-disable-next-line class-methods-use-this
   isLargeScreen() {
     return window.innerWidth > 768;
@@ -34,7 +47,7 @@ class TransactionsList extends React.Component {
       loading,
       dashboard,
       address,
-      nextStep,
+      onClick,
       loadMore,
       t,
     } = this.props;
@@ -69,7 +82,7 @@ class TransactionsList extends React.Component {
             key={i}
             t={t}
             value={transaction}
-            nextStep={nextStep}
+            onClick={onClick}
           />))}
       {
         // the transaction list should be scrollable on a large screen

diff --git a/src/components/transactions/transactionOverview.js b/src/components/transactions/transactionOverview.js
@@ -108,8 +108,10 @@ class Transactions extends React.Component {
           transactions={this.props.transactions}
           loadMore={this.loadMore.bind(this)}
           nextStep={this.props.nextStep}
+          onClick={this.props.nextStep}
           loading={this.isLoading()}
           t={this.props.t}
+          history={this.props.history}
         />
         {
           // the whole transactions box should be scrollable on XS

diff --git a/src/components/transactions/transactionRow.js b/src/components/transactions/transactionRow.js
@@ -16,10 +16,9 @@ class TransactionRow extends React.Component {
 
   render() {
     const { props } = this;
-    const nextStep = !props.nextStep ? (() => {}) : () => (props.nextStep({ value: props.value }));
-
+    const onClick = !props.onClick ? (() => {}) : () => props.onClick(this.props);
     return (
-      <div className={`${grid.row} ${styles.rows} ${styles.clickable} transactionsRow`} onClick={nextStep}>
+      <div className={`${grid.row} ${styles.rows} ${styles.clickable} transactionsRow`} onClick={onClick}>
         <div className={`${styles.leftText} ${grid['col-xs-6']} ${grid['col-sm-6']} transactions-cell`}>
           <div className={`${styles.address}`}>
             <TransactionType {...props.value} address={props.address}></TransactionType>
@@ -35,10 +34,7 @@ class TransactionRow extends React.Component {
           <Amount {...props}></Amount>
         </div>
         <div className={`${styles.rightText} ${grid['col-xs-1']} ${grid['col-sm-1']} transactions-cell`}>
-          { props.nextStep
-            ? <FontIcon value='arrow-right'/>
-            : null
-          }
+          <FontIcon value='arrow-right'/>
         </div>
       </div>
     );

diff --git a/src/components/transactions/transactionRow.test.js b/src/components/transactions/transactionRow.test.js
@@ -59,7 +59,7 @@ describe('TransactionRow', () => {
     expect(wrapper.find('.transactions-cell')).to.have.lengthOf(4);
   });
 
-  it('should not cause any error on click if props.nextStep is not defined', () => {
+  it('should not cause any error on click if props.onClick is not defined', () => {
     const wrapper = mount(<Provider store={store}>
       <Router>
         <I18nextProvider i18n={ i18n }>

diff --git a/test/integration/accountTransactions.test.js b/test/integration/accountTransactions.test.js
@@ -101,7 +101,7 @@ describe('@integration: Account Transactions', () => {
     accountAPIStub.withArgs(match.any).returnsPromise().resolves({ ...account });
     if (accountType) { store.dispatch(accountLoggedIn(account)); }
     wrapper = mount(renderWithRouter(AccountTransactions, store,
-      { match: { params: { address } } }));
+      { match: { params: { address } }, history: { location: { search: '' } } }));
 
     helper = new Helper(wrapper, store);
   };