100 lines
2.2 KiB
JavaScript
100 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import lbryio from 'lbryio';
|
|
import { CreditAmount, Icon } from 'component/common.js';
|
|
import SubHeader from 'component/subHeader';
|
|
import { RewardLink } from 'component/reward-link';
|
|
|
|
export class RewardTile extends React.Component {
|
|
static propTypes = {
|
|
type: React.PropTypes.string.isRequired,
|
|
title: React.PropTypes.string.isRequired,
|
|
description: React.PropTypes.string.isRequired,
|
|
claimed: React.PropTypes.bool.isRequired,
|
|
value: React.PropTypes.number.isRequired,
|
|
onRewardClaim: React.PropTypes.func
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<section className="card">
|
|
<div className="card__inner">
|
|
<div className="card__title-primary">
|
|
<CreditAmount amount={this.props.value} />
|
|
<h3>{this.props.title}</h3>
|
|
</div>
|
|
<div className="card__actions">
|
|
{this.props.claimed
|
|
? <span><Icon icon="icon-check" /> {__('Reward claimed.')}</span>
|
|
: <RewardLink {...this.props} />}
|
|
</div>
|
|
<div className="card__content">{this.props.description}</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class RewardsPage extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
userRewards: null,
|
|
failed: null
|
|
};
|
|
}
|
|
|
|
componentWillMount() {
|
|
this.loadRewards();
|
|
}
|
|
|
|
loadRewards() {
|
|
lbryio.call('reward', 'list', {}).then(
|
|
userRewards => {
|
|
this.setState({
|
|
userRewards: userRewards
|
|
});
|
|
},
|
|
() => {
|
|
this.setState({ failed: true });
|
|
}
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<main className="main--single-column">
|
|
<SubHeader />
|
|
<div>
|
|
{!this.state.userRewards
|
|
? this.state.failed
|
|
? <div className="empty">{__('Failed to load rewards.')}</div>
|
|
: ''
|
|
: this.state.userRewards.map(
|
|
({
|
|
reward_type,
|
|
reward_title,
|
|
reward_description,
|
|
transaction_id,
|
|
reward_amount
|
|
}) => {
|
|
return (
|
|
<RewardTile
|
|
key={reward_type}
|
|
onRewardClaim={this.loadRewards}
|
|
type={reward_type}
|
|
title={__(reward_title)}
|
|
description={__(reward_description)}
|
|
claimed={!!transaction_id}
|
|
value={reward_amount}
|
|
/>
|
|
);
|
|
}
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default RewardsPage;
|