UNPKG

ilp-core

Version:

ILP core module managing ledger abstraction

107 lines (92 loc) 2.92 kB
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) @connect( 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> ) } }