fixes as per review
This commit is contained in:
parent
63ba6ecf47
commit
1db0e9a09f
4 changed files with 89 additions and 46 deletions
|
@ -101,18 +101,26 @@ class InvitesPage extends React.PureComponent {
|
|||
|
||||
if (prevPending && !isPending) {
|
||||
if (errorMessage && errorMessage.trim().length > 0) {
|
||||
notify({ message: __(errorMessage), isError: true });
|
||||
notify({ message: errorMessage, isError: true });
|
||||
} else {
|
||||
notify({ message: __(`An invite was successfully sent to ${email}`) });
|
||||
notify({ message: __(`${email} was invited to the LBRY party!`) });
|
||||
this.setState({ email: null });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleInviteLinkPress = () => {
|
||||
const { notify } = this.props;
|
||||
Clipboard.setString(this.state.inviteLink);
|
||||
notify({
|
||||
message: __('Invite link copied'),
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { fetchingInvitees, user, navigation, notify, isPending, invitees } = this.props;
|
||||
const { email, inviteLink } = this.state;
|
||||
const hasInvitees = !fetchingInvitees && invitees && invitees.length > 0;
|
||||
const hasInvitees = invitees && invitees.length > 0;
|
||||
|
||||
return (
|
||||
<View style={invitesStyle.container}>
|
||||
|
@ -132,19 +140,10 @@ class InvitesPage extends React.PureComponent {
|
|||
|
||||
<Text style={invitesStyle.subTitle}>{__('Your invite link')}</Text>
|
||||
<View style={invitesStyle.row}>
|
||||
<Text selectable numberOfLines={1} style={invitesStyle.inviteLink}>
|
||||
<Text selectable numberOfLines={1} style={invitesStyle.inviteLink} onPress={this.handleInviteLinkPress}>
|
||||
{this.state.inviteLink}
|
||||
</Text>
|
||||
<Button
|
||||
icon={'clipboard'}
|
||||
style={invitesStyle.button}
|
||||
onPress={() => {
|
||||
Clipboard.setString(inviteLink);
|
||||
notify({
|
||||
message: __('Invite link copied'),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Button icon={'clipboard'} style={invitesStyle.button} onPress={this.handleInviteLinkPress} />
|
||||
</View>
|
||||
|
||||
<Text style={invitesStyle.customizeTitle}>{__('Customize invite link')}</Text>
|
||||
|
@ -166,7 +165,7 @@ class InvitesPage extends React.PureComponent {
|
|||
editable={!isPending}
|
||||
value={this.state.email}
|
||||
onChangeText={this.handleInviteEmailChange}
|
||||
placeholder={__('myfriend@example.com')}
|
||||
placeholder={__('imaginary@friend.com')}
|
||||
underlineColorAndroid={Colors.NextLbryGreen}
|
||||
/>
|
||||
<View style={invitesStyle.rightRow}>
|
||||
|
@ -176,14 +175,18 @@ class InvitesPage extends React.PureComponent {
|
|||
<Button
|
||||
disabled={!email || email.indexOf('@') === -1 || isPending}
|
||||
style={invitesStyle.button}
|
||||
text={'Invite'}
|
||||
text={__('Invite')}
|
||||
onPress={this.handleInvitePress}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[invitesStyle.card, invitesStyle.lastCard]}>
|
||||
<Text style={invitesStyle.title}>{__('Invite History')}</Text>
|
||||
<View style={invitesStyle.titleRow}>
|
||||
<Text style={invitesStyle.titleCol}>{__('Invite History')}</Text>
|
||||
{fetchingInvitees && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
|
||||
</View>
|
||||
|
||||
<Text style={invitesStyle.text}>
|
||||
{__(
|
||||
'Earn 20 LBC for inviting a friend, an enemy, a frenemy, or an enefriend. Everyone needs content freedom.',
|
||||
|
@ -191,18 +194,13 @@ class InvitesPage extends React.PureComponent {
|
|||
</Text>
|
||||
|
||||
<View style={invitesStyle.invitees}>
|
||||
{fetchingInvitees && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
|
||||
|
||||
{hasInvitees && (
|
||||
<View style={invitesStyle.inviteesHeader}>
|
||||
<Text style={invitesStyle.emailHeader} numberOfLines={1}>
|
||||
Email
|
||||
</Text>
|
||||
<Text style={invitesStyle.statusHeader} numberOfLines={1}>
|
||||
Status
|
||||
{__('Email')}
|
||||
</Text>
|
||||
<Text style={invitesStyle.rewardHeader} numberOfLines={1}>
|
||||
Reward
|
||||
{__('Reward')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
@ -212,9 +210,6 @@ class InvitesPage extends React.PureComponent {
|
|||
<Text style={invitesStyle.inviteeEmail} numberOfLines={1}>
|
||||
{invitee.email}
|
||||
</Text>
|
||||
<Text style={invitesStyle.inviteStatus} numberOfLines={1}>
|
||||
{invitee.accepted ? __('Accepted') : __('Not Accepted')}
|
||||
</Text>
|
||||
<Text style={invitesStyle.rewardStatus} numberOfLines={1}>
|
||||
{invitee.invite_reward_claimed && __('Claimed')}
|
||||
{!invitee.invite_reward_claimed &&
|
||||
|
|
|
@ -11,6 +11,10 @@ import RewardEnrolment from 'component/rewardEnrolment';
|
|||
import UriBar from 'component/uriBar';
|
||||
import rewardStyle from 'styles/reward';
|
||||
|
||||
const FILTER_ALL = 'all';
|
||||
const FILTER_AVAILABLE = 'available';
|
||||
const FILTER_CLAIMED = 'claimed';
|
||||
|
||||
class RewardsPage extends React.PureComponent {
|
||||
state = {
|
||||
isEmailVerified: false,
|
||||
|
@ -19,6 +23,7 @@ class RewardsPage extends React.PureComponent {
|
|||
verifyRequestStarted: false,
|
||||
revealVerification: true,
|
||||
firstRewardClaimed: false,
|
||||
currentFilter: FILTER_AVAILABLE,
|
||||
};
|
||||
|
||||
scrollView = null;
|
||||
|
@ -182,8 +187,13 @@ class RewardsPage extends React.PureComponent {
|
|||
});
|
||||
};
|
||||
|
||||
setFilter = filter => {
|
||||
this.setState({ currentFilter: filter });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { user, navigation } = this.props;
|
||||
const { currentFilter } = this.state;
|
||||
|
||||
return (
|
||||
<View style={rewardStyle.container}>
|
||||
|
@ -197,8 +207,29 @@ class RewardsPage extends React.PureComponent {
|
|||
style={rewardStyle.scrollContainer}
|
||||
contentContainerStyle={rewardStyle.scrollContentContainer}
|
||||
>
|
||||
{this.renderUnclaimedRewards()}
|
||||
{this.renderClaimedRewards()}
|
||||
<View style={rewardStyle.filterHeader}>
|
||||
<Link
|
||||
style={[rewardStyle.filterLink, currentFilter === FILTER_ALL ? rewardStyle.activeFilterLink : null]}
|
||||
text={__('All')}
|
||||
onPress={() => this.setFilter(FILTER_ALL)}
|
||||
/>
|
||||
<Link
|
||||
style={[
|
||||
rewardStyle.filterLink,
|
||||
currentFilter === FILTER_AVAILABLE ? rewardStyle.activeFilterLink : null,
|
||||
]}
|
||||
text={__('Available')}
|
||||
onPress={() => this.setFilter(FILTER_AVAILABLE)}
|
||||
/>
|
||||
<Link
|
||||
style={[rewardStyle.filterLink, currentFilter === FILTER_CLAIMED ? rewardStyle.activeFilterLink : null]}
|
||||
text={__('Claimed')}
|
||||
onPress={() => this.setFilter(FILTER_CLAIMED)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{(currentFilter === FILTER_AVAILABLE || currentFilter === FILTER_ALL) && this.renderUnclaimedRewards()}
|
||||
{(currentFilter === FILTER_CLAIMED || currentFilter === FILTER_ALL) && this.renderClaimedRewards()}
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
|
|
|
@ -30,6 +30,16 @@ const walletStyle = StyleSheet.create({
|
|||
fontSize: 20,
|
||||
marginBottom: 8,
|
||||
},
|
||||
titleRow: {
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
marginBottom: 8,
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
titleCol: {
|
||||
fontFamily: 'Inter-SemiBold',
|
||||
fontSize: 20,
|
||||
},
|
||||
text: {
|
||||
fontFamily: 'Inter-Regular',
|
||||
fontSize: 14,
|
||||
|
@ -63,13 +73,13 @@ const walletStyle = StyleSheet.create({
|
|||
},
|
||||
subTitle: {
|
||||
fontFamily: 'Inter-Regular',
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
marginTop: 12,
|
||||
marginBottom: 8,
|
||||
marginBottom: 4,
|
||||
},
|
||||
customizeTitle: {
|
||||
fontFamily: 'Inter-Regular',
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
marginTop: 12,
|
||||
},
|
||||
inviteLink: {
|
||||
|
@ -112,17 +122,12 @@ const walletStyle = StyleSheet.create({
|
|||
emailHeader: {
|
||||
fontFamily: 'Inter-SemiBold',
|
||||
fontSize: 14,
|
||||
width: '50%',
|
||||
},
|
||||
statusHeader: {
|
||||
fontFamily: 'Inter-SemiBold',
|
||||
fontSize: 14,
|
||||
width: '30%',
|
||||
width: '65%',
|
||||
},
|
||||
rewardHeader: {
|
||||
fontFamily: 'Inter-SemiBold',
|
||||
fontSize: 14,
|
||||
width: '20%',
|
||||
width: '35%',
|
||||
},
|
||||
inviteeItem: {
|
||||
flex: 1,
|
||||
|
@ -133,17 +138,12 @@ const walletStyle = StyleSheet.create({
|
|||
inviteeEmail: {
|
||||
fontFamily: 'Inter-Regular',
|
||||
fontSize: 12,
|
||||
width: '50%',
|
||||
},
|
||||
inviteStatus: {
|
||||
fontFamily: 'Inter-Regular',
|
||||
fontSize: 12,
|
||||
width: '30%',
|
||||
width: '65%',
|
||||
},
|
||||
rewardStatus: {
|
||||
fontFamily: 'Inter-Regular',
|
||||
fontSize: 12,
|
||||
width: '20%',
|
||||
width: '35%',
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -305,6 +305,23 @@ const rewardStyle = StyleSheet.create({
|
|||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
},
|
||||
filterHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: 16,
|
||||
marginLeft: 16,
|
||||
marginRight: 16,
|
||||
padding: 16,
|
||||
backgroundColor: Colors.White,
|
||||
},
|
||||
filterLink: {
|
||||
fontFamily: 'Inter-Regular',
|
||||
fontSize: 14,
|
||||
marginRight: 24,
|
||||
},
|
||||
activeFilterLink: {
|
||||
fontFamily: 'Inter-SemiBold',
|
||||
},
|
||||
});
|
||||
|
||||
export default rewardStyle;
|
||||
|
|
Loading…
Reference in a new issue