Add toggle to display recurring transactions in list

static/src/components/TransactionsList/index.js

@@ -52,7 +52,8 @@ export default class TransactionsList extends React.Component {
     showCheckboxes: false,
     height: '400px',
     snackOpen: false,
-    snackMessage: ''
+    snackMessage: '',
+    showRecurring: false
   }
 
   fetchData(account_id = null) {
@@ -148,6 +149,12 @@ export default class TransactionsList extends React.Component {
     })
   }
 
+  toggleRecurring(event, isChecked) {
+    this.setState({
+      showRecurring: isChecked
+    })
+  }
+
   renderTransactionsList(transactions) {
     transactions.sort((a, b) => {
       if (new Date(a.date) < new Date(b.date)) return -1
@@ -156,21 +163,45 @@ export default class TransactionsList extends React.Component {
       if (a.id > b.id) return 1
       return 0
     })
-    // filter future recurring transactions
-    transactions = transactions.filter(element => {
-      return (
-        element.recurring_group_id === null ||
-        (element.recurring_group_id !== null &&
-          new Date(element.date) <= new Date())
-      )
-    })
+    // get projected balance date for current account
+    let projectedDate = this.props.accounts.filter(
+      element => element.id == this.props.selectedAccount
+    )[0].projected_date
+
+    if (this.state.showRecurring) {
+      // display recurring transactions of the month
+      transactions = transactions.filter(element => {
+        return (
+          element.recurring_group_id === null ||
+          (element.recurring_group_id !== null &&
+            new Date(element.date) <= new Date()) ||
+          (element.recurring_group_id !== null &&
+            new Date(element.date) <= new Date(projectedDate))
+        )
+      })
+    } else {
+      // filter all future recurring transactions
+      transactions = transactions.filter(element => {
+        return (
+          element.recurring_group_id === null ||
+          (element.recurring_group_id !== null &&
+            new Date(element.date) <= new Date())
+        )
+      })
+    }
     const rows = transactions.map((row, index) => {
       let credit =
         parseFloat(row.amount) < 0 ? '' : Number(row.amount).toFixed(2)
       let debit =
         parseFloat(row.amount) < 0 ? Number(row.amount).toFixed(2) : ''
+      let isFutureAndRecurring =
+        new Date(row.date) > new Date() && row.recurring_group_id !== null
+        console.log(new Date(row.date), row.recurring_group_id, isFutureAndRecurring)
       return (
-        <TableRow key={row.transaction_id}>
+        <TableRow
+          key={row.transaction_id}
+          className={isFutureAndRecurring ? styles.tableRowFuture : ''}
+        >
           <TableRowColumn className={styles.tickColumn}>
             <Checkbox
               defaultChecked={Boolean(row.tick)}
@@ -235,7 +266,7 @@ export default class TransactionsList extends React.Component {
                   adjustForCheckbox={this.state.showCheckboxes}
                   enableSelectAll={this.state.enableSelectAll}
                 >
-                  <TableRow className={styles.tableRow}>
+                  <TableRow>
                     <TableHeaderColumn className={styles.tickColumn}>
                       <FormattedMessage id="transactionsList.table.tick" />
                     </TableHeaderColumn>
@@ -265,12 +296,18 @@ export default class TransactionsList extends React.Component {
                 </TableBody>
                 <TableFooter adjustForCheckbox={this.state.showCheckboxes}>
                   <TableRow>
-                    <TableRowColumn colSpan="5">
+                    <TableRowColumn colSpan="4">
                       <AddTransaction
                         selectedAccount={this.props.selectedAccount}
                         createTransaction={this.createTransaction.bind(this)}
                       />
                     </TableRowColumn>
+                    <TableRowColumn colSpan="1">
+                      <Toggle
+                        label="Display recurring"
+                        onToggle={this.toggleRecurring.bind(this)}
+                      />
+                    </TableRowColumn>
                   </TableRow>
                 </TableFooter>
               </Table>

static/src/components/TransactionsList/styles.scss

@@ -22,5 +22,6 @@
   overflow-x: auto;
 }
 
-:local(.tableRow) {
+:local(.tableRowFuture) {
+  color: darkgrey!important;
 }

static/src/components/WelcomeTiles/index.js

@@ -20,10 +20,6 @@ function mapStateToProps(state) {
   }
 }
 
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(actionCreators, dispatch)
-}
-
 function mapDispatchToProps(dispatch) {
   return {
     actions: {

static/src/containers/AccountsContainer/index.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import * as actionCreators from '../../actions/balances'
+import * as accountsActions from '../../actions/accounts'
+import * as balancesActions from '../../actions/balances'
 
 import AccountsSideList from '../../components/AccountsSideList'
 import TransactionsList from '../../components/TransactionsList'
@@ -10,15 +11,21 @@ import styles from './styles.scss'
 
 function mapStateToProps(state) {
   return {
-    data: state.balances.data,
+    balancesData: state.balances.data,
+    accountsData: state.accounts.data,
     token: state.auth.token,
     loaded: state.balances.loaded,
     isFetching: state.balances.isFetching
   }
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators(actionCreators, dispatch)
+  return {
+    actions: {
+      accounts: bindActionCreators(accountsActions, dispatch),
+      balances: bindActionCreators(balancesActions, dispatch)
+    }
+  }
 }
 
 @connect(mapStateToProps, mapDispatchToProps)
@@ -34,18 +41,21 @@ export default class AccountsContainer extends React.Component {
 
   fetchData() {
     const token = this.props.token
-    this.props.fetchBalancesData(token)
+    this.props.actions.balances.fetchBalancesData(token)
   }
 
   render() {
     return (
       <section>
         <div className={styles.inRow}>
           <AccountsSideList
-            balances={this.props.data}
+            balances={this.props.balancesData}
+            updateBalance={this.fetchData.bind(this)}
+          />
+          <TransactionsList
+            accounts={this.props.accountsData}
             updateBalance={this.fetchData.bind(this)}
           />
-          <TransactionsList updateBalance={this.fetchData.bind(this)} />
         </div>
       </section>
     )
@@ -55,6 +65,7 @@ export default class AccountsContainer extends React.Component {
 AccountsContainer.propTypes = {
   fetchBalancesData: React.PropTypes.func,
   loaded: React.PropTypes.bool,
-  data: React.PropTypes.any,
+  balancesData: React.PropTypes.any,
+  accountsData: React.PropTypes.any,
   token: React.PropTypes.string
 }