diff --git a/app/api/CircleCI.js b/app/api/CircleCI.js index ce4ad45..8751172 100644 --- a/app/api/CircleCI.js +++ b/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, diff --git a/app/components/builds/BuildList.js b/app/components/builds/BuildList.js index 651602b..d28abbd 100644 --- a/app/components/builds/BuildList.js +++ b/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.state = { - dataSource: ds.cloneWithRows(this.props.builds), - }; + this._fetch = this._fetch.bind(this); + this.renderRow = this.renderRow.bind(this); + this.renderLimit = 20; } renderRow(build) { @@ -38,14 +40,26 @@ export default class BuildList extends React.Component { return ; } + _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 ( - - - + + null}/> + ); } }; diff --git a/app/components/routes/project-details.js b/app/components/routes/project-details.js index 05d5b93..fad087f 100644 --- a/app/components/routes/project-details.js +++ b/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 = ( ); - } return ( @@ -76,7 +65,7 @@ export default class ProjectDetails extends React.Component { {master.outcome} - { list } + ); }