Skip to content

S
safetcut-app
Commit de65127d by Tonk
Options

add profile, remove device icon border, increase icon size

parent 0de89626
Showing with 221 additions and 6 deletions
AppNavigation.js
...@@ -39,11 +39,13 @@ import LoginScreen from './screens/Public/LoginScreen'; ...@@ -39,11 +39,13 @@ import LoginScreen from './screens/Public/LoginScreen';
import RegisterScreen from './screens/Public/RegisterScreen'; import RegisterScreen from './screens/Public/RegisterScreen';
import RegisterSuccess from './screens/Public/RegisterSuccess'; 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';
const defaultNavigationOptions = { const defaultNavigationOptions = {
headerStyle: { headerStyle: {
backgroundColor: color.primary, backgroundColor: color.primary,
borderColor: 'transparent', borderColor: 'transparent',
height: 80,
}, },
headerTintColor: '#fff', headerTintColor: '#fff',
headerTitleStyle: { headerTitleStyle: {
...@@ -65,6 +67,16 @@ const HomeStack = createStackNavigator( ...@@ -65,6 +67,16 @@ const HomeStack = createStackNavigator(
} }
); );
const ProfileStack = createStackNavigator(
{
Profile: ProfileScreen,
},
{
headerLayoutPreset: 'center',
defaultNavigationOptions,
}
);
const SmartMeterStack = createStackNavigator( const SmartMeterStack = createStackNavigator(
{ {
// SmartMeter: SmartMeterScreen, // SmartMeter: SmartMeterScreen,
...@@ -237,6 +249,7 @@ const WithBottomTabStack = createBottomTabNavigator( ...@@ -237,6 +249,7 @@ const WithBottomTabStack = createBottomTabNavigator(
const MainStack = createStackNavigator( const MainStack = createStackNavigator(
{ {
Home: HomeStack, Home: HomeStack,
Profile: ProfileStack,
WithBottomTab: WithBottomTabStack, WithBottomTab: WithBottomTabStack,
Camera: CameraStack, Camera: CameraStack,
McbLink: McbStack, McbLink: McbStack,
......
reduxStore/actions/cerrentUserAction.js
import { fireStore } from '../../firebase';
export const GET_CURRENT_USER = 'GET_CURRENT_USER'; export const GET_CURRENT_USER = 'GET_CURRENT_USER';
export const getCurrentUserAction = (displayName, email, emailVerified, phoneNumber, uid) => ({ export const getCurrentUserAction = (
displayName,
email,
emailVerified,
phoneNumber,
uid,
firstName,
lastName,
profileImg
) => ({
type: GET_CURRENT_USER, type: GET_CURRENT_USER,
displayName, displayName,
email, email,
emailVerified, emailVerified,
phoneNumber, phoneNumber,
uid, uid,
firstName,
lastName,
profileImg,
}); });
export const getCurrentUser = user => dispatch => { export const getCurrentUser = user => async dispatch => {
const { displayName, email, emailVerified, phoneNumber, uid } = user; const { displayName, email, emailVerified, phoneNumber, uid } = user;
dispatch(getCurrentUserAction(displayName, email, emailVerified, phoneNumber, uid)); const currentUser = await fireStore
.collection('user')
.doc(uid)
.get();
const currentUserData = await currentUser.data();
console.log('current user', currentUserData.firstname, currentUserData.surname);
dispatch(
getCurrentUserAction(
displayName,
email,
emailVerified,
phoneNumber,
uid,
currentUserData.firstname,
currentUserData.surname
)
);
}; };
reduxStore/reducers/currentUserReducer.js
...@@ -6,6 +6,9 @@ const initState = { ...@@ -6,6 +6,9 @@ const initState = {
emailVerified: '', emailVerified: '',
phoneNumber: '', phoneNumber: '',
uid: '', uid: '',
firstName: '',
lastName: '',
profileImg: '',
}; };
const currentUserReducer = (state = initState, action) => { const currentUserReducer = (state = initState, action) => {
...@@ -18,6 +21,9 @@ const currentUserReducer = (state = initState, action) => { ...@@ -18,6 +21,9 @@ const currentUserReducer = (state = initState, action) => {
emailVerified: action.emailVerified, emailVerified: action.emailVerified,
phoneNumber: action.phoneNumber, phoneNumber: action.phoneNumber,
uid: action.uid, uid: action.uid,
firstName: action.firstName,
lastName: action.lastName,
profileImg: action.profileImg,
}; };
default: default:
return state; return state;
......
screens/Private/ProfileScreen/ProfileScreen.js 0 → 100644
import React from 'react';
import { Text, Card, Icon, Button, ActionSheet } from 'native-base';
import { View, StyleSheet } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { theme, color } from '../../../constants/Styles';
import { connect } from 'react-redux';
import { hidden } from 'ansi-colors';
import { width } from '../../../constants/Layout';
import { isIphoneX } from '../../../utils/isPhoneX';
const BUTTONS = ['Logout', 'Cancel'];
const DESTRUCTIVE_INDEX = 0;
const CANCEL_INDEX = 1;
class ProfileScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Profile',
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.navigate('SmartMeter')} />
</HeaderButtons>
),
headerRight: (
<Icon
name="settings"
type="SimpleLineIcons"
style={{ color: color.white, fontSize: 20, marginRight: 15 }}
/>
),
headerStyle: styles.headerStyle,
});
render() {
const { email, phoneNumber, firstName, lastName, profileImg } = this.props;
return (
<View style={theme.container}>
<View style={styles.headerStyle2}>
<Card style={styles.imgProfileContainer}>
{profileImg ? (
<></>
) : (
<Icon
name="grin-tongue-wink"
type="FontAwesome5"
style={{ color: '#5b5b5b', fontSize: 65 }}
/>
)}
</Card>
</View>
<View style={styles.infoContainer}>
<Text style={theme.description}>Name</Text>
<Text style={styles.textInfo}>{firstName + ' ' + lastName || '-'}</Text>
<View style={styles.seperator} />
<Text style={theme.description}>Email</Text>
<Text style={styles.textInfo}>{email || '-'}</Text>
<View style={styles.seperator} />
<Text style={theme.description}>Phone No.</Text>
<Text style={styles.textInfo}>{phoneNumber || '-'}</Text>
</View>
<View
style={[styles.infoContainer, theme.mt2, theme.rowContainer, { justifyContent: 'space-between' }]}
>
<Text style={styles.textInfo}>Change Password</Text>
<Icon name="chevron-thin-right" type="Entypo" style={{ fontSize: 20, color: color.grey }} />
</View>
<Button
full
rounded
style={styles.logoutBtn}
onPress={() => {
ActionSheet.show(
{
options: BUTTONS,
cancelButtonIndex: CANCEL_INDEX,
destructiveButtonIndex: DESTRUCTIVE_INDEX,
title: 'Are you sure want to log out?',
},
async buttonIndex => {
if (buttonIndex === 0) {
this.props.navigation.navigate('Login');
await AsyncStorage.clear();
}
}
);
}}
>
<Text style={[theme.smallTitle, theme.textWhite]}>LOGOUT</Text>
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
headerStyle: {
backgroundColor: color.primary,
borderColor: 'transparent',
borderBottomWidth: 0,
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 0,
elevation: 0,
},
headerStyle2: {
backgroundColor: color.primary,
height: 100,
borderBottomLeftRadius: 60,
},
imgProfileContainer: {
borderRadius: 100,
width: 120,
height: 120,
alignSelf: 'center',
bottom: -35,
alignItems: 'center',
justifyContent: 'center',
},
infoContainer: {
backgroundColor: color.white,
marginTop: 90,
padding: 20,
},
textInfo: {
...theme.normalText,
...theme.textDark,
},
seperator: {
marginVertical: 10,
height: StyleSheet.hairlineWidth,
backgroundColor: '#d0d0d6',
},
logoutBtn: {
backgroundColor: color.primary,
width: width - 40,
alignSelf: 'center',
paddingVertical: 15,
bottom: isIphoneX() ? 45 : 10,
position: 'absolute',
},
});
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 = {};
export default connect(
mapStateToProps,
mapDispatchToProps
)(ProfileScreen);
screens/Private/SmartMeterScreen/McbLinkScreen.js
...@@ -443,11 +443,13 @@ const styles = StyleSheet.create({ ...@@ -443,11 +443,13 @@ const styles = StyleSheet.create({
marginLeft: 10, marginLeft: 10,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderWidth: 0,
borderColor: 'transparent',
}, },
electronicIcon: { electronicIcon: {
tintColor: color.primary, tintColor: color.primary,
width: 24, width: 30,
height: 24, height: 30,
resizeMode: 'contain', resizeMode: 'contain',
marginBottom: 10, marginBottom: 10,
}, },
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Text } from 'native-base'; import { Text, Icon } from 'native-base';
import { FlatList, View, StyleSheet, RefreshControl } from 'react-native'; import { FlatList, View, StyleSheet, RefreshControl } from 'react-native';
import { theme, color } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
import MeterCard from '../../../components/MeterCard'; import MeterCard from '../../../components/MeterCard';
...@@ -13,6 +13,14 @@ import { SearchBar } from 'react-native-elements'; ...@@ -13,6 +13,14 @@ import { SearchBar } from 'react-native-elements';
class SmartMeterScreen extends PureComponent { class SmartMeterScreen extends PureComponent {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
title: 'Home', title: 'Home',
headerLeft: (
<Icon
name="user"
type="AntDesign"
style={{ color: color.white, fontSize: 20, marginLeft: 15 }}
onPress={() => navigation.navigate('Profile')}
/>
),
headerRight: ( headerRight: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}> <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item <Item
......
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