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);

ui/js/page/rewards/view.jsx

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