Use pull to refresh for builds list
This commit is contained in:
parent
fda939cd2d
commit
e8adb2cf50
3 changed files with 29 additions and 26 deletions
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Reference in a new issue