import React from 'react';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionCreators from '../actions/transactions';
import Transaction from './Transaction';
import Infinite from 'react-infinite';

function mapStateToProps(state) {
    return {
        token: state.auth.token,
        loaded: state.transactions.loaded,
        isFetching: state.transactions.isFetching,
        data: state.transactions.data,
    }
}


function mapDispatchToProps(dispatch) {
    return bindActionCreators(actionCreators, dispatch)
}

@connect(mapStateToProps, mapDispatchToProps)
export default class TransactionView extends React.Component {

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        this.fetchData();
    }


    fetchData() {
        let token = this.props.token;
        this.props.loadTransactions(token);
    }

    render() {
        return (
            <div>

                {!this.props.loaded
                    ? <h1>Loading data...</h1>
                    :
                    <div>
                        <h1>Transactions</h1>
                        <Infinite containerHeight={600} elementHeight={60}>
                            {this.props.data.map((transaction) => {
                            return (
                                <Transaction key={transaction.id}
                                    transaction={transaction}
                                />
                            );
                            })}
                        </Infinite>
                    </div>
                }
            </div>
        );
    }
}





@@ -160,16 +160,63 @@
 tions';%0A
+import TextField from 'material-ui/TextField';%0A
 import T
@@ -766,16 +766,81 @@
 (props)%0A
+        this.state = %7B%0A            filter_comment:'',%0A        %7D;%0A
     %7D%0A%0A 
@@ -1012,19 +1012,480 @@
 %0A   
- render() %7B
+changeValue(e, type) %7B%0A        const value = e.target.value;%0A        const next_state = %7B%7D;%0A        next_state%5Btype%5D = value;%0A        this.setState(next_state)%0A    %7D%0A%0A%0A    render() %7B%0A        var rows = %5B%5D;%0A        this.props.data.forEach((transaction) =%3E %7B%0A            if (transaction.comment.indexOf(this.state.filter_comment) === -1) %7B%0A                return;%0A            %7D%0A            rows.push(%3CTransaction key=%7Btransaction.id%7D transaction=%7Btransaction%7D/%3E)%0A        %7D);
 %0A   
@@ -1723,126 +1723,65 @@
    %3C
-Infinite containerHeight=%7B600%7D elementHeight=%7B60%7D%3E%0A                            %7Bthis.props.data.map((transaction) =%3E %7B
+TextField%0A                            id=%22filter_comment%22
 %0A   
@@ -1801,32 +1801,49 @@
             
-return (
+hintText=%22Filter Comment%22
 %0A           
@@ -1863,173 +1863,228 @@
     
-    %3CTransaction key=%7Btransaction.id%7D%0A                                    transaction=%7Btransaction%7D%0A                                /%3E%0A                            );
+floatingLabelText=%22Filter Comment%22%0A                            onChange=%7B(e) =%3Ethis.changeValue(e, 'filter_comment')%7D%0A                        /%3E%0A                        %3CInfinite containerHeight=%7B600%7D elementHeight=%7B60%7D%3E
 %0A   
@@ -2108,18 +2108,21 @@
         
-%7D)
+%7Brows
 %7D%0A      

add a simple filter