dismiss button added to reward summary, and some style tweaks.

This commit is contained in:
Akinwale Ariwodola 2018-09-24 14:59:00 +01:00
parent d921347d73
commit 975c59a114
6 changed files with 58 additions and 18 deletions

View file

@ -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);

View file

@ -1,32 +1,54 @@
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();
const { user } = this.props; AsyncStorage.getItem(RewardSummary.itemKey).then(isDismissed => {
let actionsLeft = 0; if ('true' === isDismissed) {
if (!user || !user.has_verified_email) { this.setState({ dismissed: true });
actionsLeft++; }
}
if (!user || !user.is_identity_verified) { const { user } = this.props;
actionsLeft++; let actionsLeft = 0;
} if (!user || !user.has_verified_email) {
actionsLeft++;
}
this.setState({ actionsLeft }); if (!user || !user.is_identity_verified) {
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>
); );
} }

View file

@ -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',

View file

@ -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: {

View file

@ -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',

View file

@ -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
} }
}); });