{"size": 4334, "ext": "js", "max_stars_repo_path": "JS/Classes/Module/ListView/ListViewWithRefreshExample/ListViewWithRefresh.js", "max_stars_repo_name": "liuxuanhai/ReactNativeRollingExamples", "max_stars_repo_stars_event_min_datetime": "2016-06-28T03:39:02.000Z", "max_stars_repo_stars_event_max_datetime": "2021-08-02T02:25:41.000Z", "max_issues_repo_path": "JS/Classes/Module/ListView/ListViewWithRefreshExample/ListViewWithRefresh.js", "max_issues_repo_name": "liuxuanhai/ReactNativeRollingExamples", "max_issues_repo_issues_event_min_datetime": "2016-09-05T09:50:04.000Z", "max_issues_repo_issues_event_max_datetime": "2017-10-16T14:39:21.000Z", "max_forks_repo_path": "JS/Classes/Module/ListView/ListViewWithRefreshExample/ListViewWithRefresh.js", "max_forks_repo_name": "liuxuanhai/ReactNativeRollingExamples", "max_forks_repo_forks_event_min_datetime": "2016-06-28T05:49:10.000Z", "max_forks_repo_forks_event_max_datetime": "2020-05-25T09:31:34.000Z"}
{"max_stars_count": 244, "max_issues_count": 1, "max_forks_count": 45, "avg_line_length": 20.7368421053, "max_line_length": 86, "alphanum_fraction": 0.5812182741}
'use strict';


import React, {
  Component,
} from 'react';
import {
  AppRegistry,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
  RefreshControl,
} from 'react-native';
import RequestUtils from './utils/RequestUtils'
import Animation from './custom-views/Animation'
import SnackBar from './custom-views/SnackBar.js'


class ListViewWithRefresh extends Component {
  constructor(props) {
    super(props);
    this.dateArray ;
    this.pageIndex = 1;
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      dataArray:null ,
      loadMore: false,
      isError: false,
      isRefreshing: false,
    };
  }

  componentDidMount() {
     this._refresh();
  }

  render() {
    let snackBar = this.state.isError
    ? (<SnackBar/>)
    : null

    this.state.isError = false
    return (
      <View style={styles.container}>
        <ListView
          style={styles.listContainer}
          contentInset={{top: -64, left: 0, bottom: 0, right: 0}}
          dataSource={this.state.dataSource}
          renderRow={this._renderItem.bind(this)}
          onEndReached={this._loadmore.bind(this)}
          renderFooter={this._renderFooter.bind(this)}
          onEndReachedThreshold = {29}
          refreshControl={
            <RefreshControl
              refreshing={this.state.isRefreshing}
              onRefresh={this._refresh.bind(this)}
              tintColor='#aaaaaa'
              title='Loading...'
              progressBackgroundColor='#aaaaaa'/>
          }
        />        
        {snackBar}
      </View>

    );
  }

  async _refresh () {
    if (this.state.isRefreshing) {
      return
    }
    this.setState({isRefreshing: true})
    try {
      this.dateArray = (await RequestUtils.getDateArray(1)).items
      this.pageIndex = 1
      this.setState({
        dataArray: this.dateArray,
        dataSource: this.state.dataSource.cloneWithRows(this.dateArray),
        isRefreshing: false
      })
    } catch (error) {
      this.setState({
        isError: true,
        isRefreshing: false
      })
    }
  }

  async _loadmore () {
    if (this.dateArray === undefined ) {return}

    if (this.state.loadMore) {
      return
    }

    this.setState({loadMore: true})

    try {
      this.pageIndex += 1
      let loadedContentGroup = (await RequestUtils.getDateArray(this.pageIndex)).items
      let newContent = [...this.state.dataArray, ...loadedContentGroup]
      this.setState({
        dataArray: newContent,
        dataSource: this.state.dataSource.cloneWithRows(newContent),
        loadMore: false
      })
    } catch (error) {

      console.log(error)
      this.setState({
        loadMore: false,
        isError: true
      })
    }


  }

  _renderFooter () {
    return (
      this.state.loadMore
      ? (<View style={[styles.indicatorWrapper]}>
          <Animation timingLength = {50} duration = {500} bodyColor={'black'}/>
        </View>)
      : null
      )
  }


  _renderItem (contentData, sectionID, rowID) {
    return (
      <View style={styles.itemContainer}>
        <Text style={styles.title}>{Number(rowID) +1}</Text>
        <Image
          style={styles.thumbnail}
          source={{uri: contentData.avatar_url}}
        />
        <Text style={styles.detail}>{contentData.login}</Text>
      </View>

  );}



    
}

var styles = StyleSheet.create({
  container: {
    marginLeft: 5,
    marginRight: 5,
    marginBottom: 5,
    marginTop: 65,
    backgroundColor: 'yellow',
    flex: 1,
    borderColor:'red',
    borderWidth:2,
  },

  itemContainer: {
    marginLeft: 0,
    flexDirection: 'row',
    marginRight: 5,
    height: 70,
    backgroundColor: 'white',
    flex: 1,
    borderBottomColor:'red',
    borderBottomWidth:1,
  },
  title: {
    fontSize: 20,
    marginTop: 25,
    height:20,
    width:100,
    textAlign: 'center',
    fontSize: 15,
  },
  thumbnail: {
    marginRight: 15,
    marginLeft: 15,
    marginTop: 10,
    width: 50,
    height: 50,
  },

  detail: {
    marginTop: 25,
    height:20,
    textAlign: 'center',
    fontSize: 16,
  },
 indicatorWrapper: {
    height: 45,
    alignItems: 'center',
    justifyContent: 'center',
  },
  listContainer:{
    backgroundColor: '#F5FCFF',
    flex:1,
  }
});

module.exports = ListViewWithRefresh;

