Merge pull request #1781 from lbryio/next-rewards

Rewards enhancements

src/renderer/component/rewardSummary/index.js

@@ -1,10 +1,18 @@
-import React from 'react';
 import { connect } from 'react-redux';
-import { selectUnclaimedRewardValue } from 'redux/selectors/rewards';
+import { selectUnclaimedRewardValue, selectFetchingRewards } from 'redux/selectors/rewards';
+import { doRewardList } from 'redux/actions/rewards';
 import RewardSummary from './view';
 
 const select = state => ({
   unclaimedRewardAmount: selectUnclaimedRewardValue(state),
+  fetching: selectFetchingRewards(state),
 });
 
-export default connect(select, null)(RewardSummary);
+const perform = dispatch => ({
+  fetchRewards: () => dispatch(doRewardList()),
+});
+
+export default connect(
+  select,
+  perform
+)(RewardSummary);

src/renderer/component/rewardSummary/view.jsx

@@ -2,47 +2,60 @@
 import * as React from 'react';
 import Button from 'component/button';
 import CreditAmount from 'component/common/credit-amount';
+import BusyIndicator from 'component/common/busy-indicator';
 
 type Props = {
   unclaimedRewardAmount: number,
+  fetching: boolean,
+  fetchRewards: () => void,
 };
 
-const RewardSummary = (props: Props) => {
-  const { unclaimedRewardAmount } = props;
-  const hasRewards = unclaimedRewardAmount > 0;
+class RewardSummary extends React.Component<Props> {
+  componentDidMount() {
+    this.props.fetchRewards();
+  }
 
-  return (
-    <section className="card card--section">
-      <div className="card__title">{__('Rewards')}</div>
-      <p className="card__subtitle">
-        {hasRewards ? (
-          <React.Fragment>
-            {__('You have')}
-            &nbsp;
-            <CreditAmount noStyle amount={unclaimedRewardAmount} precision={8} />
-            &nbsp;
-            {__('in unclaimed rewards')}.
-          </React.Fragment>
-        ) : (
-          <React.Fragment>
-            {__('There are no rewards available at this time, please check back later')}.
-          </React.Fragment>
-        )}
-      </p>
-      <div className="card__actions">
-        <Button
-          button="primary"
-          navigate="/rewards"
-          label={hasRewards ? __('Claim Rewards') : __('View Rewards')}
-        />
-      </div>
-      <p className="help help--padded">
-        {__('Read our')}{' '}
-        <Button button="link" label={__('FAQ')} href="https://lbry.io/faq/rewards" />{' '}
-        {__('to learn more about LBRY Rewards')}.
-      </p>
-    </section>
-  );
-};
+  render() {
+    const { unclaimedRewardAmount, fetching } = this.props;
+    const hasRewards = unclaimedRewardAmount > 0;
+
+    return (
+      <section className="card card--section">
+        <div className="card__title">
+          {__('Rewards')}
+          {fetching && <BusyIndicator />}
+        </div>
+        <p className="card__subtitle">
+          {!fetching &&
+            (hasRewards ? (
+              <React.Fragment>
+                {__('You have')}
+                &nbsp;
+                <CreditAmount noStyle amount={unclaimedRewardAmount} precision={8} />
+                &nbsp;
+                {__('in unclaimed rewards')}.
+              </React.Fragment>
+            ) : (
+              <React.Fragment>
+                {__('There are no rewards available at this time, please check back later')}.
+              </React.Fragment>
+            ))}
+        </p>
+        <div className="card__actions">
+          <Button
+            button="primary"
+            navigate="/rewards"
+            label={hasRewards ? __('Claim Rewards') : __('View Rewards')}
+          />
+        </div>
+        <p className="help help--padded">
+          {__('Read our')}{' '}
+          <Button button="link" label={__('FAQ')} href="https://lbry.io/faq/rewards" />{' '}
+          {__('to learn more about LBRY Rewards')}.
+        </p>
+      </section>
+    );
+  }
+}
 
 export default RewardSummary;

src/renderer/page/rewards/view.jsx

@@ -10,7 +10,6 @@ import type { Reward } from 'types/reward';
 
 type Props = {
   doAuth: () => void,
-  fetchRewards: () => void,
   navigate: string => void,
   fetching: boolean,
   rewards: Array<Reward>,
@@ -27,10 +26,6 @@ type Props = {
 };
 
 class RewardsPage extends React.PureComponent<Props> {
-  componentDidMount() {
-    this.props.fetchRewards();
-  }
-
   renderPageHeader() {
     const { doAuth, navigate, user, daemonSettings } = this.props;
 

src/renderer/redux/actions/rewards.js

@@ -55,6 +55,7 @@ export function doClaimRewardType(rewardType, options) {
     });
 
     const success = successReward => {
+      dispatch(doRewardList());
       dispatch({
         type: ACTIONS.CLAIM_REWARD_SUCCESS,
         data: {