fixes as per review

This commit is contained in:
Akinwale Ariwodola 2020-01-29 12:24:20 +01:00
parent 63ba6ecf47
commit 1db0e9a09f
4 changed files with 89 additions and 46 deletions

View file

@ -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 &&

View file

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

View file

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

View file

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