update edit profile

reduxStore/actions/cerrentUserAction.js

+import app from '../../firebase';
+
 export const GET_CURRENT_USER = 'GET_CURRENT_USER';
 
 export const getCurrentUserAction = (displayName, email, emailVerified, phoneNumber, uid, photoURL) => ({
@@ -18,18 +20,19 @@ export const getCurrentUser = user => async dispatch => {
 
 export const updateUser = userData => async (dispatch, getState) => {
 	const { currentUserReducer } = getState();
-	const { displayName, email, emailVerified, uid, phoneNumber, photoURL } = currentUserReducer;
+	const { email, emailVerified, uid, photoURL } = currentUserReducer;
 
 	try {
-		await user.updateProfile({
-			displayName: `${userData.firstName} ${userData.lastName}`,
-			phoneNumber: userData.phoneNumber,
-		});
-
 		const newDisplayName = `${userData.firstName} ${userData.lastName}`;
 		const newPhoneNumber = userData.phoneNumber;
 
-		dispatch(getCurrentUserAction(newDisplayName, email, emailVerified, uid, newPhoneNumber, photoURL));
+		const user = app.auth().currentUser;
+		await user.updateProfile({
+			displayName: newDisplayName,
+			phoneNumber: newPhoneNumber,
+		});
+
+		dispatch(getCurrentUserAction(newDisplayName, email, emailVerified, newPhoneNumber, uid, photoURL));
 	} catch (error) {
 		console.log('Update user failed!', error);
 	}

screens/Private/ProfileScreen/EditProfileScreen.js

@@ -24,11 +24,15 @@ class EditProfileScreen extends React.Component {
 
 	state = {
 		confirmModal: false,
-		profileImg: this.props.profileImg,
-		firstName: this.props.firstName,
-		lastName: this.props.lastName,
+		photoURL: this.props.photoURL,
+		firstName: '',
+		lastName: '',
 		phoneNumber: this.props.phoneNumber,
 	};
+	componentDidMount() {
+		const splitName = this.props.displayName ? this.props.displayName.split(' ') : null;
+		this.setState({ firstName: splitName[0], lastName: splitName[1] });
+	}
 	toggleModal = value => {
 		this.setState({ confirmModal: value });
 	};
@@ -41,7 +45,7 @@ class EditProfileScreen extends React.Component {
 	};
 
 	render() {
-		const { profileImg, firstName, lastName, phoneNumber, confirmModal } = this.state;
+		const { photoURL, firstName, lastName, phoneNumber, confirmModal } = this.state;
 		return (
 			<View style={theme.container}>
 				<Text style={[theme.normalText, theme.textDark, theme.mt2, { marginLeft: 20 }]}>Edit Profile</Text>
@@ -131,9 +135,8 @@ const styles = StyleSheet.create({
 const mapStateToProps = state => ({
 	email: state.currentUserReducer.email,
 	phoneNumber: state.currentUserReducer.phoneNumber,
-	firstName: state.currentUserReducer.firstName,
-	lastName: state.currentUserReducer.lastName,
-	profileImg: state.currentUserReducer.profileImg,
+	displayName: state.currentUserReducer.displayName,
+	photoURL: state.currentUserReducer.photoURL,
 });
 
 const mapDispatchToProps = {

screens/Private/ProfileScreen/ProfileScreen.js

@@ -32,12 +32,12 @@ class ProfileScreen extends React.Component {
 	});
 
 	render() {
-		const { email, phoneNumber, profileImg, displayName } = this.props;
+		const { email, phoneNumber, photoURL, displayName } = this.props;
 		return (
 			<View style={theme.container}>
 				<View style={styles.headerStyle}>
 					<Card style={styles.imgProfileContainer}>
-						{profileImg ? (
+						{photoURL ? (
 							<></>
 						) : (
 							<Icon
@@ -136,9 +136,8 @@ const styles = StyleSheet.create({
 const mapStateToProps = state => ({
 	email: state.currentUserReducer.email,
 	phoneNumber: state.currentUserReducer.phoneNumber,
-	firstName: state.currentUserReducer.firstName,
-	lastName: state.currentUserReducer.lastName,
-	profileImg: state.currentUserReducer.profileImg,
+	displayName: state.currentUserReducer.displayName,
+	photoURL: state.currentUserReducer.photoURL,
 });
 
 const mapDispatchToProps = {};