Use pull to refresh for builds list

This commit is contained in:
Jake Howard 2016-03-13 19:28:22 +00:00
parent fda939cd2d
commit e8adb2cf50
3 changed files with 29 additions and 26 deletions

View file

@ -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,

View file

@ -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 <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>
<ListView
contentContainerStyle={styles.listView}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)} />
</ScrollView>
<View style={styles.listView}>
<GiftedListView
rowView={this.renderRow}
refreshable={true}
onFetch={this._fetch}
paginationAllLoadedView={() => null}/>
</View>
);
}
};

View file

@ -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>
);
}