77 lines
2.2 KiB
JavaScript
77 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;
|