Advertisement
Guest User

Untitled

a guest
Mar 14th, 2019
105
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.94 KB | None | 0 0
  1. import React from 'react';
  2. import { View, TouchableOpacity, Text, AsyncStorage, ScrollView, NetInfo } from 'react-native';
  3. import { CachedImage } from 'react-native-cached-image';
  4. import PropTypes from 'prop-types';
  5. import ImagePicker from 'react-native-image-crop-picker';
  6. import RNFetchBlob from 'react-native-fetch-blob';
  7. import VersionCheck from 'react-native-version-check';
  8.  
  9.  
  10. import I18n from '../../i18n';
  11. import Alert from './../../components/Alert';
  12. import Header from '../../components/Header';
  13. import Input from '../../components/Input';
  14. import Loading from '../../components/Loading';
  15. import CameraModal from '../../components/CameraModal';
  16. import PrimaryButton from '../../components/PrimaryButton';
  17. import { IMAGES, SERVICES, ENDPOINT } from '../../configs';
  18. import { validateFullName, validateEmail, validateButtonDisabled } from '../../utils/text';
  19. import styles from './styles';
  20.  
  21. export default class Component extends React.Component {
  22.  
  23. constructor(props) {
  24. super(props);
  25. this.state = {
  26. data: this.props.navigation.state.params.data,
  27. userName: this.props.navigation.state.params.data.username,
  28. fullName: this.props.navigation.state.params.data.name,
  29. email: this.props.navigation.state.params.data.email,
  30. telephone: this.props.navigation.state.params.data.mobileNumber,
  31. quote: this.props.navigation.state.params.data.personalQuote,
  32. referral: this.props.navigation.state.params.data.referal ?
  33. this.props.navigation.state.params.data.referal : '',
  34. errReferral: null,
  35. errUserName: null,
  36. errFullName: null,
  37. errEmail: null,
  38. errTelephone: null,
  39. errQuote: null,
  40. disabled: true,
  41. isOpenCameraModal: false,
  42. photo: this.props.navigation.state.params.photo,
  43. photoBase64: null,
  44. isLoading: false,
  45. alert: false,
  46. };
  47. this._handleUserName = this._handleUserName.bind(this);
  48. this._handleFullName = this._handleFullName.bind(this);
  49. this._handleEmail = this._handleEmail.bind(this);
  50. this._handleTelephone = this._handleTelephone.bind(this);
  51. this._handleQuote = this._handleQuote.bind(this);
  52. this._logout = this._logout.bind(this);
  53. }
  54.  
  55. componentDidMount() {
  56. RNFetchBlob.fetch('GET', this.state.photo)
  57. .then((res) => {
  58. let base64Str = res.base64();
  59. this.setState({ photoBase64: base64Str });
  60. });
  61.  
  62. this._sub = this.props.navigation.addListener('didFocus',
  63. () => {
  64. this.pressed = false;
  65. // this.setState({ profileIndex: 0, activeIndex: 0 });
  66. NetInfo.getConnectionInfo().then((connectionInfo) => {
  67. if (connectionInfo.type == 'none') {
  68. alert('Periksa kembali koneksi anda');
  69. this.props.navigation.goBack();
  70. }
  71. });
  72. }
  73. );
  74. }
  75.  
  76. _buttonPressed = () => {
  77. const { fullName, email, quote, telephone, photoBase64, data, referral } = this.state;
  78. this.setState({ isLoading: true });
  79. let body = {
  80. name: fullName,
  81. email: email,
  82. personalQuote: quote,
  83. mobileNumber: telephone,
  84. photoProfile: ';base64,' + photoBase64,
  85. referalCode: referral
  86. };
  87.  
  88. let userId = data.userId;
  89. fetch(ENDPOINT.editProfile + userId, {
  90. method: 'PUT',
  91. headers: {
  92. 'Content-Type': SERVICES.HEADER_CONTENT_TYPE,
  93. 'Authorization': SERVICES.HEADER_AUTH
  94. },
  95. body: JSON.stringify(body)
  96. })
  97. .then(data => data.json())
  98. .then(json => {
  99. if (json.code == 409) {
  100. this.setState({ errEmail: json.message.email });
  101. this.setState({ isLoading: false });
  102. } else {
  103. this.setState({ alert: true });
  104. SERVICES.firebaseApp.analytics().logEvent('rafi_edit_profile');
  105. AsyncStorage.setItem('userInfo', JSON.stringify(json.data));
  106. this.setState({ isLoading: false });
  107. }
  108. });
  109. }
  110.  
  111. _closeAlert = () => {
  112. this.setState({ alert: false });
  113. this.props.navigation.navigate('AuthProfile');
  114. }
  115.  
  116. _closeCameraModal = () => {
  117. this.setState({ isOpenCameraModal: false });
  118. }
  119.  
  120. _feedBackUs = () => {
  121. if (!this.pressed) {
  122. this.pressed = true;
  123. const { navigation } = this.props;
  124. navigation.navigate('Feedbackus');
  125. }
  126. }
  127.  
  128. _functionOpenCamera = () => {
  129. ImagePicker.openCamera({
  130. width: 300,
  131. height: 400,
  132. includeBase64: true,
  133. cropping: false
  134. }).then(image => {
  135. this.setState({ photo: image.path, photoBase64: image.data });
  136. this.setState({ isOpenCameraModal: false });
  137. }).catch(error => {
  138. if (error.code == 'E_PERMISSION_MISSING') {
  139. alert('Permission denied');
  140. } else {
  141. alert('Something error');
  142. }
  143. });
  144. }
  145.  
  146. _functionOpenGallery = () => {
  147. ImagePicker.openPicker({
  148. width: 300,
  149. height: 400,
  150. includeBase64: true,
  151. cropping: false
  152. }).then(image => {
  153. this.setState({ photo: image.path, photoBase64: image.data });
  154. this.setState({ isOpenCameraModal: false });
  155. }).catch(error => {
  156. if (error.code == 'E_PERMISSION_MISSING') {
  157. alert('Permission denied');
  158. } else {
  159. alert('Something error');
  160. }
  161. });
  162.  
  163. }
  164.  
  165. _handleEmail = (text) => {
  166. this.setState({ email: text });
  167. }
  168.  
  169. _handleFullName = (text) => {
  170. this.setState({ fullName: text });
  171. }
  172.  
  173. _handleQuote = (text) => {
  174. this.setState({ quote: text });
  175. }
  176.  
  177. _handleReferral = (text) => {
  178. this.setState({ referral: text });
  179. }
  180.  
  181. _handleTelephone = (text) => {
  182. if (text == '') {
  183. this.setState({ errTelephone: 'Nomor telepon tidak boleh kosong' });
  184. }
  185. else {
  186. if (text.length < 11) {
  187. this.setState({ errTelephone: 'Nomor HP tidak sesuai' });
  188. } else {
  189. this.setState({ errTelephone: null });
  190. }
  191. }
  192. this.setState({ telephone: text });
  193. }
  194.  
  195. _handleUserName = (text) => {
  196. this.setState({ userName: text });
  197. }
  198.  
  199. _logout = () => {
  200. const { navigation } = this.props;
  201. const { data } = this.state;
  202. this.setState({ isLoading: true });
  203. let body = {
  204. userId: data.userId,
  205. };
  206. fetch(ENDPOINT.logout, {
  207. method: 'POST',
  208. headers: {
  209. 'Content-Type': SERVICES.HEADER_CONTENT_TYPE,
  210. 'Authorization': SERVICES.HEADER_AUTH
  211. },
  212. body: JSON.stringify(body)
  213. })
  214. .then(data => data.json())
  215. .then(async json => {
  216. if (json.success == true) {
  217. await AsyncStorage.removeItem('userInfo');
  218. await AsyncStorage.setItem('isLoggedIn', 'false');
  219. await AsyncStorage.setItem('closeApp', 'true');
  220. this.setState({ isLoading: false });
  221. navigation.navigate('AuthLogin');
  222. } else {
  223. alert(JSON.stringify(json.message));
  224. }
  225. });
  226. }
  227.  
  228. _openCameraModal = () => {
  229. this.setState({ isOpenCameraModal: true });
  230. }
  231.  
  232. _pointAndReward = () => {
  233. const { navigation } = this.props;
  234. if (!this.pressed) {
  235. this.pressed = true;
  236. navigation.navigate('Pointandreward');
  237. }
  238. }
  239.  
  240. _setPassword = () => {
  241. if (!this.pressed) {
  242. this.pressed = true;
  243. const { navigation } = this.props;
  244. navigation.navigate('SetPassword');
  245. }
  246. }
  247.  
  248. _setPhotoBase64 = () => {
  249. RNFetchBlob.fetch('GET', this.state.photo)
  250. .then((res) => {
  251. let base64Str = res.base64();
  252. this.setState({ photoBase64: base64Str });
  253. });
  254. }
  255.  
  256. _termAndCondition = () => {
  257. const { navigation } = this.props;
  258. if (!this.pressed) {
  259. this.pressed = true;
  260. navigation.navigate('Termandcondition');
  261. }
  262. }
  263.  
  264. _validateEmail = () => {
  265. const { email } = this.state;
  266. this.setState({ errEmail: validateEmail(email) });
  267. }
  268.  
  269. _validateFullName = () => {
  270. const { fullName } = this.state;
  271. this.setState({ errFullName: validateFullName(fullName) });
  272. }
  273.  
  274. _validateQuote = () => {
  275.  
  276. }
  277.  
  278. _validateReferral = () => {
  279.  
  280. }
  281.  
  282. _validateTelephone = () => {
  283. }
  284.  
  285. _validateUserName = () => {
  286.  
  287. }
  288.  
  289. _renderAlert() {
  290. const { alert } = this.state;
  291. if (alert) {
  292. return (
  293. <Alert
  294. closeAlert={this._closeAlert}
  295. text={I18n.t('dataBerhasilDisimpan')}
  296. />
  297. );
  298. }
  299. }
  300.  
  301. _renderButtonBottom() {
  302. const {
  303. userName,
  304. errUserName,
  305. errFullName,
  306. errEmail,
  307. errTelephone,
  308. errQuote } = this.state;
  309.  
  310. let data = [userName];
  311. let err = [errUserName, errFullName, errEmail, errTelephone, errQuote];
  312.  
  313. const isButtonDisabled = validateButtonDisabled(data, err);
  314.  
  315. return (
  316. <View style={styles.containerBtnBottom}>
  317. <View style={styles.containerBtn}>
  318. <TouchableOpacity style={styles.btn} onPress={this._setPassword}>
  319. <Text style={styles.txt}>{I18n.t('setPassword')}</Text>
  320. </TouchableOpacity>
  321. </View>
  322. <View style={styles.containerBtn}>
  323. <TouchableOpacity
  324. style={styles.btn}
  325. disabled={isButtonDisabled}
  326. onPress={this._buttonPressed}>
  327. <Text style={styles.txt}>{I18n.t('save')}</Text>
  328. </TouchableOpacity>
  329. </View>
  330. </View>
  331. );
  332. }
  333.  
  334. _renderButtonInfo() {
  335. return (
  336. <View style={styles.viewInfo}>
  337. <TouchableOpacity style={styles.touchInfo} onPress={this._termAndCondition}>
  338. <Text style={styles.txtInfo}>{I18n.t('syaratDanKondisi')}</Text>
  339. </TouchableOpacity>
  340. <TouchableOpacity style={styles.touchInfo} onPress={this._pointAndReward}>
  341. <Text style={styles.txtInfo}>{I18n.t('poinDanHadiah')}</Text>
  342. </TouchableOpacity>
  343. <TouchableOpacity style={styles.touchInfo} onPress={this._feedBackUs}>
  344. <Text style={styles.txtInfo}>{I18n.t('kritikDanSaran')}</Text>
  345. </TouchableOpacity>
  346. </View>
  347. );
  348. }
  349.  
  350. _renderButtonLogout() {
  351. return (
  352. <View style={styles.containerLogout}>
  353. <PrimaryButton
  354. title={I18n.t('logout')}
  355. customButtonStyle={styles.btnlogout}
  356. onPress={this._logout}
  357. />
  358. </View>
  359. );
  360. }
  361.  
  362. _renderFormBottom() {
  363. const {
  364. telephone,
  365. email,
  366. quote,
  367. referral,
  368. errEmail,
  369. errTelephone,
  370. errQuote
  371. } = this.state;
  372. return (
  373. <View>
  374. <Input
  375. placeholder={I18n.t('email')}
  376. keyboardType="email-address"
  377. onChangeText={this._handleEmail}
  378. onEndEditing={this._validateEmail}
  379. value={email}
  380. error={errEmail} />
  381. <Input
  382. placeholder={I18n.t('telephone')}
  383. keyboardType="numeric"
  384. maxLength={13}
  385. onChangeText={this._handleTelephone}
  386. onEndEditing={this._validateTelephone}
  387. value={telephone}
  388. error={errTelephone} />
  389. <Input
  390. placeholder={I18n.t('personalQuote')}
  391. onChangeText={this._handleQuote}
  392. onEndEditing={this._validateQuote}
  393. value={quote}
  394. error={errQuote} />
  395. <Input
  396. placeholder={I18n.t('referralCode')}
  397. onChangeText={this._handleReferral}
  398. onEndEditing={this._validateReferral}
  399. value={referral} />
  400. </View>
  401. );
  402. }
  403.  
  404. _renderFormSide() {
  405. const { errUserName, userName, fullName, errFullName } = this.state;
  406. return (
  407. <View style={styles.containerFormSide}>
  408. <Input
  409. placeholder={I18n.t('username')}
  410. editable={false}
  411. selectTextOnFocus={false}
  412. onChangeText={this._handleUserName}
  413. onEndEditing={this._validateUserName}
  414. value={userName}
  415. error={errUserName} />
  416. <Input
  417. placeholder={I18n.t('fullName')}
  418. onChangeText={this._handleFullName}
  419. onEndEditing={this._validateFullName}
  420. value={fullName}
  421. error={errFullName} />
  422. </View>
  423. );
  424. }
  425.  
  426. _renderHeader() {
  427. const { navigation } = this.props;
  428.  
  429. return (
  430. <Header
  431. title={I18n.t('titleSetting')}
  432. srcLeftImage={IMAGES.back}
  433. leftPress={() => navigation.goBack()} />
  434. );
  435. }
  436.  
  437. _renderImage() {
  438. return (
  439. <View>
  440. <CachedImage resizeMode="cover" onLoad={this._setPhotoBase64} style={styles.images} source={{ uri: this.state.photo }} />
  441. <Text style={styles.labelChgPhoto} onPress={this._openCameraModal}>{I18n.t('changeProfilePhoto')}</Text>
  442. </View>
  443. );
  444. }
  445.  
  446. _renderVersionAplikasi() {
  447. let appVersion = VersionCheck.getCurrentVersion();
  448. return (
  449. <Text style={styles.textVersion}>{I18n.t('temanBerbagiVersion')}{appVersion}</Text>
  450. );
  451. }
  452.  
  453. render() {
  454. const { isLoading } = this.state;
  455. return (
  456. <View style={styles.container}>
  457. {
  458. this.state.isOpenCameraModal ?
  459. <CameraModal
  460. onPressCamera={this._functionOpenCamera}
  461. onPressGallery={this._functionOpenGallery}
  462. onCancel={this._closeCameraModal}
  463. />
  464. : null
  465. }
  466. {isLoading ? <Loading /> : null}
  467. {this._renderHeader()}
  468. {this._renderAlert()}
  469. <ScrollView>
  470. <View style={styles.content}>
  471. <Text style={styles.title}>{I18n.t('subTitleSetting')}</Text>
  472. <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 15 }}>
  473. {this._renderImage()}
  474. {this._renderFormSide()}
  475. </View>
  476. {this._renderFormBottom()}
  477. </View>
  478. {this._renderButtonBottom()}
  479. {this._renderButtonInfo()}
  480. {this._renderButtonLogout()}
  481. {this._renderVersionAplikasi()}
  482. </ScrollView>
  483. </View>
  484. );
  485. }
  486. }
  487.  
  488. Component.propTypes = {
  489. navigation: PropTypes.object,
  490. actions: PropTypes.object,
  491. updateProfile: PropTypes.object,
  492. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement