Use pull to refresh listview for projects
This commit is contained in:
parent
974277bbf6
commit
fda939cd2d
4 changed files with 36 additions and 40 deletions
|
@ -95,7 +95,6 @@ export default class ProjectItem extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log(this.props.userDetails);
|
||||
const project = this.props.project;
|
||||
const mostRecentBuild = this.state.recentBuild;
|
||||
const master = project.branches[project.default_branch].recent_builds[0];
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
import React from 'react-native';
|
||||
|
||||
import GiftedListView from 'react-native-gifted-listview';
|
||||
import ProjectItem from './ProjectItem';
|
||||
import { getProjects, getUserDetails } from '../../api/CircleCI';
|
||||
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
|
||||
|
||||
const {
|
||||
ListView,
|
||||
StyleSheet,
|
||||
ScrollView
|
||||
View
|
||||
} = React;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
@ -22,14 +23,20 @@ const styles = StyleSheet.create({
|
|||
export default class ProjectList extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
|
||||
const sortedProjects = this._sortByDate(this.props.data);
|
||||
this.state = {
|
||||
dataSource: ds.cloneWithRows(sortedProjects),
|
||||
userDetails: false,
|
||||
};
|
||||
this.renderRow = this.renderRow.bind(this);
|
||||
this._fetch = this._fetch.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
getUserDetails().then(function(userDetails) {
|
||||
this.setState({ userDetails });
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
|
||||
_sortByDate(projects) {
|
||||
return projects.sort(function (a, b) {
|
||||
const keyA = a.username + '/' + a.reponame;
|
||||
|
@ -41,17 +48,30 @@ export default class ProjectList extends React.Component {
|
|||
}
|
||||
|
||||
renderRow(project) {
|
||||
return <ProjectItem project={project} userDetails={this.props.userDetails} nav={this.props.nav} />;
|
||||
return <ProjectItem project={project} userDetails={this.state.userDetails} nav={this.props.nav} />;
|
||||
}
|
||||
|
||||
|
||||
_fetch(page, callback, options) {
|
||||
getProjects().then(function (projects) {
|
||||
loaderHandler.hideLoader();
|
||||
callback(projects);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.userDetails) {
|
||||
return <View />;
|
||||
}
|
||||
return (
|
||||
<ScrollView>
|
||||
<ListView
|
||||
contentContainerStyle={styles.listView}
|
||||
dataSource={this.state.dataSource}
|
||||
renderRow={this.renderRow} />
|
||||
</ScrollView>
|
||||
<View style={styles.listView}>
|
||||
<GiftedListView
|
||||
rowView={this.renderRow}
|
||||
firstLoader={true}
|
||||
refreshable={true}
|
||||
pagination={false}
|
||||
onFetch={this._fetch} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react-native';
|
||||
import { getProjects, getUserDetails } from '../../api/CircleCI';
|
||||
import { getProjects } from '../../api/CircleCI';
|
||||
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
|
||||
import ProjectList from '../projects/ProjectList';
|
||||
import GlobalStyles from '../../settings/styles';
|
||||
|
@ -21,11 +21,6 @@ const styles = StyleSheet.create({
|
|||
export default class Home extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
projects: '',
|
||||
userDetails: ''
|
||||
};
|
||||
this.didReset = false;
|
||||
}
|
||||
|
||||
|
@ -45,31 +40,12 @@ export default class Home extends React.Component {
|
|||
this.didReset = true;
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
getProjects().then(function (data) {
|
||||
this.setState({
|
||||
projects: data
|
||||
});
|
||||
}.bind(this));
|
||||
|
||||
getUserDetails().then(function (userDetails) {
|
||||
this.setState({userDetails});
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
render() {
|
||||
let list;
|
||||
if (this.state.projects) {
|
||||
list = (
|
||||
<ProjectList data={this.state.projects} userDetails={this.state.userDetails} nav={this.props.nav} />
|
||||
);
|
||||
loaderHandler.hideLoader();
|
||||
} else {
|
||||
list = ( <View /> );
|
||||
}
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{ list }
|
||||
<ProjectList nav={this.props.nav} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
"moment-duration-format": "=1.3.0",
|
||||
"react-native": "=0.20.0",
|
||||
"react-native-busy-indicator": "=1.0.6",
|
||||
"react-native-gifted-listview": "0.0.12",
|
||||
"react-native-modalbox": "=1.3.1",
|
||||
"react-native-side-menu": "=0.18.0",
|
||||
"react-native-vector-icons": "=1.2.1",
|
||||
|
|
Reference in a new issue