ilp-core
Version:
ILP core module managing ledger abstraction
107 lines (92 loc) • 2.92 kB
JavaScript
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import Helmet from 'react-helmet'
import ReactTooltip from 'react-tooltip'
import { AnimateEnterLeave } from 'napo'
import { load, update } from 'redux/actions/withdrawal'
import List from 'components/List/List'
import classNames from 'classnames/bind'
import styles from './Withdrawals.scss'
const cx = classNames.bind(styles)
(
state => ({
withdrawalState: state.withdrawal,
config: state.auth.config,
loaded: state.invite.loaded
}),
{ load, update })
export default class Withdrawals extends Component {
static propTypes = {
withdrawalState: PropTypes.object,
update: PropTypes.func.isRequired,
load: PropTypes.func.isRequired,
config: PropTypes.object,
loaded: PropTypes.bool
}
state = {}
componentWillMount() {
if(!this.props.loaded) {
this.props.load()
}
}
handleComplete = id => {
this.props.update(id, { status: 'complete' })
}
renderWithdrawal = withdrawal => {
const config = this.props.config
return (
<div className={cx('withdrawal')} key={withdrawal.id}>
<div className={cx('row', 'row-sm')}>
<div className={cx('col-sm-5')}>
{withdrawal.User.username}
</div>
<div className={cx('col-sm-3', 'amountColumn')}>
<span className={cx('amount')}>{withdrawal.amount}</span>
</div>
<div className={cx('col-sm-2')}>
{withdrawal.status}
</div>
<div className={cx('col-sm-2', 'text-right')}>
{withdrawal.status !== 'complete' &&
<button className={cx('btn', 'btn-success')} onClick={this.handleComplete.bind(this, withdrawal.id)}>Complete</button>}
</div>
</div>
<ReactTooltip />
</div>
)
}
render() {
const { withdrawalState } = this.props
return (
<div className={cx('Invites')}>
<Helmet title={'Withdrawals'} />
{withdrawalState.list.length > 0 &&
<div className={cx('row', 'row-sm', 'tableHead')}>
<div className={cx('col-sm-5')}>
User
</div>
<div className={cx('col-sm-3', 'amountColumn')}>
Amount
</div>
<div className={cx('col-sm-2')}>
Status
</div>
</div>}
<List
emptyScreen={(
<div className={cx('panel', 'panel-default', 'status')}>
<div className="panel-body">
<i className={cx('fa', 'fa-ticket')} />
<h1>No Withdrawals</h1>
</div>
</div>
)} state={withdrawalState}>
{withdrawalState.list.length > 0 &&
<AnimateEnterLeave>
{withdrawalState.list.map(this.renderWithdrawal)}
</AnimateEnterLeave>}
</List>
</div>
)
}
}