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

View file

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

View file

@ -53,7 +53,9 @@ const discoverStyle = StyleSheet.create({
},
fileItemMedia: {
width: mediaWidth,
height: mediaHeight
height: mediaHeight,
alignItems: 'center',
justifyContent: 'center'
},
fileItemName: {
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({
autothumb: {
@ -11,7 +12,7 @@ const fileItemMediaStyle = StyleSheet.create({
autothumbText: {
fontFamily: 'Metropolis-SemiBold',
textAlign: 'center',
color: '#ffffff',
color: Colors.White,
fontSize: 40
},
autothumbPurple: {

View file

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

View file

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