Use pull to refresh listview for projects

This commit is contained in:
Jake Howard 2016-03-13 18:50:29 +00:00
parent 974277bbf6
commit fda939cd2d
4 changed files with 36 additions and 40 deletions

View file

@ -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];

View file

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

View file

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

View file

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