<commit_before>import React, { Component } from 'react';

import { connect } from 'react-redux';
import values from 'lodash/object/values';

import filterCollection from '../lib/filter_collection';

import Currency from '../components/Currency';
import DisplayUrl from '../components/DisplayUrl';
import Icon from '../components/Icon';
import PublicFooter from '../components/PublicFooter';
import PublicTopBar from '../components/PublicTopBar';
import TransactionItem from '../components/TransactionItem';

import fetchUsers from '../actions/users/fetch_by_group';
import fetchTransactions from '../actions/transactions/fetch_by_group';
import logout from '../actions/session/logout';
import decodeJWT from '../actions/session/decode_jwt';

// Number of expenses and revenue items to show on the transactions page
const NUM_TRANSACTIONS_TO_SHOW = 4;

export class Transactions extends Component {
  render() {
    const {
      group,
      transactions,
      users
    } = this.props;

    return (
     <div className='Transactions'>

        <PublicTopBar session={this.props.session} logout={this.props.logout}/>

        <div className='PublicContent'>
          <div className='Widget-header'>

            <div className='PublicGroupHeader'>
              <img className='PublicGroupHeader-logo' src={group.logo ? group.logo : '/static/images/media-placeholder.svg'} />
              <div className='PublicGroupHeader-website'><DisplayUrl url={group.website} /></div>
              <div className='PublicGroupHeader-description'>
                {group.description}
              </div>
            </div>

            <div className='Widget-balance'>
              <Currency
                value={group.balance}
                currency={group.currency} />
            </div>
            <div className='Widget-label'>Available funds</div>
          </div>

          <div className='PublicGroup-transactions'>
            <h2>Latest transactions</h2>
            {(transactions.length === 0) && (
              <div className='PublicGroup-emptyState'>
                <div className='PublicGroup-expenseIcon'>
                  <Icon type='expense' />
                </div>
                <label>
                  All transactions will show up here
                </label>
              </div>
            )}
            {transactions.map(tx => <TransactionItem
                                       key={tx.id}
                                       transaction={tx}
                                       user={users[tx.UserId]} />)}
          </div>
        </div>
        <PublicFooter />
      </div>
    );
  }

  componentWillMount() {
    const {
      group,
      fetchTransactions,
      fetchUsers
    } = this.props;

    fetchTransactions(group.id, {
      per_page: NUM_TRANSACTIONS_TO_SHOW,
      sort: 'updatedAt',
      direction: 'desc'
    });

    fetchUsers(group.id);
  }

  componentDidMount() {
    // decode here because we don't handle auth on the server side yet
    this.props.decodeJWT();
  }
}

export default connect(mapStateToProps, {
  fetchTransactions,
  fetchUsers,
  logout,
  decodeJWT
})(Transactions);

function mapStateToProps({
  session,
  groups,
  transactions,
  users
}) {
  const group = values(groups)[0] || {}; // to refactor to allow only one group

  return {
    session,
    group,
    transactions: values(transactions),
    users
  };
}<commit_msg>Show all tx in proper order (no pagination)<commit_after>import React, { Component } from 'react';

import { connect } from 'react-redux';
import values from 'lodash/object/values';

import filterCollection from '../lib/filter_collection';

import Currency from '../components/Currency';
import DisplayUrl from '../components/DisplayUrl';
import Icon from '../components/Icon';
import PublicFooter from '../components/PublicFooter';
import PublicTopBar from '../components/PublicTopBar';
import TransactionItem from '../components/TransactionItem';

import fetchUsers from '../actions/users/fetch_by_group';
import fetchTransactions from '../actions/transactions/fetch_by_group';
import logout from '../actions/session/logout';
import decodeJWT from '../actions/session/decode_jwt';

export class Transactions extends Component {
  render() {
    const {
      group,
      transactions,
      users
    } = this.props;

    return (
     <div className='Transactions'>

        <PublicTopBar session={this.props.session} logout={this.props.logout}/>

        <div className='PublicContent'>
          <div className='Widget-header'>

            <div className='PublicGroupHeader'>
              <img className='PublicGroupHeader-logo' src={group.logo ? group.logo : '/static/images/media-placeholder.svg'} />
              <div className='PublicGroupHeader-website'><DisplayUrl url={group.website} /></div>
              <div className='PublicGroupHeader-description'>
                {group.description}
              </div>
            </div>

            <div className='Widget-balance'>
              <Currency
                value={group.balance}
                currency={group.currency} />
            </div>
            <div className='Widget-label'>Available funds</div>
          </div>

          <div className='PublicGroup-transactions'>
            <h2>Latest transactions</h2>
            {(transactions.length === 0) && (
              <div className='PublicGroup-emptyState'>
                <div className='PublicGroup-expenseIcon'>
                  <Icon type='expense' />
                </div>
                <label>
                  All transactions will show up here
                </label>
              </div>
            )}
            {transactions.map(tx => <TransactionItem
                                       key={tx.id}
                                       transaction={tx}
                                       user={users[tx.UserId]} />)}
          </div>
        </div>
        <PublicFooter />
      </div>
    );
  }

  componentWillMount() {
    const {
      group,
      fetchTransactions,
      fetchUsers
    } = this.props;

    fetchTransactions(group.id, {
      sort: 'createdAt',
      direction: 'desc'
    });

    fetchUsers(group.id);
  }

  componentDidMount() {
    // decode here because we don't handle auth on the server side yet
    this.props.decodeJWT();
  }
}

export default connect(mapStateToProps, {
  fetchTransactions,
  fetchUsers,
  logout,
  decodeJWT
})(Transactions);

function mapStateToProps({
  session,
  groups,
  transactions,
  users
}) {
  const group = values(groups)[0] || {}; // to refactor to allow only one group

  return {
    session,
    group,
    transactions: values(transactions).reverse(),
    users
  };
}
{'fraction_non_alphanumeric': 0.12165775401069519, 'fraction_numerical': 0.001336898395721925, 'mean_word_length': 2.1272642823966557, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 71, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4878063', 'n_tokens_mistral': 1799, 'n_tokens_neox': 1739, 'n_words': 406}