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);
|
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 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(
|
return await request(
|
||||||
url,
|
url,
|
||||||
GET,
|
GET,
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
import React from 'react-native';
|
import React from 'react-native';
|
||||||
|
import GiftedListView from 'react-native-gifted-listview';
|
||||||
import GlobalStyles from '../../settings/styles';
|
import GlobalStyles from '../../settings/styles';
|
||||||
|
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
|
||||||
import BuildItem from './BuildItem';
|
import BuildItem from './BuildItem';
|
||||||
|
import { getProjectRecentBuilds } from '../../api/CircleCI';
|
||||||
|
import _ from 'underscore';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
ListView,
|
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
ScrollView
|
View
|
||||||
} = React;
|
} = React;
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
|
@ -22,10 +25,9 @@ const styles = StyleSheet.create({
|
||||||
export default class BuildList extends React.Component {
|
export default class BuildList extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(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) {
|
renderRow(build) {
|
||||||
|
@ -38,14 +40,26 @@ export default class BuildList extends React.Component {
|
||||||
return <BuildItem build={build} project={this.props.project} statusColour={statusColour} />;
|
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() {
|
render() {
|
||||||
return (
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -50,23 +50,12 @@ export default class ProjectDetails extends React.Component {
|
||||||
loaderHandler.showLoader('Fetching Data');
|
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() {
|
render() {
|
||||||
const master = this.state.project.branches[this.state.project.default_branch].recent_builds[0];
|
const master = this.state.project.branches[this.state.project.default_branch].recent_builds[0];
|
||||||
const statusStyle = master.outcome === 'failed' ?
|
const statusStyle = master.outcome === 'failed' ?
|
||||||
{ color: GlobalStyles.get('CIRCLE_TEST_FAIL')} :
|
{ color: GlobalStyles.get('CIRCLE_TEST_FAIL')} :
|
||||||
{ color: GlobalStyles.get('CIRCLE_TEST_PASS')};
|
{ 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 (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<View style={styles.panel}>
|
<View style={styles.panel}>
|
||||||
|
@ -76,7 +65,7 @@ export default class ProjectDetails extends React.Component {
|
||||||
<Text style={[styles.statusHeading, statusStyle]}>{master.outcome}</Text>
|
<Text style={[styles.statusHeading, statusStyle]}>{master.outcome}</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
{ list }
|
<BuildList builds={this.state.recentBuilds} project={this.state.project}/>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue