ecency-mobile/src/containers/profileEditContainer.js

215 lines
5.3 KiB
JavaScript
Raw Normal View History

2019-09-04 22:17:39 +03:00
import { Component } from 'react';
2019-09-08 14:52:16 +03:00
import { Alert } from 'react-native';
2019-09-04 22:17:39 +03:00
import { connect } from 'react-redux';
2019-09-08 14:52:16 +03:00
import { injectIntl } from 'react-intl';
import ImagePicker from 'react-native-image-crop-picker';
import get from 'lodash/get';
import { withNavigation } from 'react-navigation';
2019-09-04 22:17:39 +03:00
2019-09-08 14:52:16 +03:00
import { uploadImage } from '../providers/esteem/esteem';
2019-09-09 00:30:37 +03:00
import { profileUpdate } from '../providers/steem/dsteem';
import { updateCurrentAccount } from '../redux/actions/accountAction';
2019-09-04 22:17:39 +03:00
// import ROUTES from '../constants/routeNames';
2019-09-08 00:20:15 +03:00
const FORM_DATA = [
{
valueKey: 'name',
type: 'text',
label: 'display_name',
placeholder: '',
},
{
valueKey: 'about',
type: 'text',
label: 'about',
placeholder: '',
},
{
valueKey: 'location',
type: 'text',
label: 'location',
placeholder: '',
},
{
valueKey: 'website',
type: 'text',
label: 'website',
placeholder: '',
},
];
2019-09-04 22:17:39 +03:00
class ProfileEditContainer extends Component {
/* Props
* ------------------------------------------------
* @prop { type } name - Description....
*/
constructor(props) {
super(props);
2019-09-08 14:52:16 +03:00
this.state = {
isLoading: false,
2019-09-08 14:52:16 +03:00
about: get(props.currentAccount, 'about.profile.about'),
name: get(props.currentAccount, 'about.profile.name'),
location: get(props.currentAccount, 'about.profile.location'),
website: get(props.currentAccount, 'about.profile.website'),
coverUrl: get(props.currentAccount, 'about.profile.cover_image'),
avatarUrl: get(props.currentAccount, 'avatar'),
};
2019-09-04 22:17:39 +03:00
}
// Component Life Cycles
// Component Functions
2019-09-08 14:52:16 +03:00
_handleOnItemChange = (val, item) => {
this.setState({ [item]: val });
2019-09-08 14:52:16 +03:00
};
_uploadImage = (media, action) => {
const { intl } = this.props;
this.setState({ isLoading: true });
2019-09-08 14:52:16 +03:00
uploadImage(media)
.then(res => {
if (res.data && res.data.url) {
this.setState({ [action]: res.data.url, isLoading: false });
2019-09-08 14:52:16 +03:00
}
})
.catch(error => {
if (error) {
Alert.alert(
intl.formatMessage({
id: 'alert.fail',
}),
error.message || error.toString(),
);
}
this.setState({ isLoading: false });
2019-09-08 14:52:16 +03:00
});
};
_handleMediaAction = (type, uploadAction) => {
if (type === 'camera') {
this._handleOpenCamera(uploadAction);
} else if (type === 'image') {
this._handleOpenImagePicker(uploadAction);
}
};
_handleOpenImagePicker = action => {
ImagePicker.openPicker({
includeBase64: true,
})
.then(image => {
this._handleMediaOnSelected(image, action);
})
.catch(e => {
this._handleMediaOnSelectFailure(e);
});
};
_handleOpenCamera = action => {
ImagePicker.openCamera({
includeBase64: true,
})
.then(image => {
this._handleMediaOnSelected(image, action);
})
.catch(e => {
this._handleMediaOnSelectFailure(e);
});
};
_handleMediaOnSelected = (media, action) => {
this.setState({ isLoading: true }, () => {
2019-09-08 14:52:16 +03:00
this._uploadImage(media, action);
});
};
_handleMediaOnSelectFailure = error => {
const { intl } = this.props;
if (get(error, 'code') === 'E_PERMISSION_MISSING') {
Alert.alert(
intl.formatMessage({
id: 'alert.permission_denied',
}),
intl.formatMessage({
id: 'alert.permission_text',
}),
);
}
};
_handleOnSubmit = async () => {
const { currentAccount, pinCode, dispatch, navigation, intl } = this.props;
const { name, location, website, about, coverUrl, avatarUrl } = this.state;
await this.setState({ isLoading: true });
const params = {
profile_image: avatarUrl,
cover_image: coverUrl,
name,
website,
about,
location,
};
await profileUpdate(params, pinCode, currentAccount)
.then(async () => {
2019-09-09 22:07:00 +03:00
const _currentAccount = { ...currentAccount, display_name: name, avatar: avatarUrl };
_currentAccount.about.profile = { ...params };
dispatch(updateCurrentAccount(_currentAccount));
2019-09-09 00:30:37 +03:00
navigation.state.params.fetchUser();
navigation.goBack();
})
.catch(error => {
Alert.alert(
intl.formatMessage({
id: 'alert.fail',
}),
get(error, 'message', error.toString()),
);
});
this.setState({ isLoading: false });
};
2019-09-04 22:17:39 +03:00
render() {
2019-09-07 14:49:04 +03:00
const { children, currentAccount, isDarkTheme } = this.props;
const { isLoading, name, location, website, about, coverUrl, avatarUrl } = this.state;
2019-09-04 22:17:39 +03:00
return (
children &&
children({
about,
avatarUrl,
coverUrl,
2019-09-04 22:17:39 +03:00
currentAccount,
2019-09-08 00:20:15 +03:00
formData: FORM_DATA,
2019-09-08 14:52:16 +03:00
handleMediaAction: this._handleMediaAction,
handleOnItemChange: this._handleOnItemChange,
handleOnSubmit: this._handleOnSubmit,
isDarkTheme,
isLoading,
2019-09-08 14:52:16 +03:00
location,
name,
2019-09-08 14:52:16 +03:00
website,
2019-09-04 22:17:39 +03:00
})
);
}
}
const mapStateToProps = state => ({
currentAccount: state.account.currentAccount,
2019-09-07 14:49:04 +03:00
isDarkTheme: state.application.isDarkTheme,
pinCode: state.application.pin,
2019-09-04 22:17:39 +03:00
});
export default connect(mapStateToProps)(injectIntl(withNavigation(ProfileEditContainer)));