Skip to content

S
safetcut-app
Commit 2b78fbeb by Tonk
Options

.

parent 79ae6cb6
Showing with 183 additions and 5 deletions
AppNavigation.js
...@@ -41,6 +41,7 @@ import RegisterSuccess from './screens/Public/RegisterSuccess'; ...@@ -41,6 +41,7 @@ import RegisterSuccess from './screens/Public/RegisterSuccess';
import SendEmailScreen from './screens/Public/SendEmailScreen'; import SendEmailScreen from './screens/Public/SendEmailScreen';
import ProfileScreen from './screens/Private/ProfileScreen/ProfileScreen'; import ProfileScreen from './screens/Private/ProfileScreen/ProfileScreen';
import ChangePasswordScreen from './screens/Private/ProfileScreen/ChangePasswordScreen'; import ChangePasswordScreen from './screens/Private/ProfileScreen/ChangePasswordScreen';
import EditProfileScreen from './screens/Private/ProfileScreen/EditProfileScreen';
const defaultNavigationOptions = { const defaultNavigationOptions = {
headerStyle: [ headerStyle: [
...@@ -78,6 +79,7 @@ const ProfileStack = createStackNavigator( ...@@ -78,6 +79,7 @@ const ProfileStack = createStackNavigator(
{ {
Profile: ProfileScreen, Profile: ProfileScreen,
ChangePassword: ChangePasswordScreen, ChangePassword: ChangePasswordScreen,
EditProfile: EditProfileScreen,
}, },
{ {
headerLayoutPreset: 'center', headerLayoutPreset: 'center',
......
reduxStore/actions/cerrentUserAction.js
...@@ -24,24 +24,52 @@ export const getCurrentUserAction = ( ...@@ -24,24 +24,52 @@ export const getCurrentUserAction = (
}); });
export const getCurrentUser = user => async dispatch => { export const getCurrentUser = user => async dispatch => {
const { displayName, email, emailVerified, phoneNumber, uid } = user; const { displayName, email, emailVerified, uid } = user;
const currentUser = await fireStore const currentUser = await fireStore
.collection('user') .collection('user')
.doc(uid) .doc(uid)
.get(); .get();
const currentUserData = await currentUser.data(); const currentUserData = await currentUser.data();
console.log('current user', currentUserData.firstname, currentUserData.surname);
dispatch( dispatch(
getCurrentUserAction( getCurrentUserAction(
displayName, displayName,
email, email,
emailVerified, emailVerified,
phoneNumber, currentUserData.phoneNumber,
uid, uid,
currentUserData.firstname, currentUserData.firstName,
currentUserData.surname currentUserData.lastName
) )
); );
}; };
export const updateUser = userData => async (dispatch, getState) => {
const { currentUserReducer } = getState();
const { displayName, email, emailVerified, uid, profileImg } = currentUserReducer;
const ref = fireStore.collection('user').doc(uid);
const newUserData = {
firstName: userData.firstName,
lastName: userData.lastName,
phoneNumber: userData.phoneNumber,
};
try {
dispatch(
getCurrentUserAction(
displayName,
email,
emailVerified,
userData.phoneNumber,
uid,
userData.firstName,
userData.lastName,
profileImg
)
);
await ref.update(newUserData);
} catch (error) {
console.log('Update user failed!', error);
}
};
screens/Private/ProfileScreen/EditProfileScreen.js 0 → 100644
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { theme, color } from '../../../constants/Styles';
import { TextInput } from 'react-native-gesture-handler';
import { Button } from 'native-base';
import Modal from 'react-native-modalbox';
import { width, height } from '../../../constants/Layout';
import { updateUser } from '../../../reduxStore/actions/cerrentUserAction';
class EditProfileScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Profile',
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.goBack()} />
</HeaderButtons>
),
};
};
state = {
confirmModal: false,
profileImg: this.props.profileImg,
firstName: this.props.firstName,
lastName: this.props.lastName,
phoneNumber: this.props.phoneNumber,
};
toggleModal = value => {
this.setState({ confirmModal: value });
};
handleSave = () => {
const { firstName, lastName, phoneNumber } = this.state;
const data = { firstName: firstName, lastName: lastName, phoneNumber: phoneNumber };
this.toggleModal(false);
this.props.navigation.navigate('Profile');
this.props.updateUser(data);
};
render() {
const { profileImg, firstName, lastName, phoneNumber, confirmModal } = this.state;
return (
<View style={theme.container}>
<Text style={[theme.normalText, theme.textDark, theme.mt2, { marginLeft: 20 }]}>Edit Profile</Text>
<View style={{ backgroundColor: color.white, padding: 20, ...theme.mt2 }}>
<Text style={theme.description}>First name</Text>
<TextInput
value={firstName}
onChangeText={text => this.setState({ firstName: text })}
style={styles.inputStyle}
/>
<View style={styles.seperator} />
<Text style={theme.description}>Last name</Text>
<TextInput
value={lastName}
onChangeText={text => this.setState({ lastName: text })}
style={styles.inputStyle}
/>
<View style={styles.seperator} />
<Text style={theme.description}>Phone number</Text>
<TextInput
value={phoneNumber}
placeholder="e.g. 081-234-5678"
onChangeText={text => this.setState({ phoneNumber: text })}
style={styles.inputStyle}
keyboardType="phone-pad"
/>
</View>
<Button full style={styles.saveBtn} onPress={() => this.toggleModal(true)}>
<Text style={[theme.smallTitle, theme.textWhite]}>SAVE</Text>
</Button>
<Modal
isOpen={confirmModal}
backdropPressToClose={false}
swipeToClose={false}
coverScreen
style={styles.modalContainer}
>
<Text style={[theme.smallTitle, theme.textDark, theme.centerText, { marginHorizontal: 40 }]}>
Are you sure you want to edit your profile?
</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<Button transparent onPress={() => this.toggleModal(false)} style={styles.modalBtn}>
<Text style={[theme.smallTitle, { color: color.grey }]}>CANCEL</Text>
</Button>
<Button onPress={this.handleSave} style={[styles.modalBtn, { backgroundColor: color.primary }]}>
<Text style={[theme.smallTitle, theme.textWhite]}>SAVE</Text>
</Button>
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
seperator: {
marginVertical: 10,
height: StyleSheet.hairlineWidth,
backgroundColor: '#d0d0d6',
},
inputStyle: {
...theme.smallTitle,
...theme.mt1,
...theme.textDark,
},
saveBtn: {
backgroundColor: color.primary,
marginHorizontal: 20,
marginTop: 40,
borderRadius: 100,
},
modalContainer: {
width: width * 0.9,
height: height / 4,
borderRadius: 20,
alignItems: 'center',
justifyContent: 'space-evenly',
},
modalBtn: {
flex: 1,
marginHorizontal: 20,
justifyContent: 'center',
borderRadius: 100,
},
});
const mapStateToProps = state => ({
email: state.currentUserReducer.email,
phoneNumber: state.currentUserReducer.phoneNumber,
firstName: state.currentUserReducer.firstName,
lastName: state.currentUserReducer.lastName,
profileImg: state.currentUserReducer.profileImg,
});
const mapDispatchToProps = {
updateUser,
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(EditProfileScreen);
screens/Private/ProfileScreen/ProfileScreen.js
...@@ -25,9 +25,11 @@ class ProfileScreen extends React.Component { ...@@ -25,9 +25,11 @@ class ProfileScreen extends React.Component {
name="settings" name="settings"
type="SimpleLineIcons" type="SimpleLineIcons"
style={{ color: color.white, fontSize: 20, marginRight: 15 }} style={{ color: color.white, fontSize: 20, marginRight: 15 }}
onPress={() => navigation.navigate('EditProfile')}
/> />
), ),
}); });
render() { render() {
const { email, phoneNumber, firstName, lastName, profileImg } = this.props; const { email, phoneNumber, firstName, lastName, profileImg } = this.props;
return ( return (
......
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