lbry-desktop/ui/js/page/rewards/view.jsx

109 lines
2.8 KiB
React
Raw Normal View History

2017-06-08 02:56:52 +02:00
import React from "react";
import lbryio from "lbryio";
import { BusyMessage, CreditAmount, Icon } from "component/common";
import SubHeader from "component/subHeader";
import Auth from "component/auth";
import Link from "component/link";
import RewardLink from "component/rewardLink";
2017-05-26 10:53:32 +02:00
2017-06-08 02:56:52 +02:00
const RewardTile = props => {
const { reward } = props;
2017-05-26 10:53:32 +02:00
2017-06-08 02:56:52 +02:00
const claimed = !!reward.transaction_id;
2017-05-26 10:53:32 +02:00
return (
<section className="card">
<div className="card__inner">
<div className="card__title-primary">
<CreditAmount amount={reward.reward_amount} />
<h3>{reward.reward_title}</h3>
2017-05-26 10:53:32 +02:00
</div>
<div className="card__actions">
{claimed
2017-06-19 14:58:39 +02:00
? <span><Icon icon="icon-check" /> {__("Reward claimed.")}</span>
2017-06-08 02:56:52 +02:00
: <RewardLink reward_type={reward.reward_type} />}
2017-05-26 10:53:32 +02:00
</div>
<div className="card__content">{reward.reward_description}</div>
</div>
</section>
2017-06-08 02:56:52 +02:00
);
};
2017-05-26 10:53:32 +02:00
2017-06-23 07:29:40 +02:00
class RewardsPage extends React.PureComponent {
componentDidMount() {
this.fetchRewards(this.props);
}
2017-06-08 02:56:52 +02:00
2017-06-23 07:29:40 +02:00
componentWillReceiveProps(nextProps) {
this.fetchRewards(nextProps);
}
2017-05-26 10:53:32 +02:00
2017-06-23 07:29:40 +02:00
fetchRewards(props) {
const { fetching, rewards, fetchRewards } = props;
if (!fetching && Object.keys(rewards).length < 1) fetchRewards();
2017-05-26 10:53:32 +02:00
}
2017-06-23 07:29:40 +02:00
render() {
const {
fetching,
isEligible,
isVerificationCandidate,
hasEmail,
rewards,
} = this.props;
let content,
isCard = false;
if (!hasEmail || isVerificationCandidate) {
content = (
<div>
<p>
{__(
"Additional information is required to be eligible for the rewards program."
)}
</p>
<Auth />
</div>
);
isCard = true;
} else if (!isEligible) {
isCard = true;
content = (
<div className="empty">
<p>{__("You are not eligible to claim rewards.")}</p>
<p>
{__("To become eligible, email")}
{" "}<Link href="mailto:help@lbry.io" label="help@lbry.io" />{" "}
{__("with a link to a public social media profile.")}
</p>
</div>
);
} else if (fetching) {
content = <BusyMessage message={__("Fetching rewards")} />;
} else if (rewards.length > 0) {
content = rewards.map(reward =>
<RewardTile key={reward.reward_type} reward={reward} />
);
} else {
content = <div className="empty">{__("Failed to load rewards.")}</div>;
}
return (
<main className="main--single-column">
<SubHeader />
{isCard
? <section className="card">
<div className="card__content">
{content}
</div>
</section>
: content}
</main>
);
}
}
2017-05-26 10:53:32 +02:00
export default RewardsPage;