GeneralInfor.js 6.68 KB
Newer Older
1 2 3 4 5 6
import React, {useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
Giang Tran committed
7
  Alert,
Giang Tran committed
8 9 10
  KeyboardAvoidingView,
  ScrollView,
  Platform,
Giang Tran committed
11 12
  TouchableWithoutFeedback,
  Keyboard,
13 14
} from 'react-native';
import R from '../../../../assets/R';
Giang Tran committed
15 16 17 18
import PickerDate from '../../../../components/Picker/PickerDate';
import TextMulti from '../../../../components/Input/TextMulti';
import {connect} from 'react-redux';
import {showLoading, hideLoading} from '../../../../actions/loadingAction';
Giang Tran committed
19
import {saveUserToRedux} from '../../../../actions/users';
Giang Tran committed
20 21
import AppText from '../../../../components/AppText';
import I18n from '../../../../helper/i18/i18n';
22
import TextField from '../../../../components/Input/TextField';
Giang Tran committed
23 24 25 26 27
import {
  getFontXD,
  HEIGHTXD,
  WIDTHXD,
  renderStatus,
Giang Tran committed
28
  checkFormatArray,
Giang Tran committed
29
} from '../../../../Config/Functions';
Giang Tran committed
30
import {updateInforUser} from '../../../../apis/Functions/users';
Giang Tran committed
31
import {showAlert, TYPE} from '../../../../components/DropdownAlert';
32 33

const GeneralInfor = (props) => {
Giang Tran committed
34 35
  const [phone, setPhone] = useState(props.user.phone);
  const [address, setAddress] = useState(props.user.address);
36

Giang Tran committed
37
  const onClick = async () => {
Giang Tran committed
38 39 40 41
    const titles = [
      I18n.t('Phone').toLowerCase(),
      I18n.t('Address').toLowerCase(),
    ];
Giang Tran committed
42 43 44 45 46 47 48 49 50 51 52
    const index = checkFormatArray([phone, address]);
    if (index === true) {
      props.showLoading();
      const res = await updateInforUser({
        uid: props.user.uid,
        platform: Platform.OS,
        phone,
        address,
      });
      props.hideLoading();
      if (res.data.code == 200) {
Giang Tran committed
53 54 55
        props.saveUserToRedux(res.data.data);
        showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
        props.navigation.popToTop();
Giang Tran committed
56
      } else {
Giang Tran committed
57
        showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
Giang Tran committed
58 59
      }
    } else {
Giang Tran committed
60 61
      showAlert(
        TYPE.ERROR,
Giang Tran committed
62 63 64
        I18n.t('Notification'),
        I18n.t('Please_fill_in') + titles[index],
      );
Giang Tran committed
65 66 67 68
    }
  };

  const renderMale = () => {
69 70
    if (props.user.gender == 1) return I18n.t('Female');
    return I18n.t('Male2');
Giang Tran committed
71
  };
Giang Tran committed
72

73
  return (
Giang Tran committed
74 75 76
    <KeyboardAvoidingView
      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
      style={{flex: 1}}
Giang Tran committed
77
      keyboardVerticalOffset={-500}>
Giang Tran committed
78 79 80
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <ScrollView style={{flex: 1}} showsVerticalScrollIndicator={false}>
          <View style={styles.container}>
Giang Tran committed
81 82
            <View style={styles.wrapItem}>
              <View style={styles.wrapLeft}>
Giang Tran committed
83
                <AppText i18nKey={'Fullname'} style={styles.txtTitle}></AppText>
Giang Tran committed
84 85
              </View>
              <View style={styles.wrapRight}>
Giang Tran committed
86
                <Text style={styles.txtRight}>{props.user.fullname}</Text>
Giang Tran committed
87 88 89 90 91 92 93
              </View>
            </View>
            <View style={styles.wrapItem}>
              <View style={styles.wrapLeft}>
                <Text style={styles.txtTitle}>Email</Text>
              </View>
              <View style={styles.wrapRight}>
Giang Tran committed
94
                <Text style={styles.txtRight}>{props.user.email}</Text>
Giang Tran committed
95 96 97 98
              </View>
            </View>
            <View style={styles.wrapItem}>
              <View style={styles.wrapLeft}>
Giang Tran committed
99
                <AppText i18nKey={'Birth'} style={styles.txtTitle}></AppText>
Giang Tran committed
100 101
              </View>
              <View style={styles.wrapRight}>
Giang Tran committed
102
                <Text style={styles.txtRight}>{props.user.birthday}</Text>
Giang Tran committed
103 104 105 106
              </View>
            </View>
            <View style={styles.wrapItem}>
              <View style={styles.wrapLeft}>
Giang Tran committed
107
                <AppText i18nKey={'Male'} style={styles.txtTitle}></AppText>
Giang Tran committed
108 109
              </View>
              <View style={styles.wrapRight}>
Giang Tran committed
110
                <Text style={styles.txtRight}>{renderMale()}</Text>
Giang Tran committed
111 112 113 114
              </View>
            </View>
            <View style={styles.wrapItem}>
              <View style={styles.wrapLeft}>
Giang Tran committed
115
                <AppText i18nKey={'Status'} style={styles.txtTitle}></AppText>
Giang Tran committed
116 117
              </View>
              <View style={styles.wrapRight}>
Giang Tran committed
118
                <Text style={styles.txtRight}>{props.user.status_name}</Text>
Giang Tran committed
119
              </View>
Giang Tran committed
120
            </View>
121

Giang Tran committed
122
            <TextField
Giang Tran committed
123
              title={I18n.t('Phone')}
Giang Tran committed
124 125
              value={phone}
              onChangeText={(val) => setPhone(val)}
Giang Tran committed
126
            />
127

Giang Tran committed
128
            <TextMulti
Giang Tran committed
129 130
              onChangeText={(val) => setAddress(val)}
              value={address}
Giang Tran committed
131
              title={I18n.t('Address')}
Giang Tran committed
132
            />
Giang Tran committed
133

Giang Tran committed
134 135
            <View style={{height: 40}} />
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
Giang Tran committed
136
              <TouchableOpacity onPress={onClick} style={styles.btn}>
Giang Tran committed
137
                <AppText i18nKey={'Update'} style={styles.txtBtn}></AppText>
Giang Tran committed
138
              </TouchableOpacity>
Giang Tran committed
139
            </View>
Giang Tran committed
140
          </View>
Giang Tran committed
141 142
        </ScrollView>
      </TouchableWithoutFeedback>
Giang Tran committed
143
    </KeyboardAvoidingView>
144 145 146 147 148 149 150 151 152
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 10,
    paddingVertical: 10,
  },
Giang Tran committed
153 154 155 156
  wrapItem: {
    flexDirection: 'row',
    marginVertical: 5,
  },
157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
  customTxt: {
    height: HEIGHTXD(110),
    color: 'black',
    borderRadius: 7,
    borderWidth: 0.7,
    borderColor: '#DBDBDB',
    fontSize: getFontXD(42),
    paddingVertical: 5,
    paddingHorizontal: 10,
    backgroundColor: 'white',
    shadowColor: '#AFA9A9',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.25,
    shadowRadius: 1.84,
    elevation: 1,
    marginTop: 50,
    marginBottom: 20,
  },
Giang Tran committed
178 179 180 181 182 183
  wrapLeft: {
    flex: 1,
  },
  wrapRight: {
    flex: 2,
  },
184 185 186
  status: {
    flexDirection: 'row',
    justifyContent: 'space-between',
Giang Tran committed
187
    marginVertical: 10,
188 189 190 191 192
    alignItems: 'center',
  },
  footer: {
    justifyContent: 'center',
    alignItems: 'center',
Giang Tran committed
193
    marginBottom: 30,
194 195
  },
  btn: {
Giang Tran committed
196 197
    width: WIDTHXD(400),
    height: HEIGHTXD(100),
Giang Tran committed
198
    borderRadius: 10,
199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221
    backgroundColor: '#1C6AF6',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txtBtn: {
    color: R.colors.white,
    fontSize: getFontXD(52),
    textTransform: 'uppercase',
  },
  customAdd: {
    borderWidth: 1,
    borderColor: '#929292',
    paddingHorizontal: 5,
    borderRadius: 5,
    marginRight: 10,
  },
  txtTitle: {
    fontSize: getFontXD(42),
    color: R.colors.color777,
    marginBottom: 5,

    paddingTop: 5,
  },
Giang Tran committed
222 223 224 225 226 227 228
  txtRight: {
    fontSize: getFontXD(42),
    color: R.colors.black,
    marginBottom: 5,

    paddingTop: 5,
  },
Giang Tran committed
229 230 231 232 233 234 235
  row: {
    height: HEIGHTXD(109),
    width: '100%',
    justifyContent: 'space-between',
    marginVertical: 5,
    width: 250,
  },
236 237
});

Giang Tran committed
238 239 240 241 242
const mapStateToProps = (state) => {
  return {
    user: state.userReducer,
  };
};
Giang Tran committed
243 244 245 246 247
export default connect(mapStateToProps, {
  showLoading,
  saveUserToRedux,
  hideLoading,
})(GeneralInfor);