menu.jsx

import React, { Component } from "react";
import {
  Text,
  TouchableOpacity,
  View,
  Image,
  ScrollView,
  Button,
  ImageBackground,
  AppState, 
  Platform, 
  BackHandler, 
  ToastAndroid,
  Dimensions,
} from "react-native";

import { Avatar, Badge, Icon, withBadge, ListItem } from 'react-native-elements';
import Constants from 'expo-constants';
import { Notifications } from 'expo';

import * as Permissions from 'expo-permissions';

import TouchableMenuItem from './TouchableMenuItem';

import RootComponent from 'app/screens/RootComponent';
import LocDB from 'app/common/LocDB';

class Menu extends RootComponent /*Component*/{

  constructor(props) {
    super(props);

    this.state = {
      menus:[
        { title: 'Home', icon: 'home', routeName:'Home' },
        // { title: 'Details', icon: 'info', routeName:'Details' },
        // { title: 'Modal', icon: 'verified-user', routeName:'Modal' },
        { title: 'Create group', icon: 'pencil', routeName:'CreateGroup' },
        { title: 'Find group', icon: 'search', routeName:'FindGroup' },
        { title: 'Settings', icon: 'gear', routeName:'SettingsGeneral' },
      ],

      // avatar: {uri:'file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540ch3ll0v3k%252FN-App/ImagePicker/9f9c5d68-23ff-4754-b33e-869454fc833e.jpg'},
      avatar: null,
    };

    this._hardwareBackPressHandler = this._hardwareBackPressHandler.bind(this);
    this._backPressHandler = this._backPressHandler.bind(this);
    this._lastBackButtonPress = null;
  }

  _backPressHandler() {
    // this.toast(' _backPressHandler ');
    return true;
  }

  async _cleanStorage(){
    this.showLoader();
    const res = await this.setStorage({});
    // this.alert( 'async _cleanStorage()', JSON.stringify(res, null, 2) );
    this.hideLoader();
  }
 
  _hardwareBackPressHandler() {

    const NavStack = this.props.navigation.state.routes[ 0 ];
    const NavStackRoutes = NavStack.routes;

    // console.json( { index: NavStack.index, NavStackRoutes} );

    if( 
      !NavStackRoutes 
      || NavStackRoutes.length <= 2 
      || NavStackRoutes[ NavStack.index ].routeName == 'Home'
    ){

      if (this._lastBackButtonPress + 500 >= new Date().getTime()) {
        this.toast('Goodbye');
        BackHandler.exitApp();
        return true;
      }

      this.props.navigation.toggleDrawer();
      this.toast('Double tap to exit');
      this._lastBackButtonPress = new Date().getTime();
      return true;

    }

    // there is 1 or more Sub-Nav::Screens in Stack
    return false;

  }

  async componentWillMount(){
    console.log(` WILL: MOUNT: ${this.constructor.name} `); 
  }

  async componentDidMount(){ 
    console.log(` DID: MOUNT: ${this.constructor.name} `); 

    BackHandler.addEventListener('hardwareBackPress', this._hardwareBackPressHandler);
    BackHandler.addEventListener('backPress', this._hardwareBackPressHandler);
    // this._notificationSubscription = Notifications.addListener(this._handleNotification);
    // this.getPermissionAsync();

    // TODO: Update data
    // this.Api.tools.getUserAvatar( data.message.userId );
    // this.setState({ avatar: {uri: res.uri} });
    // this.updateStorage({avatar: res.uri}, 'user');

    const User = await this.getStorage('user');
    // console.json({ User });
    if( User.success ){
      // this.setState({avatar: {uri: User.data.avatar }});
      this.setState({avatar: {uri: User.data.avatar }});
    }
  }

  componentWillUnmount(){ 
    console.log(` WILL: UN-MOUNT: ${this.constructor.name} `); 
    BackHandler.removeEventListener('hardwareBackPress', this._hardwareBackPressHandler);
    BackHandler.removeEventListener('backPress', this._hardwareBackPressHandler);
    // Notifications.removeEventListener( this._handleNotification );
    // this._notificationSubscription; 
  }

  async getPermissionAsync(){
    // if (Constants.platform.ios) {
    //   const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    //   if (status !== 'granted') {
    //     alert('Sorry, we need camera roll permissions to make this work!');
    //   }
    // }
  }

  render(){

    let { avatar } = this.state;

    return(
      <View style={{flex: 1, /*marginTop: Constants.statusBarHeight*/ }}>
        <View style={{ height: 220, /*backgroundColor: '#333', color: '#fff'*/}}>
          <ImageBackground source={require('app/assets/bgs/material-01.jpg')} style={{width: '100%', height: '100%'}}>

            <View style={{
              flex: 1, alignItems: 'center', adjustContent: 'center',
              // backgroundColor: 'rgba(255,255,255, 0.3)'
            }}>

              <Avatar
                rounded
                // source={{ uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg', }}
                source={ avatar }

                // icon={{name: 'user-plus', type: 'font-awesome'}}
                icon={{name: 'photo', type: 'font-awesome'}}
                // size="xlarge"
                size={ 170 }
                // size="large"
                onPress={() => {
                  // this.alert('OK');
                }}
                // activeOpacity={0.7}
                containerStyle={{ marginTop: 35}}
                // title='Title' // userName[0]+userName[1]
                // showEditButton={true}
                overlayContainerStyle={{
                  backgroundColor: '#000'
                }}
                // onEditPress={ ()=>{ this._pickAvatar(); } }
                // onLongPress={ ()=>{ this.alert('onLongPress'); } }
              />

              <Badge
                badgeStyle={{ width: 30, height: 30, borderRadius: 15 }}
                containerStyle={{ position: 'absolute', top: 50, left: 180 }}
                status="success"
              />

            </View>

          </ImageBackground>
        </View>

        <View style={{flex: 1}}>
          <ScrollView>

            {
              this.state.menus.map((item, index)=>{
                return <TouchableMenuItem key={item+index} title={item.title} icon={item.icon} onPress={()=>{
                  this.props.navigation.navigate( item.routeName );
                }} />
              })
            }

            <TouchableMenuItem title="Sign-out" icon="arrow-left" onPress={()=>{
              this.props.navigation.navigate('SignOut');
            }} />

            <TouchableMenuItem title="Clean storage" icon="close" onPress={()=>{
              this._cleanStorage();
            }} />

          </ScrollView>

        </View>

      </View>
    )
  }
}

import { connect } from 'react-redux';
export default connect((_store)=>{return{_store};}, (_dispatch)=>{return {_dispatch}})( Menu );