Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import { View, TouchableOpacity, Text, AsyncStorage, ScrollView, NetInfo } from 'react-native';
- import { CachedImage } from 'react-native-cached-image';
- import PropTypes from 'prop-types';
- import ImagePicker from 'react-native-image-crop-picker';
- import RNFetchBlob from 'react-native-fetch-blob';
- import VersionCheck from 'react-native-version-check';
- import I18n from '../../i18n';
- import Alert from './../../components/Alert';
- import Header from '../../components/Header';
- import Input from '../../components/Input';
- import Loading from '../../components/Loading';
- import CameraModal from '../../components/CameraModal';
- import PrimaryButton from '../../components/PrimaryButton';
- import { IMAGES, SERVICES, ENDPOINT } from '../../configs';
- import { validateFullName, validateEmail, validateButtonDisabled } from '../../utils/text';
- import styles from './styles';
- export default class Component extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- data: this.props.navigation.state.params.data,
- userName: this.props.navigation.state.params.data.username,
- fullName: this.props.navigation.state.params.data.name,
- email: this.props.navigation.state.params.data.email,
- telephone: this.props.navigation.state.params.data.mobileNumber,
- quote: this.props.navigation.state.params.data.personalQuote,
- referral: this.props.navigation.state.params.data.referal ?
- this.props.navigation.state.params.data.referal : '',
- errReferral: null,
- errUserName: null,
- errFullName: null,
- errEmail: null,
- errTelephone: null,
- errQuote: null,
- disabled: true,
- isOpenCameraModal: false,
- photo: this.props.navigation.state.params.photo,
- photoBase64: null,
- isLoading: false,
- alert: false,
- };
- this._handleUserName = this._handleUserName.bind(this);
- this._handleFullName = this._handleFullName.bind(this);
- this._handleEmail = this._handleEmail.bind(this);
- this._handleTelephone = this._handleTelephone.bind(this);
- this._handleQuote = this._handleQuote.bind(this);
- this._logout = this._logout.bind(this);
- }
- componentDidMount() {
- RNFetchBlob.fetch('GET', this.state.photo)
- .then((res) => {
- let base64Str = res.base64();
- this.setState({ photoBase64: base64Str });
- });
- this._sub = this.props.navigation.addListener('didFocus',
- () => {
- this.pressed = false;
- // this.setState({ profileIndex: 0, activeIndex: 0 });
- NetInfo.getConnectionInfo().then((connectionInfo) => {
- if (connectionInfo.type == 'none') {
- alert('Periksa kembali koneksi anda');
- this.props.navigation.goBack();
- }
- });
- }
- );
- }
- _buttonPressed = () => {
- const { fullName, email, quote, telephone, photoBase64, data, referral } = this.state;
- this.setState({ isLoading: true });
- let body = {
- name: fullName,
- email: email,
- personalQuote: quote,
- mobileNumber: telephone,
- photoProfile: ';base64,' + photoBase64,
- referalCode: referral
- };
- let userId = data.userId;
- fetch(ENDPOINT.editProfile + userId, {
- method: 'PUT',
- headers: {
- 'Content-Type': SERVICES.HEADER_CONTENT_TYPE,
- 'Authorization': SERVICES.HEADER_AUTH
- },
- body: JSON.stringify(body)
- })
- .then(data => data.json())
- .then(json => {
- if (json.code == 409) {
- this.setState({ errEmail: json.message.email });
- this.setState({ isLoading: false });
- } else {
- this.setState({ alert: true });
- SERVICES.firebaseApp.analytics().logEvent('rafi_edit_profile');
- AsyncStorage.setItem('userInfo', JSON.stringify(json.data));
- this.setState({ isLoading: false });
- }
- });
- }
- _closeAlert = () => {
- this.setState({ alert: false });
- this.props.navigation.navigate('AuthProfile');
- }
- _closeCameraModal = () => {
- this.setState({ isOpenCameraModal: false });
- }
- _feedBackUs = () => {
- if (!this.pressed) {
- this.pressed = true;
- const { navigation } = this.props;
- navigation.navigate('Feedbackus');
- }
- }
- _functionOpenCamera = () => {
- ImagePicker.openCamera({
- width: 300,
- height: 400,
- includeBase64: true,
- cropping: false
- }).then(image => {
- this.setState({ photo: image.path, photoBase64: image.data });
- this.setState({ isOpenCameraModal: false });
- }).catch(error => {
- if (error.code == 'E_PERMISSION_MISSING') {
- alert('Permission denied');
- } else {
- alert('Something error');
- }
- });
- }
- _functionOpenGallery = () => {
- ImagePicker.openPicker({
- width: 300,
- height: 400,
- includeBase64: true,
- cropping: false
- }).then(image => {
- this.setState({ photo: image.path, photoBase64: image.data });
- this.setState({ isOpenCameraModal: false });
- }).catch(error => {
- if (error.code == 'E_PERMISSION_MISSING') {
- alert('Permission denied');
- } else {
- alert('Something error');
- }
- });
- }
- _handleEmail = (text) => {
- this.setState({ email: text });
- }
- _handleFullName = (text) => {
- this.setState({ fullName: text });
- }
- _handleQuote = (text) => {
- this.setState({ quote: text });
- }
- _handleReferral = (text) => {
- this.setState({ referral: text });
- }
- _handleTelephone = (text) => {
- if (text == '') {
- this.setState({ errTelephone: 'Nomor telepon tidak boleh kosong' });
- }
- else {
- if (text.length < 11) {
- this.setState({ errTelephone: 'Nomor HP tidak sesuai' });
- } else {
- this.setState({ errTelephone: null });
- }
- }
- this.setState({ telephone: text });
- }
- _handleUserName = (text) => {
- this.setState({ userName: text });
- }
- _logout = () => {
- const { navigation } = this.props;
- const { data } = this.state;
- this.setState({ isLoading: true });
- let body = {
- userId: data.userId,
- };
- fetch(ENDPOINT.logout, {
- method: 'POST',
- headers: {
- 'Content-Type': SERVICES.HEADER_CONTENT_TYPE,
- 'Authorization': SERVICES.HEADER_AUTH
- },
- body: JSON.stringify(body)
- })
- .then(data => data.json())
- .then(async json => {
- if (json.success == true) {
- await AsyncStorage.removeItem('userInfo');
- await AsyncStorage.setItem('isLoggedIn', 'false');
- await AsyncStorage.setItem('closeApp', 'true');
- this.setState({ isLoading: false });
- navigation.navigate('AuthLogin');
- } else {
- alert(JSON.stringify(json.message));
- }
- });
- }
- _openCameraModal = () => {
- this.setState({ isOpenCameraModal: true });
- }
- _pointAndReward = () => {
- const { navigation } = this.props;
- if (!this.pressed) {
- this.pressed = true;
- navigation.navigate('Pointandreward');
- }
- }
- _setPassword = () => {
- if (!this.pressed) {
- this.pressed = true;
- const { navigation } = this.props;
- navigation.navigate('SetPassword');
- }
- }
- _setPhotoBase64 = () => {
- RNFetchBlob.fetch('GET', this.state.photo)
- .then((res) => {
- let base64Str = res.base64();
- this.setState({ photoBase64: base64Str });
- });
- }
- _termAndCondition = () => {
- const { navigation } = this.props;
- if (!this.pressed) {
- this.pressed = true;
- navigation.navigate('Termandcondition');
- }
- }
- _validateEmail = () => {
- const { email } = this.state;
- this.setState({ errEmail: validateEmail(email) });
- }
- _validateFullName = () => {
- const { fullName } = this.state;
- this.setState({ errFullName: validateFullName(fullName) });
- }
- _validateQuote = () => {
- }
- _validateReferral = () => {
- }
- _validateTelephone = () => {
- }
- _validateUserName = () => {
- }
- _renderAlert() {
- const { alert } = this.state;
- if (alert) {
- return (
- <Alert
- closeAlert={this._closeAlert}
- text={I18n.t('dataBerhasilDisimpan')}
- />
- );
- }
- }
- _renderButtonBottom() {
- const {
- userName,
- errUserName,
- errFullName,
- errEmail,
- errTelephone,
- errQuote } = this.state;
- let data = [userName];
- let err = [errUserName, errFullName, errEmail, errTelephone, errQuote];
- const isButtonDisabled = validateButtonDisabled(data, err);
- return (
- <View style={styles.containerBtnBottom}>
- <View style={styles.containerBtn}>
- <TouchableOpacity style={styles.btn} onPress={this._setPassword}>
- <Text style={styles.txt}>{I18n.t('setPassword')}</Text>
- </TouchableOpacity>
- </View>
- <View style={styles.containerBtn}>
- <TouchableOpacity
- style={styles.btn}
- disabled={isButtonDisabled}
- onPress={this._buttonPressed}>
- <Text style={styles.txt}>{I18n.t('save')}</Text>
- </TouchableOpacity>
- </View>
- </View>
- );
- }
- _renderButtonInfo() {
- return (
- <View style={styles.viewInfo}>
- <TouchableOpacity style={styles.touchInfo} onPress={this._termAndCondition}>
- <Text style={styles.txtInfo}>{I18n.t('syaratDanKondisi')}</Text>
- </TouchableOpacity>
- <TouchableOpacity style={styles.touchInfo} onPress={this._pointAndReward}>
- <Text style={styles.txtInfo}>{I18n.t('poinDanHadiah')}</Text>
- </TouchableOpacity>
- <TouchableOpacity style={styles.touchInfo} onPress={this._feedBackUs}>
- <Text style={styles.txtInfo}>{I18n.t('kritikDanSaran')}</Text>
- </TouchableOpacity>
- </View>
- );
- }
- _renderButtonLogout() {
- return (
- <View style={styles.containerLogout}>
- <PrimaryButton
- title={I18n.t('logout')}
- customButtonStyle={styles.btnlogout}
- onPress={this._logout}
- />
- </View>
- );
- }
- _renderFormBottom() {
- const {
- telephone,
- email,
- quote,
- referral,
- errEmail,
- errTelephone,
- errQuote
- } = this.state;
- return (
- <View>
- <Input
- placeholder={I18n.t('email')}
- keyboardType="email-address"
- onChangeText={this._handleEmail}
- onEndEditing={this._validateEmail}
- value={email}
- error={errEmail} />
- <Input
- placeholder={I18n.t('telephone')}
- keyboardType="numeric"
- maxLength={13}
- onChangeText={this._handleTelephone}
- onEndEditing={this._validateTelephone}
- value={telephone}
- error={errTelephone} />
- <Input
- placeholder={I18n.t('personalQuote')}
- onChangeText={this._handleQuote}
- onEndEditing={this._validateQuote}
- value={quote}
- error={errQuote} />
- <Input
- placeholder={I18n.t('referralCode')}
- onChangeText={this._handleReferral}
- onEndEditing={this._validateReferral}
- value={referral} />
- </View>
- );
- }
- _renderFormSide() {
- const { errUserName, userName, fullName, errFullName } = this.state;
- return (
- <View style={styles.containerFormSide}>
- <Input
- placeholder={I18n.t('username')}
- editable={false}
- selectTextOnFocus={false}
- onChangeText={this._handleUserName}
- onEndEditing={this._validateUserName}
- value={userName}
- error={errUserName} />
- <Input
- placeholder={I18n.t('fullName')}
- onChangeText={this._handleFullName}
- onEndEditing={this._validateFullName}
- value={fullName}
- error={errFullName} />
- </View>
- );
- }
- _renderHeader() {
- const { navigation } = this.props;
- return (
- <Header
- title={I18n.t('titleSetting')}
- srcLeftImage={IMAGES.back}
- leftPress={() => navigation.goBack()} />
- );
- }
- _renderImage() {
- return (
- <View>
- <CachedImage resizeMode="cover" onLoad={this._setPhotoBase64} style={styles.images} source={{ uri: this.state.photo }} />
- <Text style={styles.labelChgPhoto} onPress={this._openCameraModal}>{I18n.t('changeProfilePhoto')}</Text>
- </View>
- );
- }
- _renderVersionAplikasi() {
- let appVersion = VersionCheck.getCurrentVersion();
- return (
- <Text style={styles.textVersion}>{I18n.t('temanBerbagiVersion')}{appVersion}</Text>
- );
- }
- render() {
- const { isLoading } = this.state;
- return (
- <View style={styles.container}>
- {
- this.state.isOpenCameraModal ?
- <CameraModal
- onPressCamera={this._functionOpenCamera}
- onPressGallery={this._functionOpenGallery}
- onCancel={this._closeCameraModal}
- />
- : null
- }
- {isLoading ? <Loading /> : null}
- {this._renderHeader()}
- {this._renderAlert()}
- <ScrollView>
- <View style={styles.content}>
- <Text style={styles.title}>{I18n.t('subTitleSetting')}</Text>
- <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 15 }}>
- {this._renderImage()}
- {this._renderFormSide()}
- </View>
- {this._renderFormBottom()}
- </View>
- {this._renderButtonBottom()}
- {this._renderButtonInfo()}
- {this._renderButtonLogout()}
- {this._renderVersionAplikasi()}
- </ScrollView>
- </View>
- );
- }
- }
- Component.propTypes = {
- navigation: PropTypes.object,
- actions: PropTypes.object,
- updateProfile: PropTypes.object,
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement