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: 'Bob',
      place: '',
      date_of_birth: '',
      religion: '',
      address:'',
      phone_number: '',
      phone_home: '',
      phone_office: '',
      image: '',
      email: '',
      password: '',
      token: '',
      data : [],
      renders: []

    };
  }

  // ComponentWillMount() {
  //   BackHandler.addEventListener('hardwareBackPress', () => {
  //     if (!this.onMainScreen()) {
  //       this.goBack();
  //       return true;
  //     }
  //     return false;
  //   });
  // }


  async componentDidMount(){
  await AsyncStorage.getItem('token')
  console.log(headers);
        // api profile
        const url = 'http://192.168.56.1/vzuu/public/api/members'
        headers = {
          'Content-Type' : 'application/json',
          'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjcyYTRlNzZlMGE5OGFkMTdkMWQ3YjA3Njg3ZmZiMTA5MzcxYmJkMGE1MzA5NTc1ZTQzNjgxMDY1YzA3MTcxODNjODRiMWNkNWY5MGJkMGJkIn0.eyJhdWQiOiIzIiwianRpIjoiNzJhNGU3NmUwYTk4YWQxN2QxZDdiMDc2ODdmZmIxMDkzNzFiYmQwYTUzMDk1NzVlNDM2ODEwNjVjMDcxNzE4M2M4NGIxY2Q1ZjkwYmQwYmQiLCJpYXQiOjE1Nzk3NzI5ODQsIm5iZiI6MTU3OTc3Mjk4NCwiZXhwIjoxNjExMzk1Mzg0LCJzdWIiOiI1Iiwic2NvcGVzIjpbXX0.kWvYb3CDSa4-wpFIGUy_5dabvwWVWO09yhQOMw6P4J8a6HbhZUC4hsuiawC2zlXkZIr24qbN6Fg119Klfbap_2k2z-0-dilSS49ZLE3kiRWtsc_Iffe7GTUyTVzT3bM63riHvzlwEwNCeIVO0FtT5tQ0XLie5QOfkkjODtoBydLtn_s3NJdcUey-XbC84O8tQzw3iG65onQCXXIYmukLm79mwEXP3hmEFp8ffRinVQQ6JvS0YJl_v5vLLBXvkKcOzMZwJBG1Y-tQ7YELi85_AwomZjhKTb0bje8GdkT29Kgcz8vUzGG0mREoxnPwS3f6QRaLB_Y9ZaL56_LTpi_v3xqhIaX3bsgDdHG81L-LR8hgQePpSD1JgKy-Kn1mXeLoGPqLUFHBZDfxDYWEvORrYAut-aFaox03_12qo86qn1R3MxTFtBhZ8zqa5-EIwS5ALX-j8omz-Gu36yXJwUXTD4mrGvlQKxFqK5ijtbHyRxGwZxe-2GNbKxHTDl80hDIFTEK9rEgsneIeA8cuh-yJNSEKYSZXxSEBBUeXJDYneZg-eD1aWe7SKynw3v0H1i5h-WA5dl17jNSoFxFY4OsdZ59vXS_x6pVuEkSwFTa8X7958gpgaghPZLqyNDOr4SVAEY5haFnk2zhCdqpjdY37K6MhdgDjyTU0Vd77ItDX_7c'
        }
         fetch(url, headers, {method:'GET'})
          .then(data=>data.json())
          .then(res=> {
            AsyncStorage.setItem('token', res.success.token)
              console.log(res);

            //  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.renders);
          })
          .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' }
});