import React from 'react-native';
import GlobalStyles from '../../settings/styles';
import { getProjectRecentBuilds } from '../../api/CircleCI';
import moment from 'moment';
import Icon from 'react-native-vector-icons/Octicons';
import RouteMaster from '../routes/RouteMaster';
const {
View,
Text,
StyleSheet,
TouchableHighlight
} = React;
const styles = StyleSheet.create({
container: {
flex: 1,
height: 70,
alignItems: 'stretch',
backgroundColor: GlobalStyles.get('CIRCLE_ITEM_BG'),
borderBottomColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
borderBottomWidth: 2,
flexDirection: 'row',
},
button: {
marginVertical: 2.5,
},
repoCell: {
paddingHorizontal: 4,
paddingVertical: 3,
flex: 0.84
},
buildCell: {
flex: 0.25,
padding: 4,
borderLeftColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
borderLeftWidth: 1
},
colourPanel: {
flex: 0.02
},
repoName: {
fontSize: 15,
fontWeight: '500'
},
details: {
fontSize: 12.5,
fontWeight: '300',
},
detailsRow: {
flex: 1,
flexDirection: 'row'
},
mainDetails: {
marginRight: 10
}
});
export default class ProjectItem extends React.Component {
constructor() {
super();
this.state = {
recentBuild: false
};
this._displayMoreInfo = this._displayMoreInfo.bind(this);
this._viewBuildDetails = this._viewBuildDetails.bind(this);
}
componentDidMount() {
getProjectRecentBuilds(this.props.project.username, this.props.project.reponame).then(function (recentBuild) {
this.setState({ recentBuild: recentBuild[0] });
}.bind(this));
}
_viewBuildDetails() {
const destination = RouteMaster.get('PROJECT_DETAILS');
destination.title = this.props.project.reponame;
destination.props = {
project: this.props.project
};
this.props.nav.push(destination);
}
_displayMoreInfo(mostRecentBuild) {
const mask = mostRecentBuild.build_time_millis <= 60000 ? 'ss[s]' : 'm:ss';
const buildTime = moment.duration(mostRecentBuild.build_time_millis, 'ms').format(mask);
const commit = mostRecentBuild.all_commit_details[0];
return (
#{ mostRecentBuild.build_num }
{ buildTime }
{ commit.commit.substring(0, 6) }
);
}
render() {
const project = this.props.project;
const mostRecentBuild = this.state.recentBuild;
const master = project.branches[project.default_branch].recent_builds[0];
const statusColour = GlobalStyles.get('CIRCLE_TEST_COLOURS').get(master.outcome.toUpperCase());
const username = this.props.userDetails && this.props.userDetails.login !== project.username ?
( {project.username}) : null;
const language = project.language ?
( {project.language}) : null;
const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null;
return (
{project.reponame}
{ username }
{ language }
{ buildDetails }
);
}
};