Sphere/app/components/projects/ProjectItem.js

import React from 'react-native';
import GlobalStyles from '../../settings/styles';
import { getProjectRecentBuilds } from '../../api/CircleCI';

const {
  View,
  Text,
  StyleSheet
} = 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,
    marginVertical: 2.5,
    flexDirection: 'row',
  },
  repoCell: {
    paddingHorizontal: 4,
    paddingVertical: 3,
    flex: 0.74
  },
  buildCell: {
    flex: 0.35
  },
  colourPanel: {
    flex: 0.02
  },
  repoName: {
    fontSize: 15,
    fontWeight: '500'
  },
  details: {
    fontSize: 13,
    fontWeight: '300'
  }
});

export default class ProjectItem extends React.Component {
  constructor() {
    super();
    this.state = {
      recentBuild: false
    };
    this._displayMoreInfo = this._displayMoreInfo.bind(this);
  }

  componentDidMount() {
    getProjectRecentBuilds(this.props.project.username, this.props.project.reponame).then(function (recentBuild) {
      this.setState({ recentBuild: recentBuild[0] });
    }.bind(this));
  }

  _displayMoreInfo(mostRecentBuild) {
    let seconds = Math.floor(mostRecentBuild.build_time_millis / 1000);
    const minutes = Math.floor(seconds / 60);
    seconds = seconds - (minutes * 60);
    const buildTime = minutes + ':' + seconds;
    const commit = mostRecentBuild.all_commit_details[0];
    return (
      <View>
        <Text style={styles.details} >T: { buildTime }</Text>
        <Text style={styles.details} >B: { commit.branch }</Text>
        <Text style={styles.details} >#{ mostRecentBuild.build_num }</Text>
      </View>
    );
  }

  render() {
    console.log(this.props.userDetails);
    const project = this.props.project;
    const mostRecentBuild = this.state.recentBuild;
    const statusColour = mostRecentBuild.failed ?
      GlobalStyles.get('CIRCLE_TEST_FAIL') :
      GlobalStyles.get('CIRCLE_TEST_PASS');
    let username;
    if (this.props.userDetails && this.props.userDetails.login !== project.username) {
      username = project.username + '/';
    }
    const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null;

    return (
      <View style={styles.container}>
        <View style={styles.repoCell}>
          <Text style={styles.repoName}>{username}{project.reponame}</Text>
        </View>
        <View style={styles.buildCell}>
          { buildDetails }
        </View>
        <View style={[styles.colourPanel, {backgroundColor: statusColour}]} />
      </View>
    );
  }
};