Skip to content

refactor: migrate events screen to styled-components #687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
housseindjirdeh merged 3 commits into from
Jan 8, 2018
Merged

refactor: migrate events screen to styled-components #687

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0f28b67
refactor: migrate events screen to styled-components
ZahraTee Jan 6, 2018
c0940a7
refactor: rename date styled-component in events screen
ZahraTee Jan 6, 2018
00a378b
refactor: change fonts usage in events screen
ZahraTee Jan 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 93 additions & 109 deletions src/auth/screens/events.screen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
/* eslint react/prop-types: 0 */
/* eslint-disable no-shadow */
import React, { Component } from 'react';
import styled from 'styled-components/native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { StyleSheet, Text, FlatList, View } from 'react-native';
import { Text, FlatList, View } from 'react-native';
import moment from 'moment/min/moment-with-locales.min';

import { LoadingUserListItem, UserListItem, ViewContainer } from 'components';
Expand All @@ -29,52 +30,58 @@ const mapDispatchToProps = dispatch =>
dispatch
);

const styles = StyleSheet.create({
descriptionContainer: {
justifyContent: 'center',
flex: 1,
marginLeft: 10,
color: colors.primaryDark,
...fonts.fontPrimaryLight,
},
linkDescription: {
...fonts.fontPrimarySemiBold,
},
linkBranchDescription: {
...fonts.fontCode,
},
deletedLinkBranchDescription: {
color: colors.greyDarkest,
...fonts.fontCode,
},
date: {
color: colors.greyDark,
},
subtitleContainer: {
paddingHorizontal: 15,
paddingBottom: 10,
borderBottomColor: colors.greyLight,
borderBottomWidth: 1,
},
subtitle: {
color: colors.greyDark,
fontSize: normalize(11),
marginTop: 1,
...fonts.fontPrimarySemiBold,
marginLeft: 39,
},
textContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 15,
},
noneTitle: {
fontSize: normalize(14),
textAlign: 'center',
...fonts.fontPrimary,
},
});
const DescriptionContainer = styled.Text`
justify-content: center;
flex: 1;
margin-left: 10;
color: ${colors.primaryDark};
${fonts.fontPrimaryLight};
`;

const LinkDescription = styled.Text`
${fonts.fontPrimarySemiBold};
`;

const LinkBranchDescription = styled.Text`
${fonts.fontCode};
`;

const DeletedLinkBranchDescription = styled.Text`
color: ${colors.greyDarkest};
${fonts.fontCode};
`;

const Datestamp = styled.Text`
color: ${colors.greyDark};
`;

const SubtitleContainer = styled.View`
padding-horizontal: 15;
padding-bottom: 10;
border-bottom-color: ${colors.greyLight};
border-bottom-width: 1;
`;

const Subtitle = styled.Text`
color: ${colors.greyDark};
font-size: ${normalize(11)};
margin-top: 1;
${fonts.fontPrimarySemiBold};
margin-left: 39;
`;

const TextContainer = styled.View`
flex: 1;
align-items: center;
justify-content: center;
margin-horizontal: 15;
`;

const NoneTitle = styled.Text`
font-size: ${normalize(14)};
text-align: center;
${fonts.fontPrimary};
`;

class Events extends Component {
componentDidMount() {
Expand Down Expand Up @@ -206,103 +213,88 @@ class Events extends Component {
userEvent.payload.ref_type === 'tag'
) {
return (
<Text style={styles.linkBranchDescription}>
<LinkBranchDescription>
{userEvent.payload.ref}
</Text>
</LinkBranchDescription>
);
} else if (userEvent.payload.ref_type === 'repository') {
return (
<Text
style={styles.linkDescription}
<LinkDescription
onPress={() => this.navigateToRepository(userEvent)}
>
{userEvent.repo.name}
</Text>
</LinkDescription>
);
}

return null;
}
case 'DeleteEvent':
return (
<Text style={styles.deletedLinkBranchDescription}>
<DeletedLinkBranchDescription>
{userEvent.payload.ref}
</Text>
</DeletedLinkBranchDescription>
); // can only be branch or tag
case 'ForkEvent':
case 'WatchEvent':
case 'PublicEvent':
return (
<Text
style={styles.linkDescription}
onPress={() => this.navigateToRepository(userEvent)}
>
<LinkDescription onPress={() => this.navigateToRepository(userEvent)}>
{userEvent.repo.name}
</Text>
</LinkDescription>
);
case 'GollumEvent':
return (
<Text>
the{' '}
<Text
style={styles.linkDescription}
<LinkDescription
onPress={() => this.navigateToRepository(userEvent)}
>
{userEvent.repo.name}
</Text>{' '}
</LinkDescription>{' '}
wiki
</Text>
);
case 'IssueCommentEvent':
case 'IssuesEvent':
return (
<Text
style={styles.linkDescription}
onPress={() => this.navigateToIssue(userEvent)}
>
<LinkDescription onPress={() => this.navigateToIssue(userEvent)}>
{userEvent.payload.issue.title}
</Text>
</LinkDescription>
);
case 'MemberEvent':
return (
<Text
style={styles.linkDescription}
onPress={() => this.navigateToProfile(userEvent)}
>
<LinkDescription onPress={() => this.navigateToProfile(userEvent)}>
{userEvent.payload.member.login}
</Text>
</LinkDescription>
);
case 'PullRequestEvent':
case 'PullRequestReviewEvent':
case 'PullRequestReviewCommentEvent':
return (
<Text
style={styles.linkDescription}
onPress={() => this.navigateToIssue(userEvent)}
>
<LinkDescription onPress={() => this.navigateToIssue(userEvent)}>
{userEvent.payload.pull_request.title}
</Text>
</LinkDescription>
);
case 'PushEvent':
return (
<Text style={styles.linkDescription}>
<LinkBranchDescription>
{userEvent.payload.ref.replace('refs/heads/', '')}
</Text>
</LinkBranchDescription>
Copy link
Copy Markdown
Member

@chinesedfan chinesedfan Jan 6, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch! Then we can update together to resolve #521.

);
case 'ReleaseEvent':
return `${userEvent.payload.release.id}`;
case 'RepositoryEvent':
return (
<Text
style={styles.linkDescription}
<LinkDescription
onPress={() => {
if (userEvent.action !== 'deleted') {
this.navigateToRepository(userEvent);
}
}}
>
{userEvent.repo.name}
</Text>
</LinkDescription>
);
default:
return null;
Expand Down Expand Up @@ -351,12 +343,11 @@ class Events extends Component {
userEvent.payload.ref_type === 'tag'
) {
return (
<Text
style={styles.linkDescription}
<LinkDescription
onPress={() => this.navigateToRepository(userEvent)}
>
{userEvent.repo.name}
</Text>
</LinkDescription>
);
}

Expand All @@ -370,21 +361,17 @@ class Events extends Component {
case 'MemberEvent':
case 'PullRequestReviewCommentEvent':
return (
<Text
style={styles.linkDescription}
onPress={() => this.navigateToRepository(userEvent)}
>
<LinkDescription onPress={() => this.navigateToRepository(userEvent)}>
{userEvent.repo.name}
</Text>
</LinkDescription>
);
case 'ForkEvent':
return (
<Text
style={styles.linkDescription}
<LinkDescription
onPress={() => this.navigateToRepository(userEvent, true)}
>
{userEvent.payload.forkee.full_name}
</Text>
</LinkDescription>
);
default:
return null;
Expand Down Expand Up @@ -484,24 +471,21 @@ class Events extends Component {

renderDescription(userEvent) {
return (
<Text style={styles.descriptionContainer}>
<Text
style={styles.linkDescription}
<DescriptionContainer>
<LinkDescription
onPress={() => this.navigateToProfile(userEvent, true)}
>
{userEvent.actor.login}{' '}
</Text>
</LinkDescription>
<Text>{this.getAction(userEvent)} </Text>
{this.getItem(userEvent)}
{this.getAction(userEvent) && ' '}
{this.getConnector(userEvent)}
{this.getItem(userEvent) && ' '}
{this.getSecondItem(userEvent)}
{this.getItem(userEvent) && this.getConnector(userEvent) && ' '}
<Text style={styles.date}>
{moment(userEvent.created_at).fromNow()}
</Text>
</Text>
<Datestamp>{moment(userEvent.created_at).fromNow()}</Datestamp>
</DescriptionContainer>
);
}

Expand All @@ -517,11 +501,11 @@ class Events extends Component {
});
} else if (!isPendingEvents && userEvents && userEvents.length === 0) {
content = (
<View style={styles.textContainer}>
<Text style={styles.noneTitle}>
<TextContainer>
<NoneTitle>
{translate('auth.events.welcomeMessage', locale)}
</Text>
</View>
</NoneTitle>
</TextContainer>
);
} else {
content = (
Expand All @@ -548,13 +532,13 @@ class Events extends Component {

{(item.type === 'IssueCommentEvent' ||
item.type === 'PullRequestReviewCommentEvent') && (
<View style={styles.subtitleContainer}>
<Text numberOfLines={3} style={styles.subtitle}>
<SubtitleContainer>
<Subtitle numberOfLines={3}>
{emojifyText(
item.payload.comment.body.replace(linebreaksPattern, ' ')
)}
</Text>
</View>
</Subtitle>
</SubtitleContainer>
)}
</View>
)}
Expand Down