Untitled

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  BackHandler,
  Image,
  ScrollView,
  ActivityIndicator,
  FlatList,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {
  Container,
  Header,
  CardItem,
  Left,
  Body,
  Thumbnail,
} from 'native-base';
import { withNavigation } from 'react-navigation';
import Axios from 'axios';

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      id: '',
      card_member:'',
      member_code: '',
      referral_code: '',
      name: '',
      place: '',
      date_of_birth: '',
      religion: '',
      address:'',
      phone_number: '',
      phone_home: '',
      phone_office: '',
      image: '',
      email: '',
      password: '',
      data: [],
      renders: []

    };
  }


  async componentDidMount(){
//  const token =
  await AsyncStorage.getItem('token')
    console.log(headers);
        // api profile
        const url = 'http://192.168.56.1/vzuu/public/api/members'
        headers = {'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjU0MzM2YTJmMjZjMTlmOWVkOWQxMDdmYmM0MDEzNzM1NGZiNjllZGI2NjM4NThhNGE3OWQwZmM1MTE5N2JmOWU3Mzk2NWUxNzdjMDhmYTgyIn0.eyJhdWQiOiIzIiwianRpIjoiNTQzMzZhMmYyNmMxOWY5ZWQ5ZDEwN2ZiYzQwMTM3MzU0ZmI2OWVkYjY2Mzg1OGE0YTc5ZDBmYzUxMTk3YmY5ZTczOTY1ZTE3N2MwOGZhODIiLCJpYXQiOjE1Nzk3NTE1ODMsIm5iZiI6MTU3OTc1MTU4MywiZXhwIjoxNjExMzczOTgzLCJzdWIiOiIzIiwic2NvcGVzIjpbXX0.J-XFFYbWw8kJ-u9YtqUhR1egtNLH4aoDGkg-qFPE7Y2_eGqagd1PvUrPVSYvhpngItNCAh86nc6oXubl1yJyNSDKVbTHeUmf6fPeRvr0sZiB3oUa6sM44U1xQ6ZGsXzpBPxaA5RLNWj567JyZW8fpKTUwal1TjRvJrHnD3R--veckbqKclh7UKG1dQcPGq08rfs1YDKJDNw-RDyfc-VPrED54vO0nTm5zMwfOnqjQfe1ZoETyF7F_XpMRdy14lsK4rgvVddTi-DNu6fuVmACOp3iee9zAkYKOv0GWiGfXheYE0_FtYKWXKBMVWQ1MsruQcbM1DMcZ92qqnw3UrXLZzqz-4uXj7DOVJva5qTzNUkwwzkyST7aqBroTzvLQt9FsthSeaeSJVhOCXovnpMLwZ1rQnm1ZRKSO-bog5b90JocJppk6-5lq6vw3e3Cn8R9vb0hg16s6rEO-bP5_88h8CUZrFhNdIepjywaRwnf2SKJtKN2bPDci5kVfi602uXcotu14pNhLFyTonbFJC5fUPU11R71l8ggPiYrI3Ye8_L5m3AcgodbupijeNH-c9xiNOccfQaWEiKoxO7eR6Iq7zta7RnK1HcPVWlBGc3EdWuq_Wulhp9NrzQWK2_10V8iy6EP4EZTfUW-wAjJv5T6EEiJrCgRuxJUWUL-0E0ARXg' }
        fetch(url, headers, {method:'GET'})
          .then(data=>data.json())
          .then(res=> {
              console.log(res.results.members);
            //  dari selesai fetching api profile

            setTimeout(()=>{this.setState({loading:false})},1000)
            this.setState({
              data: res.results.members,
              renders: res.results.members.data,
            })
            console.log(this.state.data);
          })
          .catch(err=>console.warn({err}))
      }

  render() {
    return (
      <Container>
        <View>
          <Header style={{ backgroundColor: '#E91E63' }} />
          {this.state.isLoading
          ? <ActivityIndicator color='#E91E63' size='large' />
          :
          <ScrollView>

            <View style={{ flex: 1, alignItems: 'center' }}>
              <Text style={{ fontSize: 16 }}>{this.state.curTime}</Text>
            </View>
            <CardItem>
            <View style={{ marginHorizontal: 10 }}></View>
            <FlatList data={this.state.renders}
                            renderItem={({ item }) => (
                              <View style={{flex: 1}}>
                              <Left>
                                {/* <Thumbnail
                                  style={{ width: 80, height: 80 }}
                                  source={{uri : this.state.image}}
                                /> */}
                                <Body>
                                  <Text style={styles.text}>{item.name}</Text>
                                  {/* <Text style={styles.text}>{item.phone_number}</Text> */}
                                  {/* <Text>Jumlah Point</Text> */}
                                </Body>
                              </Left>
                              </View>
                            )}
                            keyExtractor={item => item.name}
                        />

            </CardItem>
            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                marginHorizontal: 50,
                marginTop: 50,
              }}></View>
            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                marginHorizontal: 18,
                marginTop: 18,
              }}>
              <View
                style={{
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                  width: '100%',
                  marginBottom: 18,
                }}>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('treatment')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/service.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Treatment
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('booking')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/booking.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Booking
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('promotion')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/promo.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Promotion
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>

            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                marginHorizontal: 18,
                marginTop: 18,
              }}>
              <View
                style={{
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                  width: '100%',
                  marginBottom: 18,
                }}>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('point')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/point.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Point
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/spin.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Spin
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('contact')}>
                    <View
                      style={{
                        width: 100,
                        height: 100,
                        borderWidth: 1,
                        borderColor: '#EFEFEF',
                        borderRadius: 18,
                      }}>
                      <Image
                        source={require('../asset/images/color/contact.png')}
                        style={{ height: 80, width: 100, flex: 1 }}
                      />
                    </View>
                    <Text
                      style={{
                        fontSize: 12,
                        fontWeight: 'bold',
                        textAlign: 'center',
                        color: '#E91E63',
                      }}>
                      Contact
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>

          </ScrollView>
     }
        </View>
      </Container>
    );
  }
}


export default withNavigation(Home);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: { fontSize: 18, fontWeight:'bold', color: '#E91E63', alignItems: 'center', justifyContent: 'center' }
});