<commit_before>'use strict'

var React = require('react')

var Button = React.createClass({
  render: function () {
    var type = this.props.type
    return (
      <button id={type + '_btn'} className='btn-primary w-3'>
        {'+ ' + type}
      </button>
    )
  }
})

var TableRow = React.createClass({
  render: function () {
    var payment = this.props.payment
    return (
      <div className='row payment-row'>
        <div className='col-1'>
          <p id='member-payment-date'>
            { require('../../utils/format_date')(this.props.date) }
          </p>
        </div>
        <div className='col-2'>
          <p id='member-payment-description'>{this.props.description}</p>
        </div>
        <div className='col-3'>
          <p id='member-payment-charges'>{ this.props.charge }</p>
        </div>
        <div className='col-3'>
          <p id='member-payment-payments'>{ this.props.payment }</p>
        </div>
        <div className='col-4'>
          <p id='member-payment-balance-due'>{ this.props.balance }</p>
        </div>
        <div className='col-5'>
          <p id='member-payment-reference'>{ this.props.reference }</p>
        </div>
        <div className='col-6'>
          <p id='member-payment-note'>{ this.props.notes }</p>
        </div>
        <div className='col-7'>
          <p id='member-payment-delete'>x</p>
        </div>
      </div>
    )}
})

var PaymentsTable = React.createClass({
  getInitialState: function () { return { balance: 0 } },
  render: function () {
    var table_rows = this.props.payments.reduce(make_rows.bind(this), [0]).slice(1)
    return (
      <div id='table-payments'>
        <div className='table-section-individual'>
          <div className='table-section-individual-header'>
            <div className='col-1'>
              <h3>Date</h3>
            </div>
            <div className='col-2'>
              <h3>Description</h3>
            </div>
            <div className='col-3'>
              <h3>Charges</h3>
            </div>
            <div className='col-3'>
              <h3>Payments</h3>
            </div>
            <div className='col-4'>
              <h3>Balance Due</h3>
            </div>
            <div className='col-5'>
              <h3>Reference</h3>
            </div>
            <div className='col-6'>
              <h3>Notes</h3>
            </div>
            <div className='col-7'>
              <h3 id='member-delete-payment'>Del.</h3>
            </div>
          </div>
          <div className='table-section-individual-rows'>
            { table_rows }
          </div>
        </div>
      </div>
    )}
})

var MemberPayments = React.createClass({
  render: function () {
    var buttons = ['subscription', 'donation', 'payment'].map(function (type) {
      return <Button type={type} />
    })
    return (
      <div>
        <div className='section-label'>
          <h1>Payment info</h1>
        </div>
        <div className='inner-section-divider-medium'></div>
        <div className='flex'>
          { buttons }
        </div>
        <div className='inner-section-divider-medium'></div>
        <PaymentsTable payments={this.props.payments} />
      </div>
    )
  }
})

function make_rows (rows, payment, i) {
  var new_balance = update_balance(rows[0], payment)
  return [new_balance].concat([rows.slice(1)])
      .concat([<TableRow description={ payment.description }
      date={ payment.date } reference={ payment.reference } notes={ payment.notes }
      charge={ payment.category === 'payment' ? payment.amount : '' }
      payment={ payment.category === 'payment' ? '' : payment.amount }
      balance={ new_balance } key={i} />])}

function update_balance (balance, payment) {
  return balance + (payment.category === 'payment' ? - +payment.amount : +payment.amount) }

module.exports = MemberPayments<commit_msg>abstracts table component from payments<commit_after>'use strict'

var React = require('react')

var Button = React.createClass({
  render: function () {
    var type = this.props.type
    return (
      <button id={type + '_btn'} className='btn-primary w-3'>
        {'+ ' + type}
      </button>
    )
  }
})

var Table = React.createClass({
  render: function () {
    var headers = this.props.data[0]
    var rows = this.props.data[1]
    return (
      <div className='table'>
        <TableRow header_row={true} entries={ headers } headers={ headers }/>
        { rows.map(function (row) { return <TableRow entries={ row } headers={ headers } header_row={false}/> }) }
      </div> )}})

var TableRow = React.createClass({
  render: function () {
    var entries = this.props.entries
    var headers = this.props.headers
    var class_name = 'table-row' + (this.props.header_row ? ' table-header' : '')
    return (
      <div className={class_name} >
        { entries.map(function (entry, i) { return <TableEntry header={ headers[i] } entry={ entry } /> }) }
      </div> )}})

var TableEntry = React.createClass({
  render: function () {
    return (
      <div className='table-entry'>
        <p className={ this.props.header } > { this.props.entry } </p>
      </div> )}})

var PaymentsTable = React.createClass({
  render: function () {
    var headers = ['Date', 'Description', 'Charges', 'Payments', 'Balance Due', 'Reference', 'Notes', 'Delete']

    var entries = this.props.payments.reduce(make_payments_with_balance, [0]).slice(1)
      .map(function (payment, i) { return headers.map(get_entry_for_payment(payment)) })

    return ( <Table data={ [headers, entries] } /> )}
})

var MemberPayments = React.createClass({
  render: function () {
    var buttons = ['subscription', 'donation', 'payment'].map(function (type) {
      return <Button type={type} />
    })
    return (
      <div>
        <div className='section-label'>
          <h1>Payment info</h1>
        </div>
        <div className='inner-section-divider-medium'></div>
        <div className='flex'>
          { buttons }
        </div>
        <div className='inner-section-divider-medium'></div>
        <PaymentsTable payments={this.props.payments} />
      </div>
    )
  }
})

function make_payments_with_balance (rows, payment) {
  var new_balance = update_balance(rows[0], payment)
  var decorated_payment = Object.create(payment)
  decorated_payment['balance due'] = new_balance
  return [new_balance].concat(rows.slice(1)).concat([decorated_payment]) }

function update_balance (balance, payment) {
  return balance + (payment.category === 'payment' ? - +payment.amount : +payment.amount) }

var get_entry_for_payment = require('../../utils/curry')(function (payment, header) {
  if (header === 'Charges' || header === 'Payments') {
    return charge_or_payment_amount(payment.category, header, payment.amount) }
  if (header === 'Delete') { return 'x' }
  if (header === 'Date') { return require('../../utils/format_date')(payment['date']) }
  else { return payment[ header.toLowerCase() ] }})

function charge_or_payment_amount(category, charge_or_payment, amount) {
    var options = ['Charges', 'Payments']
    var offset = category === 'payment' ? 0 : 1
    return options.indexOf(charge_or_payment) + offset === 1 ? amount : '' }

module.exports = MemberPayments
{'fraction_non_alphanumeric': 0.16839342450614725, 'fraction_numerical': 0.007183312612239259, 'mean_word_length': 2.48747591522158, 'pattern_counts': {'":': 0, '<': 122, '<?xml version=': 0, '>': 122, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '809202', 'n_tokens_mistral': 2218, 'n_tokens_neox': 2208, 'n_words': 457}