LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix rewards page #274

Merged
6ea86b96 merged 2 commits from fix-rewards-page into master 2017-06-23 16:02:34 +02:00
Conversation 0 Commits 2 Files changed 3 +79 -58
2 changed files with 79 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 83f72a83b0 - Show all commits

7
ui/js/page/rewards/index.js
View file

@ -7,6 +7,7 @@ import {
selectUserHasEmail,
selectUserIsVerificationCandidate,
} from "selectors/user";
import { doRewardList } from "actions/rewards";
import RewardsPage from "./view";
const select = state => ({
@ -17,4 +18,8 @@ const select = state => ({
isVerificationCandidate: selectUserIsVerificationCandidate(state),
});
export default connect(select, null)(RewardsPage);
const perform = dispatch => ({
fetchRewards: () => dispatch(doRewardList()),
});
export default connect(select, perform)(RewardsPage);

130
ui/js/page/rewards/view.jsx
View file

@ -29,64 +29,80 @@ const RewardTile = props => {
);
};
const RewardsPage = props => {
const {
fetching,
isEligible,
isVerificationCandidate,
hasEmail,
rewards,
} = 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>;
class RewardsPage extends React.PureComponent {
componentDidMount() {
this.fetchRewards(this.props);
}
return (
<main className="main--single-column">
<SubHeader />
{isCard
? <section className="card">
<div className="card__content">
{content}
</div>
</section>
: content}
</main>
);
};
componentWillReceiveProps(nextProps) {
this.fetchRewards(nextProps);
}
fetchRewards(props) {
const { fetching, rewards, fetchRewards } = props;
if (!fetching && Object.keys(rewards).length < 1) fetchRewards();
}
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>
);
}
}
export default RewardsPage;