Use pull to refresh for builds list

app/api/CircleCI.js

@@ -27,9 +27,9 @@ export async function getProjects() {
   return await request(url, GET, {}, CIToken).then(JSONify);
 }
 
-export async function getProjectRecentBuilds(user, repo, limit = 1) {
+export async function getProjectRecentBuilds(user, repo, limit = 1, offset = 0) {
   const CIToken = await token.get();
-  const url = endpoints.get('PROJECT_RECENTS').param({ user, repo }).query({ limit });
+  const url = endpoints.get('PROJECT_RECENTS').param({ user, repo }).query({ limit, offset });
   return await request(
     url,
     GET,

app/components/builds/BuildList.js

@@ -1,11 +1,14 @@
 import React from 'react-native';
+import GiftedListView from 'react-native-gifted-listview';
 import GlobalStyles from '../../settings/styles';
+import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
 import BuildItem from './BuildItem';
+import { getProjectRecentBuilds } from '../../api/CircleCI';
+import _ from 'underscore';
 
 const {
-  ListView,
   StyleSheet,
-  ScrollView
+  View
 } = React;
 
 const styles = StyleSheet.create({
@@ -22,10 +25,9 @@ const styles = StyleSheet.create({
 export default class BuildList extends React.Component {
   constructor(props) {
     super(props);
-    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    this._fetch = this._fetch.bind(this);
-    this.state = {
+    this.renderRow = this.renderRow.bind(this);
-      dataSource: ds.cloneWithRows(this.props.builds),
+    this.renderLimit = 20;
-    };
   }
 
   renderRow(build) {
@@ -38,14 +40,26 @@ export default class BuildList extends React.Component {
     return <BuildItem build={build} project={this.props.project} statusColour={statusColour} />;
   }
 
+  _fetch(page = 1, callback, options) {
+    const project = this.props.project;
+    getProjectRecentBuilds(project.username, project.reponame, this.renderLimit, this.renderLimit * (page - 1)).then((recentBuilds) => {
+      recentBuilds = _.sortBy(recentBuilds, (b) => b.stop_time).reverse();
+      loaderHandler.hideLoader();
+      callback(recentBuilds, {
+        allLoaded: recentBuilds.length < this.renderLimit
+      });
+    });
+  }
+
   render() {
     return (
-      <ScrollView>
+      <View style={styles.listView}>
-        <ListView
+        <GiftedListView
-          contentContainerStyle={styles.listView}
+          rowView={this.renderRow}
-          dataSource={this.state.dataSource}
+          refreshable={true}
-          renderRow={this.renderRow.bind(this)} />
+          onFetch={this._fetch}
-      </ScrollView>
+          paginationAllLoadedView={() => null}/>
+      </View>
     );
   }
 };

app/components/routes/project-details.js

@@ -50,23 +50,12 @@ export default class ProjectDetails extends React.Component {
     loaderHandler.showLoader('Fetching Data');
   }
 
-  componentDidMount() {
-    getProjectRecentBuilds(this.state.project.username, this.state.project.reponame, 30).then(function (recentBuilds) {
-      recentBuilds = _.sortBy(recentBuilds, (b) => b.stop_time).reverse();
-      this.setState({ recentBuilds });
-    }.bind(this));
-  }
 
   render() {
     const master = this.state.project.branches[this.state.project.default_branch].recent_builds[0];
     const statusStyle = master.outcome === 'failed' ?
       { color: GlobalStyles.get('CIRCLE_TEST_FAIL')} :
       { color: GlobalStyles.get('CIRCLE_TEST_PASS')};
-    let list = null;
-    if (this.state.recentBuilds) {
-      loaderHandler.hideLoader();
-      list = ( <BuildList builds={this.state.recentBuilds} project={this.state.project}/> );
-    }
     return (
       <View style={styles.container}>
         <View style={styles.panel}>
@@ -76,7 +65,7 @@ export default class ProjectDetails extends React.Component {
             <Text style={[styles.statusHeading, statusStyle]}>{master.outcome}</Text>
           </View>
         </View>
-        { list }
+        <BuildList builds={this.state.recentBuilds} project={this.state.project}/>
       </View>
     );
   }