Add transaction filters - Closes #32

i18n/locales/en/common.json

@@ -124,7 +124,6 @@
   "Ok": "Ok",
   "Okay": "Okay",
   "Original Message": "Original Message",
-  "Other": "Other",
   "Out": "Out",
   "Outgoing": "Outgoing",
   "Passphrase is not valid": "Passphrase is not valid",

src/actions/transactions.js

@@ -46,13 +46,23 @@ export const transactionsLoaded = data => ({
   type: actionTypes.transactionsLoaded,
 });
 
+export const transactionsFilterSet = data => ({
+  data,
+  type: actionTypes.transactionsFilterSet,
+});
+
+export const transactionsFiltered = data => ({
+  data,
+  type: actionTypes.transactionsFiltered,
+});
+
 /**
  *
  *
  */
-export const transactionsRequested = ({ activePeer, address, limit, offset }) =>
+export const transactionsRequested = ({ activePeer, address, limit, offset, filter }) =>
   (dispatch) => {
-    transactions(activePeer, address, limit, offset)
+    transactions({ activePeer, address, limit, offset, filter })
       .then((response) => {
         dispatch(transactionsLoaded({
           count: parseInt(response.count, 10),

src/components/dashboard/index.js

@@ -3,39 +3,55 @@ import { Link } from 'react-router-dom';
 import { translate } from 'react-i18next';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import React from 'react';
-
+import { transactionsFilterSet } from '../../actions/transactions';
+import txFilters from './../../constants/transactionFilters';
 import { FontIcon } from '../fontIcon';
 import Box from '../box';
 import TransactionList from './../transactions/transactionList';
 import Send from '../send';
 import styles from './styles.css';
 
-const Dashboard = ({ t, transactions }) => (
-  <div className={`${grid.row} ${styles.wrapper}`} >
-    <div className={`${grid['col-md-8']} ${grid['col-xs-12']}`}>
-      <Box className={`${styles.graph}`}>
-      </Box>
-      <Box className={`${styles.latestActivity}`}>
-        <header>
-          <h2 className={styles.title}>
-            {t('Latest activity')}
-            <Link to='/main/transactions' className={styles.seeAllLink}>
-              {t('See all transactions')}
-              <FontIcon value='arrow-right' />
-            </Link>
-          </h2>
-        </header>
-        <TransactionList {...{ transactions, t }} loadMore={() => {}} />
-      </Box>
-    </div>
-    <div className={`${grid['col-md-4']} ${styles.sendWrapper}`}>
-      <Send />
-    </div>
-  </div>
-);
+class Dashboard extends React.Component {
+  constructor(props) {
+    super(props);
+    if (this.props.transactions.filter !== txFilters.all) {
+      this.props.transactionsFilterSet({ filter: txFilters.all });
+    }
+  }
+
+  render() {
+    const { transactions, t } = this.props;
+    return <div className={`${grid.row} ${styles.wrapper}`}>
+      <div className={`${grid['col-md-8']} ${grid['col-xs-12']}`}>
+        <Box className={`${styles.graph}`}>
+        </Box>
+        <Box className={`${styles.latestActivity}`}>
+          <header>
+            <h2 className={styles.title}>
+              {t('Latest activity')}
+              <Link to='/main/transactions' className={styles.seeAllLink}>
+                {t('See all transactions')}
+                <FontIcon value='arrow-right'/>
+              </Link>
+            </h2>
+          </header>
+          <TransactionList {...{ transactions, t }} loadMore={() => {}}/>
+        </Box>
+      </div>
+      <div className={`${grid['col-md-4']} ${styles.sendWrapper}`}>
+        <Send/>
+      </div>
+    </div>;
+  }
+}
 
 const mapStateToProps = state => ({
   transactions: [...state.transactions.pending, ...state.transactions.confirmed].slice(0, 3),
 });
 
-export default connect(mapStateToProps)(translate()(Dashboard));
+const mapDispatchToProps = dispatch => ({
+  transactionsFilterSet: data => dispatch(transactionsFilterSet(data)),
+});
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(translate()(Dashboard));

src/components/transactions/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { translate } from 'react-i18next';
-import { transactionsRequested } from '../../actions/transactions';
+import { transactionsRequested, transactionsFilterSet } from '../../actions/transactions';
 import Transactions from './transactions';
 
 const mapStateToProps = state => ({
@@ -13,10 +13,14 @@ const mapStateToProps = state => ({
   pendingCount: state.transactions.pending.length,
   confirmed: state.transactions.confirmed,
   pending: state.transactions.pending,
+  activeFilter: state.transactions.filter,
+  loading: state.loading,
 });
 
 const mapDispatchToProps = dispatch => ({
   transactionsRequested: data => dispatch(transactionsRequested(data)),
+  transactionsFilterSet: data => dispatch(transactionsFilterSet(data)),
 });
 
+
 export default connect(mapStateToProps, mapDispatchToProps)(translate()(Transactions));

src/components/transactions/transactionOverview.js

@@ -5,10 +5,11 @@ import TransactionList from './transactionList';
 import LiskAmount from '../liskAmount';
 import Box from '../box';
 import styles from './transactions.css';
+import txFilters from './../../constants/transactionFilters';
 
 class Transactions extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.canLoadMore = true;
   }
 
@@ -18,8 +19,9 @@ class Transactions extends React.Component {
       this.props.transactionsRequested({
         activePeer: this.props.activePeer,
         address: this.props.address,
-        limit: 20,
+        limit: 25,
         offset: this.props.transactions.length,
+        filter: this.props.activeFilter,
       });
     }
   }
@@ -34,7 +36,30 @@ class Transactions extends React.Component {
     this.canLoadMore = count === null || count > transactions.length;
   }
 
+  isActiveFilter(filter) {
+    return (!this.props.activeFilter && filter === txFilters.all) ||
+      (this.props.activeFilter === filter);
+  }
+
   render() {
+    const filters = [
+      {
+        name: this.props.t('All'),
+        value: txFilters.all,
+        className: 'filter-all',
+      },
+      {
+        name: this.isSmallScreen() ? this.props.t('In') : this.props.t('Incoming'),
+        value: txFilters.incoming,
+        className: 'filter-in',
+      },
+      {
+        name: this.isSmallScreen() ? this.props.t('Out') : this.props.t('Outgoing'),
+        value: txFilters.outgoing,
+        className: 'filter-out',
+      },
+    ];
+
     return (
       <Box className={`transactions ${styles.activity}`}>
         <header>
@@ -51,16 +76,19 @@ class Transactions extends React.Component {
         </header>
 
         <ul className={styles.list}>
-          <li className={`${styles.item} ${styles.active}`}>{this.props.t('All')}</li>
-          <li className={styles.item}>{this.isSmallScreen() ? this.props.t('In') : this.props.t('Incoming')}</li>
-          <li className={styles.item}>{this.isSmallScreen() ? this.props.t('Out') : this.props.t('Outgoing')}</li>
-          <li className={styles.item}>{this.props.t('Other')}</li>
+          {filters.map((filter, i) => (
+            <li key={i} className={`transaction-filter-item ${filter.className} ${styles.item} ${this.isActiveFilter(filter.value) ? styles.active : ''}`}
+              onClick={() => { this.props.transactionsFilterSet({ filter: filter.value }); }}>
+              {filter.name}
+            </li>
+          ))}
         </ul>
         <TransactionList
+          address={this.props.address}
           transactions={this.props.transactions}
           loadMore={this.loadMore.bind(this)}
           nextStep={this.props.nextStep}
-          t={this.props.t} />
+          t={this.props.t}/>
         {
           // the whole transactions box should be scrollable on XS
           // otherwise only the transaction list should be scrollable

src/components/transactions/transactionRow.js

@@ -11,7 +11,7 @@ import { FontIcon } from '../fontIcon';
 class TransactionRow extends React.Component {
   // eslint-disable-next-line class-methods-use-this
   shouldComponentUpdate(nextProps) {
-    return nextProps.value.confirmations <= 1000;
+    return nextProps.value.id !== this.props.value.id;
   }
 
   render() {

src/constants/actions.js

@@ -28,7 +28,8 @@ const actionTypes = {
   transactionsFailed: 'TRANSACTIONS_FAILED',
   transactionsUpdated: 'TRANSACTIONS_UPDATED',
   transactionsLoaded: 'TRANSACTIONS_LOADED',
-  transactionsReset: 'TRANSACTIONS_RESET',
+  transactionsFilterSet: 'TRANSACTIONS_FILTER_SET',
+  transactionsFiltered: 'TRANSACTIONS_FILTERED',
   passphraseUsed: 'PASSPHRASE_USED',
   accountsRetrieved: 'ACCOUNTS_RETRIEVED',
   accountSaved: 'ACCOUNT_SAVED',

src/constants/transactionFilters.js

@@ -0,0 +1,5 @@
+export default {
+  all: 0,
+  incoming: 1,
+  outgoing: 2,
+};

src/store/middlewares/account.js

@@ -12,8 +12,8 @@ import transactionTypes from '../../constants/transactionTypes';
 const { lockDuration } = accountConfig;
 
 const updateTransactions = (store, peers, account) => {
-  const maxBlockSize = 25;
-  getTransactions(peers.data, account.address, maxBlockSize)
+  const filter = store.getState().transactions.filter;
+  getTransactions({ activePeer: peers.data, address: account.address, limit: 25, filter })
     .then(response => store.dispatch(transactionsUpdated({
       confirmed: response.transactions,
       count: parseInt(response.count, 10),

src/store/middlewares/transactions.js

@@ -1,8 +1,9 @@
 import i18next from 'i18next';
 
-import { unconfirmedTransactions } from '../../utils/api/account';
+import { unconfirmedTransactions, transactions as getTransactions } from '../../utils/api/account';
 import { successAlertDialogDisplayed } from '../../actions/dialog';
-import { transactionsFailed } from '../../actions/transactions';
+import { transactionsFailed, transactionsFiltered } from '../../actions/transactions';
+
 import actionTypes from '../../constants/actions';
 import transactionTypes from '../../constants/transactionTypes';
 
@@ -29,6 +30,21 @@ const transactionsUpdated = (store) => {
   }
 };
 
+const filterTransactions = (store, action) => {
+  getTransactions({
+    activePeer: store.getState().peers.data,
+    address: store.getState().account.address,
+    limit: 25,
+    filter: action.data.filter })
+    .then((response) => {
+      store.dispatch(transactionsFiltered({
+        confirmed: response.transactions,
+        count: parseInt(response.count, 10),
+        filter: action.data.filter,
+      }));
+    });
+};
+
 const transactionsMiddleware = store => next => (action) => {
   next(action);
   const transactionType = action.data ? action.data.type : null;
@@ -41,6 +57,9 @@ const transactionsMiddleware = store => next => (action) => {
     case actionTypes.transactionsUpdated:
       transactionsUpdated(store, action);
       break;
+    case actionTypes.transactionsFilterSet:
+      filterTransactions(store, action);
+      break;
     default: break;
   }
 };

src/store/reducers/transactions.js

@@ -45,7 +45,17 @@ const transactions = (state = { pending: [], confirmed: [], count: null }, actio
         ],
         count: action.data.count,
       });
-    case actionTypes.accountLoggedOut:
+    case actionTypes.transactionsFiltered:
+      return Object.assign({}, state, {
+        confirmed: action.data.confirmed,
+        count: action.data.count,
+        filter: action.data.filter,
+      });
+    case actionTypes.transactionsFilterSet:
+      return Object.assign({}, state, {
+        filter: action.data.filter,
+      });
+    case (actionTypes.accountLoggedOut):
       return { pending: [], confirmed: [], count: 0 };
     default:
       return state;

src/utils/api/account.js

@@ -1,5 +1,6 @@
 import Lisk from 'lisk-js';
 import { requestToActivePeer } from './peers';
+import txFilters from './../../constants/transactionFilters';
 
 export const getAccount = (activePeer, address) =>
   new Promise((resolve, reject) => {
@@ -26,14 +27,17 @@ export const send = (activePeer, recipientId, amount, secret, secondSecret = nul
   requestToActivePeer(activePeer, 'transactions',
     { recipientId, amount, secret, secondSecret });
 
-export const transactions = (activePeer, address, limit = 20, offset = 0, orderBy = 'timestamp:desc') =>
-  requestToActivePeer(activePeer, 'transactions', {
-    senderId: address,
-    recipientId: address,
+export const transactions = ({ activePeer, address, limit = 20, offset = 0, orderBy = 'timestamp:desc', filter = txFilters.all }) => {
+  let params = {
+    recipientId: (filter === txFilters.incoming || filter === txFilters.all) ? address : undefined,
+    senderId: (filter === txFilters.outgoing || filter === txFilters.all) ? address : undefined,
     limit,
     offset,
     orderBy,
-  });
+  };
+  params = JSON.parse(JSON.stringify(params));
+  return requestToActivePeer(activePeer, 'transactions', params);
+};
 
 export const unconfirmedTransactions = (activePeer, address, limit = 20, offset = 0, orderBy = 'timestamp:desc') =>
   requestToActivePeer(activePeer, 'transactions/unconfirmed', {

src/utils/api/account.test.js

@@ -64,7 +64,7 @@ describe('Utils: Account', () => {
 
   describe('transactions', () => {
     it('should return a promise', () => {
-      const promise = transactions();
+      const promise = transactions({ activePeer: {} });
       expect(typeof promise.then).to.be.equal('function');
     });
   });

test/e2e/transactions.feature

@@ -4,7 +4,7 @@ Feature: Transactions page
     When I click "transactions" menu
     Then I should see 25 rows
     When I scroll to the bottom of "transaction results"
-    Then I should see 45 rows
+    Then I should see 50 rows
 
   Scenario: should provide "Receive LSK" modal if there are "No transactions" 
     Given I'm logged in as "empty account"