content.js

import React from 'react';
import Axios from 'axios';
import Expo from 'expo';
import { ScrollView, SafeAreaView, StyleSheet, Text, View, AsyncStorage, Image } from 'react-native';
import { NavigationActions } from 'react-navigation';
import { AVATAR_URL, THEME_COLOR, asyncStore } from '../constants';

const styles = StyleSheet.create({
  drawer: {
    flex: 1,
    flexDirection: 'column',
  },
  container: {
    flex: 1,
    paddingTop: 10,
    paddingHorizontal: 0,
    flexGrow: 1,
  },
  sectionDrawerItem: {
    fontSize: 15,
    padding: 12,
    fontFamily: 'Century_Gothic',
    backgroundColor: '#FFFFFF',
  },
  uglyDrawerItem: {
    fontSize: 14,
    padding: 12,
    color: '#444444',
  },
});

export default class DrawerContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Fullname: '',
      Company: '',
      pixUrl: '',
      compatibility: false,
    };
  }

  componentDidMount() {
    AsyncStorage.getItem(asyncStore.USER_KEY).then((userkey) => {
      const { Fullname, Company } = JSON.parse(userkey);
      this.setState({ Fullname, Company });
    });
    this.compatibility();
    (async () => {
      const email = await AsyncStorage.getItem(asyncStore.USER_EMAIL);
      const { data: { pixUrl } } = await Axios.get(AVATAR_URL(email));
      this.setState({ pixUrl });
    })();
  }


  compatibility = async () => {
    try {
      const compatible = await Expo.Fingerprint.hasHardwareAsync();
      if (compatible) {
        this.setState({ compatibility: true });
      }
    } catch (error) {
      this.setState({ compatibility: false });
    }
  };

  logout = async () => {
    try {
      await AsyncStorage.removeItem(asyncStore.USER_KEY);
      this.props.navigation.navigate('Login');
    } catch (error) {
      //   console.log(error);
    }
  };
  routeTo = (route) => {
    const navigateAction = NavigationActions.navigate({
      routeName: route,
      key: route,
      params: {
        name: route,
      },
    });
    this.props.navigation.dispatch(navigateAction);
  };

  renderAuthView() {
    if (this.state.compatibility) {
      return (
        <View>
          <View
            style={{
              marginTop: 10,
              borderBottomColor: '#F5F5F5',
              borderBottomWidth: 3,
            }}
          />
          <Text
            style={[styles.uglyDrawerItem, { marginLeft: 20, fontSize: 15, fontFamily: 'Century_Gothic' }]}
            onPress={() =>
              // console.log(this.props.navigation)

              this.props.navigation.navigate('Auth Settings')
            }
          >Authentication settings
          </Text>
          <View
            style={{
              marginTop: 10,
              borderBottomColor: '#F5F5F5',
              borderBottomWidth: 3,
            }}
          />
        </View>);
    }

    return (<View
      style={{
      marginTop: 10,
      borderBottomColor: '#F5F5F5',
      borderBottomWidth: 3,
    }}
    />);
  }

  render() {
    const { items, activeItemKey } = this.props;
    const { Fullname, Company, pixUrl } = this.state;

    return (
      <ScrollView style={styles.drawer}>

        <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
          <View style={{ marginLeft: 20, paddingTop: 8 }}>
            <View style={{ flexDirection: 'row' }}>
              {!!pixUrl && <Image
                source={{ uri: this.state.pixUrl }}
                style={{
                  height: 50, width: 50, borderWidth: 1, borderColor: THEME_COLOR, borderRadius: 25,
                }}
              />}
              <View style={{
                flexDirection: 'column',
                marginTop: 5,
                marginLeft: 30,
              }}
              >
                <Text style={{ color: '#444444', fontSize: 15, fontFamily: 'Century_Gothic' }}>{Fullname.split(' ')[0]}</Text>
                <Text style={{
                  color: '#444444', textAlign: 'left', fontSize: 15, fontFamily: 'Century_Gothic',
                }}
                >{Fullname.split(' ').slice(1, Fullname.split(' ').length).join(' ')}
                </Text>
              </View>
            </View>
            <View style={{ flexDirection: 'row', marginTop: 20 }}>
              <Image
                source={require('../../assets/icons/office.png')}
                style={{
                  marginLeft: 5, width: 20, height: 20, resizeMode: 'contain',
                }}
              />
              <Text style={{ color: '#707070', paddingHorizontal: 10, fontFamily: 'Century_Gothic' }}>{Company}</Text>
            </View>

          </View>
          <View>
            {this.renderAuthView()}
          </View>
          {
            items.filter(a => a.key !== 'Auth Settings').map((route) => {
              const focused = activeItemKey === route.key;
              const color = focused ? THEME_COLOR : '#444444';
              const section = null;

              return (
                <View key={route.key}>
                  {section}
                  <Text
                    style={[styles.sectionDrawerItem, { color, marginLeft: 20 }]}
                    onPress={() => this.routeTo(route.routeName)}
                  >
                    {route.routeName}
                  </Text>
                </View>
              );
            })
          }
          <View style={{ flexDirection: 'row' }}>
            <Text onPress={this.logout} style={[styles.uglyDrawerItem, { marginTop: 2, marginLeft: 20 }]}>
              Log Out
            </Text>
            <Image
              source={require('../../assets/icons/logout.png')}
              style={{
                marginTop: 10,
                borderBottomWidth: 3,
              }}
            />
          </View>
        </SafeAreaView>
      </ScrollView>
    );
  }
}