Sphere/app/components/projects/ProjectList.js

import React from 'react-native';
import GiftedListView from 'react-native-gifted-listview';
import ProjectItem from './ProjectItem';
import { getProjects, getUserDetails } from '../../api/CircleCI';
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';

const {
  StyleSheet,
  View
} = React;

const styles = StyleSheet.create({
  listView: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
    flexWrap: 'wrap',
    paddingHorizontal: 5
  },
});

export default class ProjectList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userDetails: false,
    };
    this.renderRow = this.renderRow.bind(this);
    this._fetch = this._fetch.bind(this);
  }

  componentDidMount() {
    getUserDetails().then(function(userDetails) {
      this.setState({ userDetails });
    }.bind(this));
  }


  _sortByDate(projects) {
    return projects.sort(function (a, b) {
      const keyA = a.username + '/' + a.reponame;
      const keyB = b.reponame + '/' + b.username;
      if (keyA < keyB) { return -1; }
      if (keyA > keyB) { return 1; }
      return 0;
    }.bind(this));
  }

  renderRow(project) {
    return <ProjectItem project={project} userDetails={this.state.userDetails} nav={this.props.nav} />;
  }


  _fetch(page, callback, options) {
    getProjects().then((projects) => {
      callback(this._sortByDate(projects));
      loaderHandler.hideLoader();
    });
  }

  render() {
    if (!this.state.userDetails) {
      return <View />;
    }
    return (
      <View style={styles.listView}>
        <GiftedListView
          rowView={this.renderRow}
          refreshable={true}
          pagination={false}
          onFetch={this._fetch} />
      </View>
    );
  }
};