move reward fetching from rewards page to reward summary component on wallet overview page

This commit is contained in:
Travis Eden 2018-07-17 19:26:03 -04:00
parent cbcdfb187a
commit 0d642b2be1
3 changed files with 60 additions and 44 deletions

View file

@ -1,10 +1,18 @@
import React from 'react';
import { connect } from 'react-redux'; 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'; import RewardSummary from './view';
const select = state => ({ const select = state => ({
unclaimedRewardAmount: selectUnclaimedRewardValue(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);

View file

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

View file

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