lbry-desktop/ui/js/component/reward-link.js

import React from 'react';
import lbry from 'lbry';
import { Icon } from 'component/common';
import Modal from 'component/modal';
import rewards from 'rewards';
import Link from 'component/link';

export class RewardLink extends React.Component {
	static propTypes = {
		type: React.PropTypes.string.isRequired,
		claimed: React.PropTypes.bool,
		onRewardClaim: React.PropTypes.func,
		onRewardFailure: React.PropTypes.func
	};

	constructor(props) {
		super(props);

		this.state = {
			claimable: true,
			pending: false,
			errorMessage: null
		};
	}

	refreshClaimable() {
		switch (this.props.type) {
			case 'new_user':
				this.setState({ claimable: true });
				return;

			case 'first_publish':
				lbry.claim_list_mine().then(list => {
					this.setState({
						claimable: list.length > 0
					});
				});
				return;
		}
	}

	componentWillMount() {
		this.refreshClaimable();
	}

	claimReward() {
		this.setState({
			pending: true
		});

		rewards
			.claimReward(this.props.type)
			.then(reward => {
				this.setState({
					pending: false,
					errorMessage: null
				});
				if (this.props.onRewardClaim) {
					this.props.onRewardClaim(reward);
				}
			})
			.catch(error => {
				this.setState({
					errorMessage: error.message,
					pending: false
				});
			});
	}

	clearError() {
		if (this.props.onRewardFailure) {
			this.props.onRewardFailure();
		}
		this.setState({
			errorMessage: null
		});
	}

	render() {
		return (
			<div className="reward-link">
				{this.props.claimed
					? <span><Icon icon="icon-check" /> {__('Reward claimed.')}</span>
					: <Link
							button={this.props.button ? this.props.button : 'alt'}
							disabled={this.state.pending || !this.state.claimable}
							label={
								this.state.pending ? __('Claiming...') : __('Claim Reward')
							}
							onClick={() => {
								this.claimReward();
							}}
						/>}
				{this.state.errorMessage
					? <Modal
							isOpen={true}
							contentLabel={__('Reward Claim Error')}
							className="error-modal"
							onConfirmed={() => {
								this.clearError();
							}}
						>
							{this.state.errorMessage}
						</Modal>
					: ''}
			</div>
		);
	}
}