move reward fetching from rewards page to reward summary component on wallet overview page
This commit is contained in:
parent
cbcdfb187a
commit
0d642b2be1
3 changed files with 60 additions and 44 deletions
|
@ -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);
|
||||||
|
|
|
@ -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">
|
||||||
|
{__('Rewards')}
|
||||||
<CreditAmount noStyle amount={unclaimedRewardAmount} precision={8} />
|
{fetching && <BusyIndicator />}
|
||||||
|
</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>
|
|
||||||
)}
|
<CreditAmount noStyle amount={unclaimedRewardAmount} precision={8} />
|
||||||
</p>
|
|
||||||
<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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue