Skip to content

I
InvestCustomer
Commit 8f843cc6 by Giang Tran
Options

chage avatart

parent 9a6020d8
Showing with 208 additions and 204 deletions
ios/Invest.xcodeproj/project.pbxproj
......@@ -903,7 +903,7 @@
CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 8;
CURRENT_PROJECT_VERSION = 9;
DEVELOPMENT_TEAM = MXZ24GRH48;
ENABLE_BITCODE = NO;
GCC_PREPROCESSOR_DEFINITIONS = (
......@@ -937,7 +937,7 @@
CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 8;
CURRENT_PROJECT_VERSION = 9;
DEVELOPMENT_TEAM = MXZ24GRH48;
INFOPLIST_FILE = Invest/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
......
src/assets/images.js
......@@ -17,6 +17,7 @@ const images = {
bgHome: require('./images/bgHome01.png'),
iconUser: require('./images/iconUser1.png'),
iconUserHome: require('./images/iconUser.png'),
iconUserAccuracy: require('./images/iconUserAccuracy.png'),
iconList: require('./images/iconList7.png'),
iconRose: require('./images/iconRose2.png'),
......
src/components/Header/Drawer.js
......@@ -172,7 +172,7 @@ const Drawer = (props) => {
<View style={styles.container}>
<View style={styles.header}>
<Image
source={imgAvatart ? {uri: imgAvatart} : R.images.avartar}
source={imgAvatart ? {uri: imgAvatart} : R.images.iconUser}
style={styles.imgAvatar}
/>
<TouchableOpacity
......
src/components/Picker/PickerAvatart.js
import React, {useState, useEffect} from 'react';
import {
View,
Text,
Image,
StyleSheet,
TouchableOpacity,
TouchableWithoutFeedback,
Platform,
Alert,
View,
Text,
Image,
StyleSheet,
TouchableOpacity,
TouchableWithoutFeedback,
Platform,
Alert,
} from 'react-native';
import R from '../../assets/R';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
......@@ -25,218 +25,221 @@ import {changeAvatart} from '../../apis/Functions/users';
import {showLoading, hideLoading} from '../../actions/loadingAction';
const options = {
title: 'Select Avatar',
customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}],
storageOptions: {
skipBackup: true,
path: 'images',
},
title: 'Select Avatar',
customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}],
storageOptions: {
skipBackup: true,
path: 'images',
},
};
const PickerImg = (props) => {
const naviagtion = useNavigation();
const [isModalVisible, setModalVisible] = useState(false);
const [imgAvatart, setImgAvatart] = useState(props.user.picture_url);
// useEffect(() => {
// setTimeout(() => {
// console.log('Affter', props.user.picture_url);
// setImgAvatart(props.user.picture_url);
// }, 500);
// }, [props.user]);
const naviagtion = useNavigation();
const [isModalVisible, setModalVisible] = useState(false);
const [imgAvatart, setImgAvatart] = useState(props.user.picture_url);
// useEffect(() => {
// setTimeout(() => {
// console.log('Affter', props.user.picture_url);
// setImgAvatart(props.user.picture_url);
// }, 500);
// }, [props.user]);
const createFormData = (photo, body) => {
const data = new FormData();
data.append('avatar', {
name: 'sign_img.jpg',
type: 'image/jpg',
uri: Platform.OS === 'android' ? photo : photo.replace('file://', ''),
});
Object.keys(body).forEach((key) => {
data.append(key, body[key]);
});
return data;
};
const createFormData = (photo, body) => {
const data = new FormData();
data.append('avatar', {
name: 'sign_img.jpg',
type: 'image/jpg',
uri: Platform.OS === 'android' ? photo : photo.replace('file://', ''),
});
Object.keys(body).forEach((key) => {
data.append(key, body[key]);
});
return data;
};
const callApi = async (image) => {
props.showLoading();
const res = await changeAvatart(
createFormData(image, {uid: props.user.uid, platform: Platform.OS}),
);
console.log('upload avatar', res);
props.hideLoading();
if (res?.status == 200 && res.data) {
if (res.data.code == 200) {
setTimeout(() => {
props.saveUserToRedux(res.data.data);
Alert.alert(I18n.t('Notification'), res.data.message);
}, 500);
} else {
setImgAvatart(props.user.picture_url);
setTimeout(() => {
Alert.alert(I18n.t('Notification'), res.data.message);
}, 500);
}
} else {
setImgAvatart(props.user.picture_url);
setTimeout(() => {
Alert.alert(I18n.t('Notification'), 'upload fail');
}, 500);
}
};
const callApi = async (image) => {
props.showLoading();
const res = await changeAvatart(
createFormData(image, {uid: props.user.uid, platform: Platform.OS}),
);
console.log('upload avatar', res);
props.hideLoading();
if (res?.status == 200 && res.data) {
if (res.data.code == 200) {
setTimeout(() => {
props.saveUserToRedux(res.data.data);
Alert.alert(I18n.t('Notification'), res.data.message);
}, 500);
} else {
setImgAvatart(props.user.picture_url);
setTimeout(() => {
Alert.alert(I18n.t('Notification'), res.data.message);
}, 500);
}
} else {
setImgAvatart(props.user.picture_url);
setTimeout(() => {
Alert.alert(I18n.t('Notification'), 'upload fail');
}, 500);
}
};
const onchoosGalery = () => {
ImagePicker.openPicker({
mediaType: 'photo',
multiple: false,
cropping: true,
width: 300,
height: 300,
}).then((image) => {
setModalVisible(false);
callApi(image.path);
setImgAvatart(image.path);
});
};
const onchoosGalery = () => {
ImagePicker.openPicker({
mediaType: 'photo',
multiple: false,
cropping: true,
width: 300,
height: 300,
}).then((image) => {
setModalVisible(false);
callApi(image.path);
setImgAvatart(image.path);
});
};
const onCapture = () => {
ImagePicker.openCamera({
mediaType: 'photo',
multiple: false,
width: 300,
height: 300,
cropping: true,
}).then((image) => {
setModalVisible(false);
callApi(image.path);
setImgAvatart(image.path);
});
};
return (
<TouchableOpacity onPress={() => setModalVisible(true)}>
<View style={styles.containerImg}>
{/*{imgAvatart ? (*/}
<Image source={imgAvatart ? {uri: imgAvatart} : R.images.avartar} style={styles.imgAvatar}/>
{/*) : (*/}
{/* <View style={styles.imgAvatar}/>*/}
{/*)}*/}
const onCapture = () => {
ImagePicker.openCamera({
mediaType: 'photo',
multiple: false,
width: 300,
height: 300,
cropping: true,
}).then((image) => {
setModalVisible(false);
callApi(image.path);
setImgAvatart(image.path);
});
};
return (
<TouchableOpacity onPress={() => setModalVisible(true)}>
<View style={styles.containerImg}>
{/*{imgAvatart ? (*/}
<Image
source={imgAvatart ? {uri: imgAvatart} : R.images.iconUser}
style={styles.imgAvatar}
/>
{/*) : (*/}
{/* <View style={styles.imgAvatar}/>*/}
{/*)}*/}
<View style={styles.iconPicker}>
<Image
style={{width: 20, height: 20}}
source={R.images.imagePicker}
/>
</View>
</View>
<View style={styles.iconPicker}>
<Image
style={{width: 20, height: 20}}
source={R.images.imagePicker}
/>
</View>
</View>
<Modal
isVisible={isModalVisible}
style={{margin: 0, justifyContent: 'flex-end'}}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={['up', 'left', 'right', 'down']}>
<TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
<View style={{flex: 1}}></View>
</TouchableWithoutFeedback>
<Modal
isVisible={isModalVisible}
style={{margin: 0, justifyContent: 'flex-end'}}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={['up', 'left', 'right', 'down']}>
<TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
<View style={{flex: 1}}></View>
</TouchableWithoutFeedback>
<View style={styles.containerSelect}>
<AppText
i18nKey={'Select_source_image'}
style={{
textAlign: 'center',
fontSize: getFontXD(42),
fontWeight: 'bold',
color: '#1473E6',
}}
/>
<View style={styles.containerSelect}>
<AppText
i18nKey={'Select_source_image'}
style={{
textAlign: 'center',
fontSize: getFontXD(42),
fontWeight: 'bold',
color: '#1473E6',
}}
/>
<View style={styles.line}/>
<Block row space={'around'} center>
<TouchableOpacity style={styles.selectionImg} onPress={onCapture}>
<Image style={styles.imgIcon} source={R.images.iconCamera}/>
<View style={styles.line} />
<Block row space={'around'} center>
<TouchableOpacity style={styles.selectionImg} onPress={onCapture}>
<Image style={styles.imgIcon} source={R.images.iconCamera} />
<AppText i18nKey={'Take_photo'} style={styles.txtTitleBtn}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.selectionImg}
onPress={onchoosGalery}>
<Image style={styles.imgIcon} source={R.images.iconImg}/>
<AppText i18nKey={'Take_photo'} style={styles.txtTitleBtn} />
</TouchableOpacity>
<TouchableOpacity
style={styles.selectionImg}
onPress={onchoosGalery}>
<Image style={styles.imgIcon} source={R.images.iconImg} />
<AppText i18nKey={'Photo_library'} style={styles.txtTitleBtn}/>
</TouchableOpacity>
</Block>
</View>
</Modal>
</TouchableOpacity>
);
<AppText i18nKey={'Photo_library'} style={styles.txtTitleBtn} />
</TouchableOpacity>
</Block>
</View>
</Modal>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
width: WIDTHXD(350),
height: HEIGHTXD(280),
backgroundColor: R.colors.white,
borderRadius: 10,
borderWidth: 2,
borderColor: '#DBDBDB',
borderStyle: 'dashed',
justifyContent: 'center',
alignItems: 'center',
},
txt: {
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
paddingLeft: 10,
},
selectionImg: {
padding: 10,
justifyContent: 'center',
alignItems: 'center',
},
containerSelect: {
height: HEIGHTXD(520),
backgroundColor: 'white',
paddingTop: 10,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
line: {
height: 1,
backgroundColor: '#929292',
width: '100%',
marginTop: 5,
},
imgIcon: {
width: 40,
height: 40,
},
txtTitleBtn: {
textAlign: 'center',
fontSize: getFontXD(42),
color: '#1473E6',
},
imgAvatar: {
width: WIDTHXD(180),
height: WIDTHXD(180),
borderRadius: WIDTHXD(90),
},
containerImg: {
width: WIDTHXD(180),
height: WIDTHXD(180),
},
iconPicker: {
position: 'absolute',
bottom: 0,
right: 0,
},
container: {
width: WIDTHXD(350),
height: HEIGHTXD(280),
backgroundColor: R.colors.white,
borderRadius: 10,
borderWidth: 2,
borderColor: '#DBDBDB',
borderStyle: 'dashed',
justifyContent: 'center',
alignItems: 'center',
},
txt: {
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
paddingLeft: 10,
},
selectionImg: {
padding: 10,
justifyContent: 'center',
alignItems: 'center',
},
containerSelect: {
height: HEIGHTXD(520),
backgroundColor: 'white',
paddingTop: 10,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
line: {
height: 1,
backgroundColor: '#929292',
width: '100%',
marginTop: 5,
},
imgIcon: {
width: 40,
height: 40,
},
txtTitleBtn: {
textAlign: 'center',
fontSize: getFontXD(42),
color: '#1473E6',
},
imgAvatar: {
width: WIDTHXD(180),
height: WIDTHXD(180),
borderRadius: WIDTHXD(90),
},
containerImg: {
width: WIDTHXD(180),
height: WIDTHXD(180),
},
iconPicker: {
position: 'absolute',
bottom: 0,
right: 0,
},
});
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {
saveUserToRedux,
showLoading,
hideLoading,
saveUserToRedux,
showLoading,
hideLoading,
})(PickerImg);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment