import React, { Component } from ‘react’;
import { View, Alert, ScrollView, FlatList, Platform, ActivityIndicator, Image } from ‘react-native’;
import { homecontainer } from “…/styles”
import { Asset, AppLoading } from ‘expo’;
import { Container, Content, Text, List, ListItem, Body, Left, Right, Thumbnail, Icon } from ‘native-base’
import { OptimizedFlatList } from ‘react-native-optimized-flatlist’
import { NavigationActions } from ‘react-navigation’;
class Home extends Component {
constructor(props) {
super(props)
this.state = {
data: [],
page: 1,
loading: false,
loadData: false,
error: null,
refreshing: false
}
}
render() {
if (!this.state.loadData) {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<ActivityIndicator size='large' />
</View>
)
}
return (
<View style={{
flex: 1,
backgroundColor: 'white'
}}>
<List>
<FlatList
data={this.state.data}
keyExtractor={(k, i) => i}
onEndReached={() => this.handleEnd()}
onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.1}
ListFooterComponent={() => this.renderFooterComponent() }
refreshing={this.state.refreshing}
onRefresh={() => this.handleRefresh() }
initialNumToRender={21}
renderItem={({ item }) =>
<ListItem avatar onPress={() => {
this.props.navigation.navigate('profile', { item })
}}>
<Left>
<Thumbnail key={item.id} source={{ uri: 'http://localhost/meeting/assets/' + item.phone + '.png' }} />
</Left>
<Body >
<Text>{item.name} {item.fname}</Text>
<Text note>{item.address}</Text>
</Body>
<Right>
<Text note>{item.mdate}</Text>
<Icon name="arrow-forward" />
</Right>
</ListItem>
}
/>
</List>
</View>
);
}
handleEnd() {
this.setState(state => ({ page: state.page + 1 }), () => this.fetchMembers())
}
async fetchMembers() {
this.setState({ loading: true })
const fOpt = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
'operation': 'paging',
'page': this.state.page
}),
}
try {
const res = await fetch('http://localhost/meeting/controller/MemberController.php', fOpt)
const membersData = await res.json()
if(membersData != "empty"){
this.setState(state => ({ data: [...state.data, ...membersData], loading: false }), () => {
if (this.state.page === 1) {
this.setState({ loadData: true })
}
})
}
} catch (error) {
// this.setState({ error, loading: false, refreshing: false })
console.log("home: "+error)
}
}
renderFooterComponent() {
return this.state.loading ? <ActivityIndicator size="large" /> : null
}
handleRefresh() {
this.setState(
{
page: 1,
refreshing: true
},
() => {
this.fetchMembers()
}
)
}
componentDidMount() {
this.fetchMembers()
let cnt = 0
if (!this.state.loadData) {
const interval = setInterval(() => {
cnt++
if (this.state.loadData) {
clearInterval(interval)
cnt = 0
}
if (cnt >= 1) {
this.fetchMembers()
}
}, 10000)
}
}
}
export default Home;