ChargEco/Strides-APP/app/pages/home/Drawer.js

/**
 * 首页抽屉菜单
 * @邠心vbe on 2021/03/23
 */
import React, { Component } from 'react';
import {View, Text, StyleSheet, Image, Pressable, BackHandler, Linking} from 'react-native';
import { createDrawerNavigator, DrawerContentScrollView } from '@react-navigation/drawer';
import { Styles } from '../../components/Toolbar';
import app from '../../../app.json';
import Maps from './Home';
import { PageList } from '../Router';
import Dialog from '../../components/Dialog';
import { host, setAccessToken } from '../../api/http';
import { getStorageJsonSync, setStorage, setStorageJson } from '../../utils/storage';
import Button from '../../components/Button';
import { AutoLogin, RegisterToken } from '../sign/Login';
import apiCharge from '../../api/apiCharge';
import { toTopupPage } from '../wallet/Payment';

const Drawer = createDrawerNavigator();

const drawerBackgroundColor = '#FFFCF8';

const DEBUG = app.debug && !app.product;

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      userInfo: {},
    }
  }

  componentDidMount() {
    AutoLogin(() => {
      this.setState({
        userInfo: userInfo
      });
    });
    this.props.navigation.addListener('focus', () => {
      //console.log('drawer focus');
      getUserInfo(info => {
        this.setState({
          userInfo: info
        });
      }, true);
    });
    /*BackHandler.addEventListener('hardwareBackPress', (e) => {
      if (global.dialogId !== 0) {
        Dialog.dismissLoading();
        return true;
      }
      return false;
    })*/
  }

  componentDidUpdate() {
    const status = isLogin();
    if (this.state.isLogin != status) {
      this.setState({
        isLogin: status
      }, () => {
        getUserInfo(info => {
          this.setState({
            userInfo: info
          });
          RegisterToken();
        }, true);
      });
    }
  }

  async requestLogout() {
    const data = await getStorageJsonSync('loginData');
    if (data && data.email) {
      delete data.password
      setStorageJson('loginData', data);
      setStorage('RegisterTokenDate', "");
    }
    global.userInfo = {}
    this.setState({
      isLogin: false,
      userInfo: {}
    });
    setAccessToken('');
    Dialog.dismissLoading();
  }

  render () {
    return (
      <Drawer.Navigator
        initialRouteName='maps'
        drawerContent={props => 
          <CustomerDrawerContent 
            {...props}
            isLogin={this.state.isLogin}
            userInfo={this.state.userInfo}
            onLogout={() => this.requestLogout()}
          />
        }
        drawerType={
          global.$width >= 768 ? 'back' : 'front'
        }
        drawerStyle={{
          width: $vw(75) > 320 ? 320 : $vw(75),
          backgroundColor: drawerBackgroundColor
        }}>
        <Drawer.Screen name="maps" component={Maps} />
      </Drawer.Navigator>
    );
  }
};

const CustomerDrawerContent = (props) => {
  return (
    <DrawerContentScrollView 
      {...props}
      canCancelContentTouches={false}>
      <DrawerContent {...props}/>
    </DrawerContentScrollView>
  );
}

const DrawerContent = ({isLogin, userInfo, onLogout, navigation}) => {
  const getCharging = () => {
    Dialog.showProgressDialog();
    apiCharge.getUserCharging().then(res => {
      Dialog.dismissLoading();
      if (res.data.sitePk) {
        startPage(PageList.chargeDetail, { stationInfo: {id: res.data.sitePk}, action: 'view'});
      } else if (res.msg) {
        toastShort(res.msg);
      } else {
        toastShort('No charging session found');
      }
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort('No charging session found');
    })
  }

  const logout = () => {
    Dialog.showDialog({
      title: 'Sign out',
      message: 'Are you sure you want to sign out?',
      callback: btn => {
        if (btn == 'ok') {
          Dialog.showProgressDialog();
          setTimeout(() => {
            onLogout();
          }, 500);
        }
      }
    })
  }

  return (
    <View style={styles.drawerView}>
      { isLogin
        ? <View style={styles.loginView}>
            <Text
              style={styles.nickname}
              ellipsizeMode='tail'
              numberOfLines={1}>
              { userInfo.nickName 
                ? userInfo.nickName
                : 'Logging...'
              }
            </Text>
          </View> 
        : <View style={styles.guessView}>
            <Image
              style={Styles.logo}
              source={require('../../images/app-logo.png')}/>
          </View>
      }
      
      { isLogin
        ? <Button
            style={styles.itemButton}
            viewStyle={styles.itemView}
            onClick={() => {
              startPage(PageList.profile)
            }}>
            <MaterialCommunityIcons
              style={styles.icon}
              name="account-outline"
              color="#333"
              size={26}/>
            <Text style={styles.label}>Profile Settings</Text>
          </Button>
        : <Button
            style={styles.itemButton}
            viewStyle={styles.itemView}
            onClick={() => {
              startPage(PageList.login); 
            }}>
            <MaterialCommunityIcons
              style={styles.icon2}
              name="login-variant"
              color="#333"
              size={24}/>
            <Text style={styles.label}>Sign In</Text>
          </Button>
      }

      <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          navigation.toggleDrawer();
        }}>
        <MaterialCommunityIcons
          style={styles.icon}
          name="home-outline"
          color="#333"
          size={26}/>
        <Text style={styles.label}>Home</Text>
      </Button>

      { isLogin
        ? <Button
            style={styles.itemButton}
            viewStyle={styles.itemView}
            onClick={() => getCharging()}>
            {/* <Image
              style={styles.icon}
              source={require('../../images/icon/draw-charge.png')}/> */}
            <MaterialCommunityIcons
              style={styles.icon}
              name="car-electric-outline"
              color="#333"
              size={26}
            />
            <Text style={styles.label}>Charging</Text>
          </Button>
        : <View
            style={styles.disableItem}>
            <MaterialCommunityIcons
              style={styles.icon}
              name="car-electric-outline"
              color="#999"
              size={26}
            />
            {/* <Image
              style={styles.icon}
              source={require('../../images/icon/draw-charge-no.png')}/> */}
            <Text style={styles.disable}>Charging</Text>
          </View>
      }
      { isLogin &&
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.wallet);
          }}>
          <Image
            style={styles.icon}
            source={require('../../images/icon/draw-transaction.png')}/>
          <Text style={styles.label}>Transactions</Text>
        </Button>
      }
      {/* <View
          style={styles.disableItem}>
          <Image
            style={styles.icon}
            source={require('../../images/icon/draw-transaction-no.png')}/>
          <Text style={styles.disable}>Transactions</Text>
        </View> */
      }

      <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          startPage(PageList.feedback);
        }}>
        <MaterialCommunityIcons
          style={styles.icon2}
          name="message-alert-outline"
          color="#222"
          size={24}/>
        <Text style={styles.label}>Feedback</Text>
      </Button>

      <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          startPage(PageList.privacy);
        }}>
        <Image
          style={styles.icon}
          source={require('../../images/icon/draw-privacy.png')}/>
        <Text style={styles.label}>Privacy Policy</Text>
      </Button>
      <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          startPage(PageList.condition);
        }}>
        <MaterialCommunityIcons
          style={styles.icon}
          name="file-eye-outline"
          color="#222"
          size={26}/>
        <Text style={styles.label}>Terms of Use</Text>
      </Button>

      { DEBUG &&
      <>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(PageList.notify);
          }}>
          <Image
            style={styles.icon2}
            source={require('../../images/icon/draw-terms.png')}/>
          <Text style={styles.label}>Notification</Text>
        </Button>
        <Button
          style={styles.itemButton}
          viewStyle={styles.itemView}
          onClick={() => {
            startPage(isIOS ? PageList.notify : PageList.mapTest);
          }}>
          <Image
            style={styles.icon2}
            source={require('../../images/icon/draw-terms.png')}/>
          <Text style={styles.label}>Maps Test</Text>
        </Button>
      </>}

      {/* <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          Linking.openURL(host+"juicePicture/pdf/FAQ.v1.0.pdf")
        }}>
        <Feather
          style={styles.icon2}
          name="download"
          color="#333"
          size={24}
        />
        <Text style={styles.label}>FAQs</Text>
      </Button> */}
      <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          startPage(PageList.settings);
        }}>
        <Ionicons
          style={styles.icon}
          name="md-settings-outline"
          color="#222"
          size={25}
        />
        <Text style={styles.label}>Settings</Text>
      </Button>
      <Button
        style={styles.itemButton}
        viewStyle={styles.itemView}
        onClick={() => {
          startPage(PageList.about);
        }}>
        <MaterialCommunityIcons
          style={styles.icon}
          name="information-outline"
          color="#333"
          size={26}
        />
        <Text style={styles.label}>About Us</Text>
      </Button>

      <View style={styles.divided}></View>

      { isLogin
        ? <View style={styles.walletView}>
            <Pressable
              style={styles.balanceView}
              android_ripple={ripple}
              onPress={() => toTopupPage()}>
              <Image
                style={styles.icon}
                source={require('../../images/icon/draw-wallet.png')}/>
              <Text style={styles.balanceText}>{currency}{userInfo.credit}</Text>
            </Pressable>
            {/* <Pressable
              style={styles.balanceView}
              android_ripple={ripple}
              onPress={() => {
                startPage(PageList.referral);
              }}>
              <Image
                style={styles.icon}
                source={require('../../images/icon/draw-gift.png')}/>
              <Text style={styles.referText}>Refer your friends to get $5 credit!</Text>
            </Pressable> */}
          </View>
        : <View style={ui.flex1}></View>
      }

      <View style={styles.bottomView}>
        <Text style={{ color: '#333', fontSize: 10 }}>{app.displayName + '  ' + app.versionName}</Text>
      </View>
      { isLogin &&
        <Button
          style={styles.logoutView}
          text='Logout'
          textColor='#fff'
          borderRadius={0}
          onClick={() => logout()}/>
      }
    </View>
  );
}

const styles = StyleSheet.create({
  drawerTop: {
    top: 0,
    left: 0,
    right: 0,
    height: statusHeight,
    position: 'absolute',
    fontSize: 10,
    backgroundColor: drawerBackgroundColor
  },
  drawerView: {
    paddingTop: 16,
    minHeight: $vhs(100)
  },
  guessView: {
    padding: 16
  },
  loginView: {
    padding: 16
  },
  nickname: {
    color: '#333',
    fontSize:21,
    fontWeight: 'bold',
    paddingTop: 8,
    paddingBottom: 16
  },
  itemButton: {
    borderRadius: 0,
    backgroundColor: drawerBackgroundColor
  },
  itemView: {
    flex: 1,
    height: 56,
    paddingLeft: 16,
    marginBottom: 6,
    alignItems: 'center',
    flexDirection: 'row'
  },
  disableItem: {
    height: 56,
    paddingLeft: 16,
    marginBottom: 6,
    alignItems: 'center',
    flexDirection: 'row'
  },
  icon: {
    width: 26,
    height: 26,
    marginRight: 16
  },
  icon2: {
    width: 24,
    height: 24,
    marginLeft: 1,
    marginRight: 17
  },
  label: {
    color: '#333',
    fontSize: 16.5
  },
  disable: {
    color: '#999',
    fontSize: 18
  },
  divided: {
    height: 1,
    marginTop: 24,
    marginLeft: 16,
    backgroundColor: colorAccent
  },
  walletView: {
    paddingTop: 16,
    paddingLeft: 48,
    paddingRight: 48
  },
  balanceView: {
    marginTop: 16,
    borderRadius: 8,
    ...$padding(13, 22),
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 20, 137, 0.2)'
  },
  balanceText: {
    color: '#333',
    fontSize: 22,
    fontWeight: 'bold'
  },
  referText: {
    flex: 1,
    color: '#333',
    fontSize: 13
  },
  bottomView: {
    flex: 1,
    paddingTop: 48,
    paddingBottom: 8,
    alignItems: 'center',
    justifyContent: 'flex-end'
  },
  logoutView: {
    backgroundColor: colorPrimary
  }
});