diff --git a/ui/js/page/rewards/index.js b/ui/js/page/rewards/index.js index 61d0515e9..8e7abb1fc 100644 --- a/ui/js/page/rewards/index.js +++ b/ui/js/page/rewards/index.js @@ -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); diff --git a/ui/js/page/rewards/view.jsx b/ui/js/page/rewards/view.jsx index b7342210e..3b6964761 100644 --- a/ui/js/page/rewards/view.jsx +++ b/ui/js/page/rewards/view.jsx @@ -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 = ( -
-

- {__( - "Additional information is required to be eligible for the rewards program." - )} -

- -
- ); - isCard = true; - } else if (!isEligible) { - isCard = true; - content = ( -
-

{__("You are not eligible to claim rewards.")}

-

- {__("To become eligible, email")} - {" "}{" "} - {__("with a link to a public social media profile.")} -

-
- ); - } else if (fetching) { - content = ; - } else if (rewards.length > 0) { - content = rewards.map(reward => - - ); - } else { - content =
{__("Failed to load rewards.")}
; +class RewardsPage extends React.PureComponent { + componentDidMount() { + this.fetchRewards(this.props); } - return ( -
- - {isCard - ?
-
- {content} -
-
- : content} -
- ); -}; + 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 = ( +
+

+ {__( + "Additional information is required to be eligible for the rewards program." + )} +

+ +
+ ); + isCard = true; + } else if (!isEligible) { + isCard = true; + content = ( +
+

{__("You are not eligible to claim rewards.")}

+

+ {__("To become eligible, email")} + {" "}{" "} + {__("with a link to a public social media profile.")} +

+
+ ); + } else if (fetching) { + content = ; + } else if (rewards.length > 0) { + content = rewards.map(reward => + + ); + } else { + content =
{__("Failed to load rewards.")}
; + } + + return ( +
+ + {isCard + ?
+
+ {content} +
+
+ : content} +
+ ); + } +} export default RewardsPage;