|
|
@@ -4,62 +4,39 @@ import { Image } from 'expo-image';
|
|
|
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
|
|
|
import { NavigationProp } from '@react-navigation/native';
|
|
|
|
|
|
+import { type Score, type Series, type SocialData, usePostGetProfileInfoQuery } from '@api/user';
|
|
|
+
|
|
|
import { PageWrapper } from '../../../components';
|
|
|
import { Colors } from '../../../theme';
|
|
|
import { styles } from './styles';
|
|
|
|
|
|
import { API_HOST } from '../../../constants';
|
|
|
|
|
|
-import { usePostGetProfileQuery } from '@api/user';
|
|
|
-
|
|
|
import { NAVIGATION_PAGES } from '../../../types';
|
|
|
import { navigationOpts } from './navigation-opts';
|
|
|
|
|
|
import { storage, StoreType } from '../../../storage';
|
|
|
|
|
|
-import PenIcon from '../../../../assets/icons/pen.svg';
|
|
|
-
|
|
|
import { getFontSize, getYears } from '../../../utils';
|
|
|
|
|
|
-const regions = [
|
|
|
- {
|
|
|
- count: 28,
|
|
|
- name: 'NM1301'
|
|
|
- },
|
|
|
- {
|
|
|
- count: 1,
|
|
|
- name: 'M@P'
|
|
|
- },
|
|
|
- {
|
|
|
- count: 13,
|
|
|
- name: 'UN'
|
|
|
- },
|
|
|
- {
|
|
|
- count: 14,
|
|
|
- name: 'UN+'
|
|
|
- },
|
|
|
- {
|
|
|
- count: 16,
|
|
|
- name: 'TCC'
|
|
|
- },
|
|
|
- {
|
|
|
- count: 3,
|
|
|
- name: 'WHS'
|
|
|
- }
|
|
|
-];
|
|
|
+import IconFacebook from '../../../../assets/icons/facebook.svg';
|
|
|
+import IconInstagram from '../../../../assets/icons/instagram.svg';
|
|
|
+import IconTwitter from '../../../../assets/icons/x(twitter).svg';
|
|
|
+import IconYouTube from '../../../../assets/icons/youtube.svg';
|
|
|
+import IconGlobe from '../../../../assets/icons/bottom-navigation/globe.svg';
|
|
|
+import IconLink from '../../../../assets/icons/link.svg';
|
|
|
+import GearIcon from '../../../../assets/icons/gear.svg';
|
|
|
|
|
|
const Tab = createMaterialTopTabNavigator();
|
|
|
|
|
|
-// TODO: refactor + connect with API
|
|
|
-
|
|
|
type Props = {
|
|
|
navigation: NavigationProp<any>;
|
|
|
};
|
|
|
|
|
|
const ProfileScreen: FC<Props> = ({ navigation }) => {
|
|
|
- const token = storage.get('token', StoreType.STRING);
|
|
|
+ const token = storage.get('token', StoreType.STRING) as string;
|
|
|
|
|
|
- const { data, error } = usePostGetProfileQuery(String(token), true);
|
|
|
+ const { data, error } = usePostGetProfileInfoQuery(token, true);
|
|
|
|
|
|
if (!data) return <Text>Loading</Text>;
|
|
|
|
|
|
@@ -69,48 +46,43 @@ const ProfileScreen: FC<Props> = ({ navigation }) => {
|
|
|
<View>
|
|
|
<Image
|
|
|
style={{ borderRadius: 64 / 2, width: 64, height: 64 }}
|
|
|
- source={{
|
|
|
- uri: API_HOST + '/img/avatars/' + data.avatar
|
|
|
- }}
|
|
|
+ source={{ uri: API_HOST + data.avatar }}
|
|
|
/>
|
|
|
</View>
|
|
|
- <View>
|
|
|
- <Text style={[styles.headerText, { fontSize: getFontSize(18) }]}>
|
|
|
+ <View style={{ gap: 5, width: '75%' }}>
|
|
|
+ <Text style={[styles.headerText, { fontSize: getFontSize(18), flex: 0 }]}>
|
|
|
{data.first_name} {data.last_name}
|
|
|
</Text>
|
|
|
- <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }}>
|
|
|
- <Image
|
|
|
- source={{
|
|
|
- uri: API_HOST + '/img/flags_new/' + data.homebase + '.png'
|
|
|
- }}
|
|
|
- style={styles.countryFlag}
|
|
|
- />
|
|
|
- <Image
|
|
|
- source={{
|
|
|
- uri: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Flag_of_Canada.png'
|
|
|
+ <View style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'row' }}>
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'row',
|
|
|
+ gap: 10,
|
|
|
+ alignItems: 'center'
|
|
|
}}
|
|
|
- style={[styles.countryFlag, { marginLeft: -15 }]}
|
|
|
- />
|
|
|
- <Text>Age: {getYears(data.date_of_birth)}</Text>
|
|
|
+ >
|
|
|
+ <Text
|
|
|
+ style={{ color: Colors.DARK_BLUE, fontWeight: '600', fontSize: getFontSize(12) }}
|
|
|
+ >
|
|
|
+ Age: {getYears(data.date_of_birth)}
|
|
|
+ </Text>
|
|
|
+ <Image source={{ uri: API_HOST + data.homebase_flag }} style={styles.countryFlag} />
|
|
|
+ {data.homebase2_flag ? (
|
|
|
+ <Image
|
|
|
+ source={{ uri: API_HOST + data.homebase2_flag }}
|
|
|
+ style={[styles.countryFlag, { marginLeft: -15 }]}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View>
|
|
|
+ <TouchableOpacity onPress={() => navigation.navigate(NAVIGATION_PAGES.SETTINGS)}>
|
|
|
+ <GearIcon fill={Colors.DARK_BLUE} />
|
|
|
+ </TouchableOpacity>
|
|
|
+ </View>
|
|
|
</View>
|
|
|
</View>
|
|
|
- <View>
|
|
|
- <TouchableOpacity
|
|
|
- style={{
|
|
|
- width: 40,
|
|
|
- height: 40,
|
|
|
- borderRadius: 40 / 2,
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: Colors.LIGHT_GRAY,
|
|
|
- display: 'flex',
|
|
|
- justifyContent: 'center',
|
|
|
- alignItems: 'center'
|
|
|
- }}
|
|
|
- onPress={() => navigation.navigate(NAVIGATION_PAGES.EDIT_PERSONAL_INFO)}
|
|
|
- >
|
|
|
- <PenIcon />
|
|
|
- </TouchableOpacity>
|
|
|
- </View>
|
|
|
</View>
|
|
|
<Tab.Navigator
|
|
|
screenOptions={{
|
|
|
@@ -123,10 +95,20 @@ const ProfileScreen: FC<Props> = ({ navigation }) => {
|
|
|
<Tab.Screen
|
|
|
name="Personal Info"
|
|
|
component={() => (
|
|
|
- <PersonalInfo data={{ bio: data.bio, date_of_birth: data.date_of_birth }} />
|
|
|
+ <PersonalInfo
|
|
|
+ data={{
|
|
|
+ bio: data.bio,
|
|
|
+ date_of_birth: data.date_of_birth,
|
|
|
+ scores: data.scores,
|
|
|
+ links: data.links,
|
|
|
+ homebase: data.homebase_name,
|
|
|
+ homebase2: data.homebase2_name,
|
|
|
+ series: data.series
|
|
|
+ }}
|
|
|
+ />
|
|
|
)}
|
|
|
/>
|
|
|
- <Tab.Screen name="Visited Regions" component={() => <Text>Visited Regions</Text>} />
|
|
|
+ <Tab.Screen name="Ranking" component={() => <Text>Visited Regions</Text>} />
|
|
|
<Tab.Screen name="Photos" component={() => <Text>Photos</Text>} />
|
|
|
</Tab.Navigator>
|
|
|
</PageWrapper>
|
|
|
@@ -137,97 +119,70 @@ type PersonalInfoProps = {
|
|
|
data: {
|
|
|
bio: string;
|
|
|
date_of_birth: string;
|
|
|
+ scores: Score[];
|
|
|
+ links: {
|
|
|
+ f?: SocialData;
|
|
|
+ t?: SocialData;
|
|
|
+ i?: SocialData;
|
|
|
+ y?: SocialData;
|
|
|
+ www?: SocialData;
|
|
|
+ other?: SocialData;
|
|
|
+ };
|
|
|
+ homebase: string;
|
|
|
+ homebase2: string;
|
|
|
+ series: Series[];
|
|
|
};
|
|
|
};
|
|
|
|
|
|
const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
|
|
|
return (
|
|
|
<View style={{ marginTop: 20, gap: 20 }}>
|
|
|
- <InfoItem inline={true} title={'Visited Regions'}>
|
|
|
- {regions.map((data) => (
|
|
|
- <View style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center' }}>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- fontFamily: 'redhat-700',
|
|
|
- color: Colors.DARK_BLUE,
|
|
|
- fontSize: getFontSize(14)
|
|
|
- }}
|
|
|
+ <InfoItem inline={true} title={'RANKING'}>
|
|
|
+ {data.scores?.map((data) => {
|
|
|
+ if (!data.score) return null;
|
|
|
+ return (
|
|
|
+ <View
|
|
|
+ style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center' }}
|
|
|
>
|
|
|
- {data.count}
|
|
|
- </Text>
|
|
|
- <Text style={{ color: 'rgba(62, 100, 113, 1)', fontSize: getFontSize(12) }}>
|
|
|
- {data.name}
|
|
|
- </Text>
|
|
|
+ <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
|
|
|
+ <Text style={[styles.titleText, { flex: 0 }]}>{data.name}</Text>
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </InfoItem>
|
|
|
+ <InfoItem inline={true} title={'SERIES BADGES'}>
|
|
|
+ {data.series.map((data) => (
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center' }}>
|
|
|
+ <Image source={{ uri: API_HOST + data.icon_png }} style={{ width: 28, height: 28 }} />
|
|
|
+ <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
|
|
|
</View>
|
|
|
))}
|
|
|
</InfoItem>
|
|
|
<View style={{ display: 'flex', flexDirection: 'row' }}>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- flex: 1,
|
|
|
- fontFamily: 'redhat-700',
|
|
|
- color: Colors.DARK_BLUE,
|
|
|
- fontSize: getFontSize(14)
|
|
|
- }}
|
|
|
- >
|
|
|
- Date of birth
|
|
|
- </Text>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- flex: 1,
|
|
|
- color: 'rgba(62, 100, 113, 1)',
|
|
|
- fontWeight: '400',
|
|
|
- fontSize: getFontSize(14)
|
|
|
- }}
|
|
|
- >
|
|
|
- {data.date_of_birth}
|
|
|
- </Text>
|
|
|
+ <Text style={styles.headerText}>DATE OF BIRTH</Text>
|
|
|
+ <Text style={styles.titleText}>{new Date(data.date_of_birth).toDateString()}</Text>
|
|
|
</View>
|
|
|
<View style={{ display: 'flex', flexDirection: 'row' }}>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- flex: 1,
|
|
|
- fontFamily: 'redhat-700',
|
|
|
- color: Colors.DARK_BLUE,
|
|
|
- fontSize: getFontSize(14)
|
|
|
- }}
|
|
|
- >
|
|
|
- Region of origin
|
|
|
- </Text>
|
|
|
- <Text
|
|
|
- style={{
|
|
|
- flex: 1,
|
|
|
- color: 'rgba(62, 100, 113, 1)',
|
|
|
- fontWeight: '400',
|
|
|
- fontSize: getFontSize(14)
|
|
|
- }}
|
|
|
- >
|
|
|
- Greece - Attica, Central and West (Athens, Lamia, Agrinio)
|
|
|
- </Text>
|
|
|
+ <Text style={styles.headerText}>REGION OF ORIGIN</Text>
|
|
|
+ <Text style={styles.titleText}>{data.homebase}</Text>
|
|
|
</View>
|
|
|
- <InfoItem title={'Bio'}>
|
|
|
- <Text>{data.bio}</Text>
|
|
|
+ {data.homebase2 ? (
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'row' }}>
|
|
|
+ <Text style={styles.headerText}>SECOND REGION</Text>
|
|
|
+ <Text style={styles.titleText}>{data.homebase2}</Text>
|
|
|
+ </View>
|
|
|
+ ) : null}
|
|
|
+ <InfoItem title={'BIO'}>
|
|
|
+ <Text style={[styles.titleText, { flex: 0 }]}>{data.bio}</Text>
|
|
|
</InfoItem>
|
|
|
- <InfoItem title={'Social links'}>
|
|
|
- <View style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
|
|
|
- <Image
|
|
|
- style={{ width: 20, height: 20 }}
|
|
|
- source={{
|
|
|
- uri: 'https://upload.wikimedia.org/wikipedia/commons/6/6c/Facebook_Logo_2023.png'
|
|
|
- }}
|
|
|
- />
|
|
|
- <Image
|
|
|
- style={{ width: 20, height: 20 }}
|
|
|
- source={{
|
|
|
- uri: 'https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png'
|
|
|
- }}
|
|
|
- />
|
|
|
- <Image
|
|
|
- style={{ width: 20, height: 20 }}
|
|
|
- source={{
|
|
|
- uri: 'https://w7.pngwing.com/pngs/208/269/png-transparent-youtube-play-button-computer-icons-youtube-youtube-logo-angle-rectangle-logo-thumbnail.png'
|
|
|
- }}
|
|
|
- />
|
|
|
+ <InfoItem title={'SOCIAL LINKS'}>
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'row', gap: 15, alignItems: 'center' }}>
|
|
|
+ {data.links.f?.link ? <IconFacebook fill={Colors.DARK_BLUE} /> : null}
|
|
|
+ {data.links.i?.link ? <IconInstagram fill={Colors.DARK_BLUE} /> : null}
|
|
|
+ {data.links.t?.link ? <IconTwitter fill={Colors.DARK_BLUE} /> : null}
|
|
|
+ {data.links.y?.link ? <IconYouTube fill={Colors.DARK_BLUE} /> : null}
|
|
|
+ {data.links.www?.link ? <IconGlobe fill={Colors.DARK_BLUE} /> : null}
|
|
|
+ {data.links.other?.link ? <IconLink fill={Colors.DARK_BLUE} /> : null}
|
|
|
</View>
|
|
|
</InfoItem>
|
|
|
</View>
|
|
|
@@ -240,7 +195,7 @@ const InfoItem: FC<{ title: string; inline?: boolean; children: ReactNode }> = (
|
|
|
children
|
|
|
}) => (
|
|
|
<View>
|
|
|
- <Text style={styles.headerText}>{title}</Text>
|
|
|
+ <Text style={[styles.headerText, { flex: 0 }]}>{title}</Text>
|
|
|
<View
|
|
|
style={{
|
|
|
display: 'flex',
|
Oleksandr Honcharov
