{"size": 1109, "ext": "js", "max_stars_repo_path": "imports/ui/components/TransactionsList.js", "max_stars_repo_name": "knopsod/x-bid", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "imports/ui/components/TransactionsList.js", "max_issues_repo_name": "knopsod/x-bid", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "imports/ui/components/TransactionsList.js", "max_forks_repo_name": "knopsod/x-bid", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 33.6060606061, "max_line_length": 69, "alphanum_fraction": 0.6943192065}
import React from 'react';
import PropTypes from 'prop-types';
import { browserHistory } from 'react-router';
import { ListGroup, ListGroupItem, Alert } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor';
import Transactions from '../../api/transactions/transactions';
import container from '../../modules/container';

const handleNav = _id => browserHistory.push(`/transactions/${_id}`);

const TransactionsList = ({ transactions }) => (
  transactions.length > 0 ? <ListGroup className="TransactionsList">
    {transactions.map(({ _id, client_transaction_id }) => (
      <ListGroupItem key={_id} onClick={ () => handleNav(_id) }>
        { client_transaction_id }
      </ListGroupItem>
    ))}
  </ListGroup> :
  <Alert bsStyle="warning">No transactions yet.</Alert>
);

TransactionsList.propTypes = {
  transactions: PropTypes.array,
};

export default container((props, onData) => {
  const subscription = Meteor.subscribe('transactions.list');
  if (subscription.ready()) {
    const transactions = Transactions.find().fetch();
    onData(null, { transactions });
  }
}, TransactionsList);
