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() { render() {
console.log(this.props.userDetails);
const project = this.props.project; const project = this.props.project;
const mostRecentBuild = this.state.recentBuild; const mostRecentBuild = this.state.recentBuild;
const master = project.branches[project.default_branch].recent_builds[0]; const master = project.branches[project.default_branch].recent_builds[0];

View file

@ -1,11 +1,12 @@
import React from 'react-native'; import React from 'react-native';
import GiftedListView from 'react-native-gifted-listview';
import ProjectItem from './ProjectItem'; import ProjectItem from './ProjectItem';
import { getProjects, getUserDetails } from '../../api/CircleCI';
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
const { const {
ListView,
StyleSheet, StyleSheet,
ScrollView View
} = React; } = React;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -22,14 +23,20 @@ const styles = StyleSheet.create({
export default class ProjectList extends React.Component { export default class ProjectList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
const sortedProjects = this._sortByDate(this.props.data);
this.state = { this.state = {
dataSource: ds.cloneWithRows(sortedProjects), userDetails: false,
}; };
this.renderRow = this.renderRow.bind(this); this.renderRow = this.renderRow.bind(this);
this._fetch = this._fetch.bind(this);
} }
componentDidMount() {
getUserDetails().then(function(userDetails) {
this.setState({ userDetails });
}.bind(this));
}
_sortByDate(projects) { _sortByDate(projects) {
return projects.sort(function (a, b) { return projects.sort(function (a, b) {
const keyA = a.username + '/' + a.reponame; const keyA = a.username + '/' + a.reponame;
@ -41,17 +48,30 @@ export default class ProjectList extends React.Component {
} }
renderRow(project) { 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() { render() {
if (!this.state.userDetails) {
return <View />;
}
return ( return (
<ScrollView> <View style={styles.listView}>
<ListView <GiftedListView
contentContainerStyle={styles.listView} rowView={this.renderRow}
dataSource={this.state.dataSource} firstLoader={true}
renderRow={this.renderRow} /> refreshable={true}
</ScrollView> pagination={false}
onFetch={this._fetch} />
</View>
); );
} }
}; };

View file

@ -1,5 +1,5 @@
import React from 'react-native'; 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 loaderHandler from 'react-native-busy-indicator/LoaderHandler';
import ProjectList from '../projects/ProjectList'; import ProjectList from '../projects/ProjectList';
import GlobalStyles from '../../settings/styles'; import GlobalStyles from '../../settings/styles';
@ -21,11 +21,6 @@ const styles = StyleSheet.create({
export default class Home extends React.Component { export default class Home extends React.Component {
constructor() { constructor() {
super(); super();
this.state = {
projects: '',
userDetails: ''
};
this.didReset = false; this.didReset = false;
} }
@ -45,31 +40,12 @@ export default class Home extends React.Component {
this.didReset = true; this.didReset = true;
} }
}.bind(this)); }.bind(this));
getProjects().then(function (data) {
this.setState({
projects: data
});
}.bind(this));
getUserDetails().then(function (userDetails) {
this.setState({userDetails});
}.bind(this));
} }
render() { 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 ( return (
<View style={styles.container}> <View style={styles.container}>
{ list } <ProjectList nav={this.props.nav} />
</View> </View>
); );
} }

View file

@ -14,6 +14,7 @@
"moment-duration-format": "=1.3.0", "moment-duration-format": "=1.3.0",
"react-native": "=0.20.0", "react-native": "=0.20.0",
"react-native-busy-indicator": "=1.0.6", "react-native-busy-indicator": "=1.0.6",
"react-native-gifted-listview": "0.0.12",
"react-native-modalbox": "=1.3.1", "react-native-modalbox": "=1.3.1",
"react-native-side-menu": "=0.18.0", "react-native-side-menu": "=0.18.0",
"react-native-vector-icons": "=1.2.1", "react-native-vector-icons": "=1.2.1",