Skip to content

Commit

Permalink
fix(profile and api): fix scroll issue and adjust logmeal api key
Browse files Browse the repository at this point in the history
  • Loading branch information
@tranvantai2905
tranvantai2905 committed Dec 31, 2023
1 parent 96d9106 commit a34cbf3
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 84 deletions.
72 changes: 42 additions & 30 deletions src/Components/EditProfile/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { RootScreens } from '@/Screens';
import { Colors } from '@/Theme/Variables';
import { getUserProfile, updateUserProfile } from '@/api';
import { StackNavigationProp } from '@react-navigation/stack';
import { VStack } from 'native-base';
import { ScrollView, VStack } from 'native-base';
import React, { memo, useCallback, useEffect, useState } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, TextInput } from 'react-native';
import SvgUri from 'react-native-svg-uri';
Expand Down Expand Up @@ -63,25 +63,26 @@ const EditProfile: React.FC<EditProfileProps> = ({ navigation }) => {

return (
<View style={styles.container}>
<View style={styles.banner}>
<TouchableOpacity style={styles.iconBack} onPress={() => navigation.navigate(RootScreens.PROFILE)}>
<SvgUri
<ScrollView style={styles.scrollView}>
<View style={styles.banner}>
<TouchableOpacity style={styles.iconBack} onPress={() => navigation.navigate(RootScreens.PROFILE)}>
<SvgUri
source={require('../../../assets/arrow-left.svg')}
/>
</TouchableOpacity>
<Text style={styles.textTitle}>Edit Profile</Text>
<View style={styles.profileLogo}>
<Image
</TouchableOpacity>
<Text style={styles.textTitle}>Edit Profile</Text>
<View style={styles.profileLogo}>
<Image
source={require('../../../assets/profile_logo.png')}
/>
</View>
</View>
</View>
{/* Profile */}
<VStack style={{ paddingHorizontal: 20, marginTop: 100 }}>
<VStack style={{ gap: 20 }}>
<VStack style={{ gap: 10 }}>
<Text style={styles.textTitleInfo}>Name: </Text>
<TextInput
{/* Profile */}
<VStack style={{ paddingHorizontal: 20, marginTop: 100 }}>
<VStack style={{ gap: 20 }}>
<VStack style={{ gap: 10 }}>
<Text style={styles.textTitleInfo}>Name: </Text>
<TextInput
style={{
width: '100%',
height: 56,
Expand All @@ -95,10 +96,10 @@ const EditProfile: React.FC<EditProfileProps> = ({ navigation }) => {
value={name}
onChangeText={handleNameChange}
/>
</VStack>
<VStack style={{ gap: 10 }}>
<Text style={styles.textTitleInfo}>Email: </Text>
<TextInput
</VStack>
<VStack style={{ gap: 10 }}>
<Text style={styles.textTitleInfo}>Email: </Text>
<TextInput
style={{
width: '100%',
height: 56,
Expand All @@ -112,10 +113,10 @@ const EditProfile: React.FC<EditProfileProps> = ({ navigation }) => {
value={email}
onChangeText={handleEmailChange}
/>
</VStack>
<VStack style={{ gap: 10 }}>
<Text style={styles.textTitleInfo}>Phone: </Text>
<TextInput
</VStack>
<VStack style={{ gap: 10 }}>
<Text style={styles.textTitleInfo}>Phone: </Text>
<TextInput
style={{
width: '100%',
height: 56,
Expand All @@ -129,21 +130,21 @@ const EditProfile: React.FC<EditProfileProps> = ({ navigation }) => {
value={phone}
onChangeText={handlePhoneChange}
/>
</VStack>
</VStack>

<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
<BaseButton
<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', marginBottom:40}}>
<BaseButton
buttonText="Update"
buttonColor={Colors.PRIMARY}
buttonTextColor="white"
onPress={handleUpdateUserProfile}
width={250}
marginTop={0}
/>
</View>
</View>
</VStack>
</VStack>
</VStack>
{isModalVisible && <BaseModal
{isModalVisible && <BaseModal
isModalVisible={isModalVisible}
onClose={() => setIsModalVisible(false)}
onPressButton={() => navigation?.navigate(RootScreens.PROFILE)}
Expand All @@ -152,6 +153,8 @@ const EditProfile: React.FC<EditProfileProps> = ({ navigation }) => {
you can see it on your profile"
buttonText="Back to profile"
/>}
</ScrollView>

</View>
);
};
Expand All @@ -164,7 +167,16 @@ const styles = StyleSheet.create({
backgroundColor: 'white',
display: 'flex',
flexDirection: 'column',
gap: 25
gap: 25,
},
scrollView: {
flex: 1,
backgroundColor: Colors.WHITE,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
// marginTop: -100,
marginBottom:100,
position: 'relative',
},
banner: {
height: 188,
Expand Down
116 changes: 63 additions & 53 deletions src/Components/Profile/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { Colors } from '@/Theme/Variables';
import { getUserProfile } from '@/api';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { StackNavigationProp } from '@react-navigation/stack';
import { Button, HStack, VStack } from 'native-base';
import { Button, HStack, ScrollView, VStack } from 'native-base';
import React, { memo, useCallback, useEffect, useState } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import SvgUri from 'react-native-svg-uri';
import BaseButton from '../BaseButton';
import { setUserId } from '@/Store/reducers';
Expand Down Expand Up @@ -51,76 +51,86 @@ const Profile:React.FC<ProfileProps> = ({ navigation }) => {
}

return (
<ScrollView style={styles.container}>
<View style={styles.banner}>
<Text style={styles.textTitle}>Profile</Text>
<View style={styles.profileLogo}>
<Image
<View style={styles.container}>
<ScrollView style={styles.scrollView}>
<View style={styles.banner}>
<Text style={styles.textTitle}>Profile</Text>
<View style={styles.profileLogo}>
<Image
source={require('../../../assets/profile_logo.png')}
/>
<Button onPress={() => navigation?.navigate(RootScreens.EDIT_PROFILE)} style={styles.buttonEdit}>Edit Profile</Button>
<Button onPress={() => navigation?.navigate(RootScreens.EDIT_PROFILE)} style={styles.buttonEdit}>Edit Profile</Button>
</View>
</View>
</View>
{/* Profile */}
<VStack style={{ paddingHorizontal: 20, marginTop: 100 }}>
<VStack style={{ gap: 5 }}>
<Text style={styles.textTitleInfo}>Information</Text>
<HStack style={{ alignItems: 'center' }}>
<Text style={styles.textTitleInfo}>Email: </Text>
<Text style={styles.textDetailInfo}>{userInfo?.email}</Text>
</HStack>
<HStack style={{ alignItems: 'center' }}>
<Text style={styles.textTitleInfo}>Name: </Text>
<Text style={styles.textDetailInfo}>{userInfo?.name || '???'}</Text>
</HStack>
<HStack style={{ alignItems: 'center' }}>
<Text style={styles.textTitleInfo}>Phone: </Text>
<Text style={styles.textDetailInfo}>{userInfo?.phone || '???'}</Text>
</HStack>
{/* Profile */}
<VStack style={{ paddingHorizontal: 20, marginTop: 120 }}>
<VStack style={{ gap: 5 }}>
<Text style={styles.textTitleInfo}>Information</Text>
<HStack style={{ alignItems: 'center' }}>
<Text style={styles.textTitleInfo}>Email: </Text>
<Text style={styles.textDetailInfo}>{userInfo?.email}</Text>
</HStack>
<HStack style={{ alignItems: 'center' }}>
<Text style={styles.textTitleInfo}>Name: </Text>
<Text style={styles.textDetailInfo}>{userInfo?.name || '???'}</Text>
</HStack>
<HStack style={{ alignItems: 'center' }}>
<Text style={styles.textTitleInfo}>Phone: </Text>
<Text style={styles.textDetailInfo}>{userInfo?.phone || '???'}</Text>
</HStack>
</VStack>
</VStack>
</VStack>

{/* Content */}
<VStack style={{ paddingHorizontal: 20, marginTop: 30 }}>
<VStack style={{ gap: 5 }}>
<Text style={styles.textTitleInfo}>Content</Text>
<HStack style={{ alignItems: 'center', gap: 4 }}>
<SvgUri source={require('../../../assets/heart.svg')} />
<Text style={styles.textDetailInfo}>Favourite Food</Text>
</HStack>
{/* Content */}
<VStack style={{ paddingHorizontal: 20, marginTop: 30 }}>
<VStack style={{ gap: 5 }}>
<Text style={styles.textTitleInfo}>Content</Text>
<HStack style={{ alignItems: 'center', gap: 4 }}>
<SvgUri source={require('../../../assets/heart.svg')} />
<Text style={styles.textDetailInfo}>Favourite Food</Text>
</HStack>
</VStack>
</VStack>
</VStack>

{/* Account */}
<VStack style={{ paddingHorizontal: 20, marginTop: 30 }}>
<VStack style={{ gap: 5 }}>
<Text style={styles.textTitleInfo}>Account</Text>
<TouchableOpacity
{/* Account */}
<VStack style={{ paddingHorizontal: 20, marginTop: 30, marginBottom:30 }}>
<VStack style={{ gap: 5 }}>
<Text style={styles.textTitleInfo}>Account</Text>
<TouchableOpacity
style={{ alignItems: 'center', display: 'flex', flexDirection: 'row', gap: 10 }}
onPress={() => navigation?.navigate(RootScreens.EDIT_PASSWORD)}
>
<SvgUri source={require('../../../assets/lock.svg')} />
<Text style={styles.textDetailInfo}>Change password</Text>
</TouchableOpacity>
<TouchableOpacity style={{ alignItems: 'center', display: 'flex', flexDirection: 'row', gap: 10 }} onPress={handleLogout}>
<SvgUri source={require('../../../assets/logout.svg')} />
<Text style={styles.textDetailInfo}>Logout</Text>
</TouchableOpacity>
<SvgUri source={require('../../../assets/lock.svg')} />
<Text style={styles.textDetailInfo}>Change password</Text>
</TouchableOpacity>
<TouchableOpacity style={{ alignItems: 'center', display: 'flex', flexDirection: 'row', gap: 10 }} onPress={handleLogout}>
<SvgUri source={require('../../../assets/logout.svg')} />
<Text style={styles.textDetailInfo}>Logout</Text>
</TouchableOpacity>
</VStack>
</VStack>
</VStack>
</ScrollView>
</ScrollView>
</View>

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%',
position: 'relative',
backgroundColor: 'white',
display: 'flex',
flexDirection: 'column',
gap: 25
backgroundColor: Colors.PRIMARY,
marginBottom:120,
},
scrollView: {
flex: 1,
backgroundColor: Colors.WHITE,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
position: 'relative',
paddingBottom:50,
},
banner: {
height: 188,
Expand Down
2 changes: 1 addition & 1 deletion src/api/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export const getListIngredients = async (formData: any) => {
language: 'eng',
},
headers: {
Authorization: `Bearer ${"b54fb85538b1962fe54e548accad163fae527851"}`,
Authorization: `Bearer ${logMealToken}`,
'Content-Type': 'multipart/form-data',
},
},
Expand Down

0 comments on commit a34cbf3

Please sign in to comment.