dismiss button added to reward summary, and some style tweaks.
This commit is contained in:
parent
d921347d73
commit
975c59a114
6 changed files with 58 additions and 18 deletions
|
@ -1,4 +1,5 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
import { doNotify } from 'lbry-redux';
|
||||||
import { doRewardList, selectUnclaimedRewardValue, selectFetchingRewards, selectUser } from 'lbryinc';
|
import { doRewardList, selectUnclaimedRewardValue, selectFetchingRewards, selectUser } from 'lbryinc';
|
||||||
import RewardSummary from './view';
|
import RewardSummary from './view';
|
||||||
|
|
||||||
|
@ -10,6 +11,7 @@ const select = state => ({
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
fetchRewards: () => dispatch(doRewardList()),
|
fetchRewards: () => dispatch(doRewardList()),
|
||||||
|
notify: data => dispatch(doNotify(data))
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(select, perform)(RewardSummary);
|
export default connect(select, perform)(RewardSummary);
|
||||||
|
|
|
@ -1,15 +1,24 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { NativeModules, Text, TouchableOpacity } from 'react-native';
|
import { AsyncStorage, NativeModules, Text, TouchableOpacity } from 'react-native';
|
||||||
|
import Button from '../../component/button';
|
||||||
import rewardStyle from '../../styles/reward';
|
import rewardStyle from '../../styles/reward';
|
||||||
|
|
||||||
class RewardSummary extends React.Component {
|
class RewardSummary extends React.Component {
|
||||||
|
static itemKey = 'rewardSummaryDismissed';
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
actionsLeft: 0
|
actionsLeft: 0,
|
||||||
|
dismissed: false
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.props.fetchRewards();
|
this.props.fetchRewards();
|
||||||
|
|
||||||
|
AsyncStorage.getItem(RewardSummary.itemKey).then(isDismissed => {
|
||||||
|
if ('true' === isDismissed) {
|
||||||
|
this.setState({ dismissed: true });
|
||||||
|
}
|
||||||
|
|
||||||
const { user } = this.props;
|
const { user } = this.props;
|
||||||
let actionsLeft = 0;
|
let actionsLeft = 0;
|
||||||
if (!user || !user.has_verified_email) {
|
if (!user || !user.has_verified_email) {
|
||||||
|
@ -21,12 +30,25 @@ class RewardSummary extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({ actionsLeft });
|
this.setState({ actionsLeft });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onDismissPressed = () => {
|
||||||
|
AsyncStorage.setItem(RewardSummary.itemKey, 'true');
|
||||||
|
this.setState({ dismissed: true });
|
||||||
|
this.props.notify({
|
||||||
|
message: 'You can always claim your rewards from the Rewards page.',
|
||||||
|
displayType: ['toast']
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
|
const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
|
||||||
|
|
||||||
if ((user && user.is_reward_approved) || this.state.actionsLeft === 0 || unclaimedRewardAmount === 0) {
|
if (this.state.dismissed ||
|
||||||
|
(user && user.is_reward_approved) ||
|
||||||
|
this.state.actionsLeft === 0 ||
|
||||||
|
unclaimedRewardAmount === 0) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,6 +59,7 @@ class RewardSummary extends React.Component {
|
||||||
<Text style={rewardStyle.summaryText}>
|
<Text style={rewardStyle.summaryText}>
|
||||||
You have {unclaimedRewardAmount} LBC in unclaimed rewards. You have {this.state.actionsLeft} action{this.state.actionsLeft === 1 ? '' : 's'} left to claim your first reward. Tap here to continue.
|
You have {unclaimedRewardAmount} LBC in unclaimed rewards. You have {this.state.actionsLeft} action{this.state.actionsLeft === 1 ? '' : 's'} left to claim your first reward. Tap here to continue.
|
||||||
</Text>
|
</Text>
|
||||||
|
<Button style={rewardStyle.dismissButton} theme={"light"} text={"Dismiss"} onPress={this.onDismissPressed} />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,7 +53,9 @@ const discoverStyle = StyleSheet.create({
|
||||||
},
|
},
|
||||||
fileItemMedia: {
|
fileItemMedia: {
|
||||||
width: mediaWidth,
|
width: mediaWidth,
|
||||||
height: mediaHeight
|
height: mediaHeight,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center'
|
||||||
},
|
},
|
||||||
fileItemName: {
|
fileItemName: {
|
||||||
fontFamily: 'Metropolis-Bold',
|
fontFamily: 'Metropolis-Bold',
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { StyleSheet, Dimensions } from 'react-native';
|
import { StyleSheet } from 'react-native';
|
||||||
|
import Colors from './colors';
|
||||||
|
|
||||||
const fileItemMediaStyle = StyleSheet.create({
|
const fileItemMediaStyle = StyleSheet.create({
|
||||||
autothumb: {
|
autothumb: {
|
||||||
|
@ -11,7 +12,7 @@ const fileItemMediaStyle = StyleSheet.create({
|
||||||
autothumbText: {
|
autothumbText: {
|
||||||
fontFamily: 'Metropolis-SemiBold',
|
fontFamily: 'Metropolis-SemiBold',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
color: '#ffffff',
|
color: Colors.White,
|
||||||
fontSize: 40
|
fontSize: 40
|
||||||
},
|
},
|
||||||
autothumbPurple: {
|
autothumbPurple: {
|
||||||
|
|
|
@ -24,7 +24,8 @@ const fileListStyle = StyleSheet.create({
|
||||||
width: thumbnailWidth,
|
width: thumbnailWidth,
|
||||||
height: thumbnailHeight,
|
height: thumbnailHeight,
|
||||||
marginRight: (screenWidthPixels <= 720) ? 10 : 12,
|
marginRight: (screenWidthPixels <= 720) ? 10 : 12,
|
||||||
justifyContent: 'center'
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
fontFamily: 'Metropolis-SemiBold',
|
fontFamily: 'Metropolis-SemiBold',
|
||||||
|
|
|
@ -155,13 +155,17 @@ const rewardStyle = StyleSheet.create({
|
||||||
},
|
},
|
||||||
summaryContainer: {
|
summaryContainer: {
|
||||||
backgroundColor: Colors.LbryGreen,
|
backgroundColor: Colors.LbryGreen,
|
||||||
padding: 12
|
padding: 12,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center'
|
||||||
},
|
},
|
||||||
summaryText: {
|
summaryText: {
|
||||||
color: Colors.White,
|
color: Colors.White,
|
||||||
fontFamily: 'Metropolis-Regular',
|
fontFamily: 'Metropolis-Regular',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
lineHeight: 22
|
lineHeight: 20,
|
||||||
|
flex: 0.7
|
||||||
},
|
},
|
||||||
phoneVerificationContainer: {
|
phoneVerificationContainer: {
|
||||||
paddingLeft: 4,
|
paddingLeft: 4,
|
||||||
|
@ -191,6 +195,13 @@ const rewardStyle = StyleSheet.create({
|
||||||
},
|
},
|
||||||
smsPermissionContainer: {
|
smsPermissionContainer: {
|
||||||
marginBottom: 32
|
marginBottom: 32
|
||||||
|
},
|
||||||
|
dismissButton: {
|
||||||
|
alignSelf: 'center',
|
||||||
|
backgroundColor: Colors.White,
|
||||||
|
paddingLeft: 4,
|
||||||
|
paddingRight: 4,
|
||||||
|
flex: 0.2
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue