Merge pull request #1444 from LiskHQ/1282-refactor-Transactions-detai…

…l-view

Refactor TransactionsDetailView component - Closes #1282

src/components/transactions/transactionDetailView/index.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+// import { withRouter } from 'react-router-dom';
+import { loadTransaction } from '../../../actions/transactions';
+import TransactionDetailView from './transactionDetailView';
+
+const mapStateToProps = state => ({
+  peers: state.peers,
+});
+
+const mapDispatchToProps = dispatch => ({
+  loadTransaction: data => dispatch(loadTransaction(data)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(translate()(TransactionDetailView));

src/components/transactions/transactionDetailView/transactionDetailDateField.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TimeFromTimestamp, DateFromTimestamp } from './../../timestamp/index';
+import TransactionDetailViewField from './transactionDetailViewField';
+
+const DateField = props => (
+  <TransactionDetailViewField
+    label={props.t('Date')}
+    className={'tx-date'}
+    value={ props.transaction.timestamp ?
+      <span>
+        <DateFromTimestamp
+          time={props.transaction.timestamp} /> - <TimeFromTimestamp
+          time={props.transaction.timestamp}/>
+      </span> :
+      <span>{props.t('Pending')}</span>
+    } />
+);
+
+export default DateField;

src/components/transactions/transactionDetailView/transactionDetailDateField.test.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import thunk from 'redux-thunk';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { mountWithContext } from '../../../../test/utils/mountHelpers';
+import DateField from './transactionDetailDateField';
+import txTypes from '../../../constants/transactionTypes';
+
+describe('transactionDetailDateField', () => {
+  it('should render date span no timestamp', () => {
+    const context = {
+      storeState: {
+        peers: {
+          data: {},
+          options: {},
+        },
+        transaction: {
+          votesName: {},
+        },
+        voting: { votes: {} },
+      },
+      middlewares: [thunk],
+    };
+    const props = {
+      prevStep: spy(),
+      t: () => {},
+      transaction: {
+        type: txTypes.send,
+        amount: '0',
+        senderId: '',
+        recipientId: '123L',
+        timestamp: '',
+        fee: '',
+        confirmations: '',
+        id: '',
+      },
+      pendingTransactions: [],
+      match: { params: {} },
+      history: { push: spy(), location: { search: '' } },
+    };
+    const wrapper = mountWithContext(<DateField {...props} />, context);
+    const expectedValue = /span/g;
+    const html = wrapper.html();
+    expect(html.match(expectedValue)).to.have.lengthOf(2);
+  });
+
+  it('should render date span with timestamp', () => {
+    const context = {
+      storeState: {
+        peers: {
+          data: {},
+          options: {},
+        },
+        transaction: {
+          votesName: {},
+        },
+        voting: { votes: {} },
+      },
+      middlewares: [thunk],
+    };
+    const props = {
+      prevStep: spy(),
+      t: () => {},
+      transaction: {
+        type: txTypes.send,
+        amount: '0',
+        senderId: '',
+        recipientId: '123L',
+        timestamp: 75694160,
+        fee: '',
+        confirmations: '',
+        id: '',
+      },
+      pendingTransactions: [],
+      match: { params: {} },
+      history: { push: spy(), location: { search: '' } },
+    };
+    const wrapper = mountWithContext(<DateField {...props} />, context);
+    const expectedValue = /span/g;
+    const html = wrapper.html();
+    expect(html.match(expectedValue)).to.have.lengthOf(6);
+  });
+});

src/components/transactions/transactionDetailView.css → src/components/transactions/transactionDetailView/transactionDetailView.css

@@ -1,4 +1,4 @@
-@import '../app/variables.css';
+@import '../../app/variables.css';
 
 :root {
   --detail-label-font-weight: var(--font-weight-very-bold);

src/components/transactions/transactionDetailView.js → src/components/transactions/transactionDetailView/transactionDetailView.js

@@ -1,21 +1,18 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { translate } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
-import { loadTransaction } from '../../actions/transactions';
-import { TimeFromTimestamp, DateFromTimestamp } from './../timestamp/index';
-import CopyToClipboard from '../copyToClipboard';
-import AccountVisual from '../accountVisual';
+import CopyToClipboard from '../../copyToClipboard';
+import AccountVisual from '../../accountVisual';
 import styles from './transactionDetailView.css';
-import { FontIcon } from '../fontIcon';
-import TransactionType from './transactionType';
-import LiskAmount from '../liskAmount';
-import Amount from './amount';
-import routes from './../../constants/routes';
-import transactions from './../../constants/transactionTypes';
+import { FontIcon } from '../../fontIcon';
+import TransactionType from '../transactionType';
+import LiskAmount from '../../liskAmount';
+import Amount from '../amount';
+import routes from './../../../constants/routes';
+import transactions from './../../../constants/transactionTypes';
 import TransactionDetailViewField from './transactionDetailViewField';
 import TransactionDetailViewRow from './transactionDetailViewRow';
+import DateField from './transactionDetailDateField';
 
 class TransactionDetailView extends React.Component {
   constructor(props) {
@@ -67,33 +64,32 @@ class TransactionDetailView extends React.Component {
       )) : '';
   }
 
-  getDateField() {
-    return (
-      <TransactionDetailViewField className={'tx-date'}
-        label={this.props.t('Date')}
-        value={ this.props.transaction.timestamp ?
-          <span>
-            <DateFromTimestamp
-              time={this.props.transaction.timestamp} /> - <TimeFromTimestamp
-              time={this.props.transaction.timestamp}/>
-          </span> :
-          <span>{this.props.t('Pending')}</span>
-        } />
-    );
+  isPendingTransaction() {
+    const transactionId = this.getTransactionIdFromURL();
+    return this.props.pendingTransactions &&
+    this.props.pendingTransactions.find(tx => tx.id === transactionId);
   }
 
-  getFirstRow() {
-    const transactionId = this.getTransactionIdFromURL();
-    const isPendingTransaction = this.props.pendingTransactions &&
-      this.props.pendingTransactions.find(tx => tx.id === transactionId);
-    const isTransactionEmpty = (typeof this.props.transaction === 'object' &&
+  isTransactionEmpty() {
+    return (typeof this.props.transaction === 'object' &&
     Object.keys(this.props.transaction).length !== 0);
+  }
 
-    const transaction = isTransactionEmpty || (isTransactionEmpty && isPendingTransaction) ?
+  getTransaction() {
+    const isPendingTransaction = this.isPendingTransaction();
+    const isTransactionEmpty = this.isTransactionEmpty();
+    return isTransactionEmpty || (isTransactionEmpty && isPendingTransaction) ?
       this.props.transaction : (isPendingTransaction || {});
+  }
 
-    const isSendTransaction = this.props.transaction.type === transactions.send
+  isSendTransaction() {
+    return this.props.transaction.type === transactions.send
       || (this.props.pendingTransactions && this.props.pendingTransactions.length > 0);
+  }
+
+  getFirstRow() {
+    const transaction = this.getTransaction();
+    const isSendTransaction = this.isSendTransaction();
 
     return (
       <TransactionDetailViewRow>
@@ -112,7 +108,7 @@ class TransactionDetailView extends React.Component {
             </figure> : null}
         </TransactionDetailViewField>
 
-        {!isSendTransaction ? this.getDateField() :
+        {!isSendTransaction ? <DateField transaction={transaction} t={this.props.t} /> :
           <TransactionDetailViewField
             shouldShow={transaction.recipientId}
             label={this.props.t('Recipient')}
@@ -136,12 +132,7 @@ class TransactionDetailView extends React.Component {
   }
 
   render() {
-    const transactionId = this.getTransactionIdFromURL();
-    const isPendingTransaction = this.props.pendingTransactions &&
-      this.props.pendingTransactions.find(tx => tx.id === transactionId);
-    const isTransactionEmpty = (typeof this.props.transaction === 'object' && Object.keys(this.props.transaction).length !== 0);
-    const transaction = isTransactionEmpty || (isTransactionEmpty && isPendingTransaction) ?
-      this.props.transaction : (isPendingTransaction || {});
+    const transaction = this.getTransaction();
 
     return (
       <div className={`${styles.details}`}>
@@ -174,7 +165,7 @@ class TransactionDetailView extends React.Component {
           {this.getFirstRow()}
 
           <TransactionDetailViewRow shouldShow={transaction.type === 0}>
-            {this.getDateField()}
+            <DateField transaction={transaction} t={this.props.t} />
             <TransactionDetailViewField className={'tx-amount'}
               label={this.props.t('Amount (LSK)')}
               value={
@@ -229,13 +220,4 @@ class TransactionDetailView extends React.Component {
   }
 }
 
-const mapStateToProps = state => ({
-  peers: state.peers,
-});
-
-const mapDispatchToProps = dispatch => ({
-  loadTransaction: data => dispatch(loadTransaction(data)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(translate()(TransactionDetailView));
-
+export default TransactionDetailView;

src/components/transactions/transactionDetailView.test.js → src/components/transactions/transactionDetailView/transactionDetailView.test.js

@@ -2,9 +2,9 @@ import React from 'react';
 import thunk from 'redux-thunk';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { mountWithContext } from '../../../test/utils/mountHelpers';
-import TransactionDetailView from './transactionDetailView';
-import txTypes from '../../constants/transactionTypes';
+import { mountWithContext } from '../../../../test/utils/mountHelpers';
+import TransactionDetailView from './index';
+import txTypes from '../../../constants/transactionTypes';
 
 describe('TransactionDetailView', () => {
   it('should render 5 rows', () => {