Use pull to refresh listview for projects

app/components/projects/ProjectItem.js

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

app/components/projects/ProjectList.js

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

app/components/routes/home.js

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

package.json

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