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 { doNotify } from 'lbry-redux';
|
||||
import { doRewardList, selectUnclaimedRewardValue, selectFetchingRewards, selectUser } from 'lbryinc';
|
||||
import RewardSummary from './view';
|
||||
|
||||
|
@ -10,6 +11,7 @@ const select = state => ({
|
|||
|
||||
const perform = dispatch => ({
|
||||
fetchRewards: () => dispatch(doRewardList()),
|
||||
notify: data => dispatch(doNotify(data))
|
||||
});
|
||||
|
||||
export default connect(select, perform)(RewardSummary);
|
||||
|
|
|
@ -1,15 +1,24 @@
|
|||
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';
|
||||
|
||||
class RewardSummary extends React.Component {
|
||||
static itemKey = 'rewardSummaryDismissed';
|
||||
|
||||
state = {
|
||||
actionsLeft: 0
|
||||
actionsLeft: 0,
|
||||
dismissed: false
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.props.fetchRewards();
|
||||
|
||||
AsyncStorage.getItem(RewardSummary.itemKey).then(isDismissed => {
|
||||
if ('true' === isDismissed) {
|
||||
this.setState({ dismissed: true });
|
||||
}
|
||||
|
||||
const { user } = this.props;
|
||||
let actionsLeft = 0;
|
||||
if (!user || !user.has_verified_email) {
|
||||
|
@ -21,12 +30,25 @@ class RewardSummary extends React.Component {
|
|||
}
|
||||
|
||||
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() {
|
||||
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;
|
||||
}
|
||||
|
||||
|
@ -37,6 +59,7 @@ class RewardSummary extends React.Component {
|
|||
<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.
|
||||
</Text>
|
||||
<Button style={rewardStyle.dismissButton} theme={"light"} text={"Dismiss"} onPress={this.onDismissPressed} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -53,7 +53,9 @@ const discoverStyle = StyleSheet.create({
|
|||
},
|
||||
fileItemMedia: {
|
||||
width: mediaWidth,
|
||||
height: mediaHeight
|
||||
height: mediaHeight,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
fileItemName: {
|
||||
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({
|
||||
autothumb: {
|
||||
|
@ -11,7 +12,7 @@ const fileItemMediaStyle = StyleSheet.create({
|
|||
autothumbText: {
|
||||
fontFamily: 'Metropolis-SemiBold',
|
||||
textAlign: 'center',
|
||||
color: '#ffffff',
|
||||
color: Colors.White,
|
||||
fontSize: 40
|
||||
},
|
||||
autothumbPurple: {
|
||||
|
|
|
@ -24,7 +24,8 @@ const fileListStyle = StyleSheet.create({
|
|||
width: thumbnailWidth,
|
||||
height: thumbnailHeight,
|
||||
marginRight: (screenWidthPixels <= 720) ? 10 : 12,
|
||||
justifyContent: 'center'
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
fontFamily: 'Metropolis-SemiBold',
|
||||
|
|
|
@ -155,13 +155,17 @@ const rewardStyle = StyleSheet.create({
|
|||
},
|
||||
summaryContainer: {
|
||||
backgroundColor: Colors.LbryGreen,
|
||||
padding: 12
|
||||
padding: 12,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
},
|
||||
summaryText: {
|
||||
color: Colors.White,
|
||||
fontFamily: 'Metropolis-Regular',
|
||||
fontSize: 14,
|
||||
lineHeight: 22
|
||||
lineHeight: 20,
|
||||
flex: 0.7
|
||||
},
|
||||
phoneVerificationContainer: {
|
||||
paddingLeft: 4,
|
||||
|
@ -191,6 +195,13 @@ const rewardStyle = StyleSheet.create({
|
|||
},
|
||||
smsPermissionContainer: {
|
||||
marginBottom: 32
|
||||
},
|
||||
dismissButton: {
|
||||
alignSelf: 'center',
|
||||
backgroundColor: Colors.White,
|
||||
paddingLeft: 4,
|
||||
paddingRight: 4,
|
||||
flex: 0.2
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue