index.tsx 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. import React, { FC, ReactNode, useState } from 'react';
  2. import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
  3. import { Image } from 'expo-image';
  4. import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
  5. import { CommonActions, NavigationProp, useNavigation } from '@react-navigation/native';
  6. import {
  7. type Score,
  8. type Series,
  9. type SocialData,
  10. usePostGetProfileInfoPublicQuery,
  11. usePostGetProfileInfoQuery
  12. } from '@api/user';
  13. import {
  14. BigText,
  15. Button,
  16. PageWrapper,
  17. Loading,
  18. AvatarWithInitials,
  19. Header
  20. } from '../../../components';
  21. import { Colors } from '../../../theme';
  22. import { styles } from './styles';
  23. import { ButtonVariants } from '../../../types/components';
  24. import { API_HOST } from '../../../constants';
  25. import { NAVIGATION_PAGES } from '../../../types';
  26. import { navigationOpts } from './navigation-opts';
  27. import { storage, StoreType } from '../../../storage';
  28. import { getFontSize, getYears } from '../../../utils';
  29. import IconFacebook from '../../../../assets/icons/facebook.svg';
  30. import IconInstagram from '../../../../assets/icons/instagram.svg';
  31. import IconTwitter from '../../../../assets/icons/x(twitter).svg';
  32. import IconYouTube from '../../../../assets/icons/youtube.svg';
  33. import IconGlobe from '../../../../assets/icons/bottom-navigation/globe.svg';
  34. import IconLink from '../../../../assets/icons/link.svg';
  35. import GearIcon from '../../../../assets/icons/gear.svg';
  36. const Tab = createMaterialTopTabNavigator();
  37. type Props = {
  38. navigation: NavigationProp<any>;
  39. route: any;
  40. };
  41. const ProfileScreen: FC<Props> = ({ navigation, route }) => {
  42. const isPublicView = route.name === NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW;
  43. const token = storage.get('token', StoreType.STRING) as string;
  44. if (!token) return <UnauthenticatedProfileScreen />;
  45. const { data, isFetching } = isPublicView
  46. ? usePostGetProfileInfoPublicQuery(route.params?.userId, true)
  47. : usePostGetProfileInfoQuery(token, true);
  48. if (!data || isFetching) return <Loading />;
  49. return (
  50. <PageWrapper>
  51. {isPublicView && <Header label="Profile" />}
  52. <View style={[styles.pageWrapper, isPublicView && { marginTop: 0 }]}>
  53. <View>
  54. {data.avatar ? (
  55. <Image
  56. style={{ borderRadius: 64 / 2, width: 64, height: 64 }}
  57. source={{ uri: API_HOST + data.avatar }}
  58. />
  59. ) : (
  60. <AvatarWithInitials
  61. text={`${data.first_name[0] ?? ''}${data.last_name[0] ?? ''}`}
  62. flag={API_HOST + data.homebase_flag}
  63. size={64}
  64. />
  65. )}
  66. </View>
  67. <View style={{ gap: 5, width: '75%' }}>
  68. <Text style={[styles.headerText, { fontSize: getFontSize(18), flex: 0 }]}>
  69. {data.first_name} {data.last_name}
  70. </Text>
  71. <View style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'row' }}>
  72. <View
  73. style={{
  74. display: 'flex',
  75. flexDirection: 'row',
  76. gap: 10,
  77. alignItems: 'center'
  78. }}
  79. >
  80. <Text
  81. style={{ color: Colors.DARK_BLUE, fontWeight: '600', fontSize: getFontSize(12) }}
  82. >
  83. Age: {getYears(data.date_of_birth)}
  84. </Text>
  85. <Image source={{ uri: API_HOST + data.homebase_flag }} style={styles.countryFlag} />
  86. {data.homebase2_flag && data.homebase2_flag !== data.homebase_flag ? (
  87. <Image
  88. source={{ uri: API_HOST + data.homebase2_flag }}
  89. style={[styles.countryFlag, { marginLeft: -15 }]}
  90. />
  91. ) : null}
  92. </View>
  93. {!isPublicView ? (
  94. <View>
  95. <TouchableOpacity onPress={() => navigation.navigate(NAVIGATION_PAGES.SETTINGS)}>
  96. <GearIcon fill={Colors.DARK_BLUE} />
  97. </TouchableOpacity>
  98. </View>
  99. ) : null}
  100. </View>
  101. </View>
  102. </View>
  103. <Tab.Navigator
  104. screenOptions={{
  105. ...navigationOpts,
  106. tabBarLabel: ({ children, color, focused }) => (
  107. <Text style={[styles.headerText, { color }]}>{children}</Text>
  108. )
  109. }}
  110. >
  111. <Tab.Screen name="Personal Info">
  112. {() => (
  113. <PersonalInfo
  114. data={{
  115. bio: data.bio,
  116. date_of_birth: data.date_of_birth,
  117. scores: data.scores,
  118. links: data.links,
  119. homebase: data.homebase_name,
  120. homebase2: data.homebase2_name,
  121. series: data.series
  122. }}
  123. />
  124. )}
  125. </Tab.Screen>
  126. <Tab.Screen name="Ranking">{() => <View></View>}</Tab.Screen>
  127. <Tab.Screen name="Photos">{() => <View></View>}</Tab.Screen>
  128. </Tab.Navigator>
  129. </PageWrapper>
  130. );
  131. };
  132. type PersonalInfoProps = {
  133. data: {
  134. bio: string;
  135. date_of_birth: string;
  136. scores: Score[];
  137. links: {
  138. f?: SocialData;
  139. t?: SocialData;
  140. i?: SocialData;
  141. y?: SocialData;
  142. www?: SocialData;
  143. other?: SocialData;
  144. };
  145. homebase: string;
  146. homebase2: string;
  147. series: Series[];
  148. };
  149. };
  150. const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
  151. const [showMoreSeries, setShowMoreSeries] = useState(false);
  152. return (
  153. <ScrollView
  154. showsVerticalScrollIndicator={false}
  155. contentContainerStyle={{ gap: 20 }}
  156. style={{ marginTop: 20 }}
  157. >
  158. <InfoItem inline={true} title={'RANKING'}>
  159. {data.scores?.map((data, index) => {
  160. if (!data.score) return null;
  161. return (
  162. <View
  163. key={index}
  164. style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center' }}
  165. >
  166. <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
  167. <Text style={[styles.titleText, { flex: 0 }]}>{data.name}</Text>
  168. </View>
  169. );
  170. })}
  171. </InfoItem>
  172. <InfoItem showMore={showMoreSeries} inline={true} title={'SERIES BADGES'}>
  173. {data.series?.slice(0, showMoreSeries ? data.series.length : 8).map((data, index) => (
  174. <View
  175. key={index}
  176. style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center' }}
  177. >
  178. <Image source={{ uri: API_HOST + data.icon_png }} style={{ width: 28, height: 28 }} />
  179. <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
  180. </View>
  181. ))}
  182. </InfoItem>
  183. {data.series?.length > 8 ? (
  184. <Button
  185. children={showMoreSeries ? 'Hide series' : 'Show more'}
  186. variant={ButtonVariants.TEXT}
  187. onPress={() => setShowMoreSeries(!showMoreSeries)}
  188. />
  189. ) : null}
  190. <View style={{ display: 'flex', flexDirection: 'row' }}>
  191. <Text style={styles.headerText}>DATE OF BIRTH</Text>
  192. <Text style={styles.titleText}>{new Date(data.date_of_birth).toDateString()}</Text>
  193. </View>
  194. <View style={{ display: 'flex', flexDirection: 'row' }}>
  195. <Text style={styles.headerText}>REGION OF ORIGIN</Text>
  196. <Text style={styles.titleText}>{data.homebase}</Text>
  197. </View>
  198. {data.homebase2 ? (
  199. <View style={{ display: 'flex', flexDirection: 'row' }}>
  200. <Text style={styles.headerText}>SECOND REGION</Text>
  201. <Text style={styles.titleText}>{data.homebase2}</Text>
  202. </View>
  203. ) : null}
  204. <InfoItem title={'BIO'}>
  205. <Text style={[styles.titleText, { flex: 0 }]}>{data.bio}</Text>
  206. </InfoItem>
  207. <InfoItem title={'SOCIAL LINKS'}>
  208. <View style={{ display: 'flex', flexDirection: 'row', gap: 15, alignItems: 'center' }}>
  209. {data.links?.f?.link ? <IconFacebook fill={Colors.DARK_BLUE} /> : null}
  210. {data.links?.i?.link ? <IconInstagram fill={Colors.DARK_BLUE} /> : null}
  211. {data.links?.t?.link ? <IconTwitter fill={Colors.DARK_BLUE} /> : null}
  212. {data.links?.y?.link ? <IconYouTube fill={Colors.DARK_BLUE} /> : null}
  213. {data.links?.www?.link ? <IconGlobe fill={Colors.DARK_BLUE} /> : null}
  214. {data.links?.other?.link ? <IconLink fill={Colors.DARK_BLUE} /> : null}
  215. </View>
  216. </InfoItem>
  217. </ScrollView>
  218. );
  219. };
  220. const InfoItem: FC<{
  221. title: string;
  222. inline?: boolean;
  223. children: ReactNode;
  224. showMore?: boolean;
  225. }> = ({ title, inline, children, showMore }) => (
  226. <View>
  227. <Text style={[styles.headerText, { flex: 0 }]}>{title}</Text>
  228. <View
  229. style={[
  230. {
  231. display: 'flex',
  232. flexDirection: inline ? 'row' : 'column',
  233. justifyContent: 'space-evenly',
  234. marginTop: 10
  235. },
  236. showMore ? { flexWrap: 'wrap', gap: 8 } : {}
  237. ]}
  238. >
  239. {children}
  240. </View>
  241. </View>
  242. );
  243. const UnauthenticatedProfileScreen = () => {
  244. const navigation = useNavigation();
  245. return (
  246. <PageWrapper>
  247. <View style={{ marginTop: 15, display: 'flex', gap: 10 }}>
  248. <BigText children={'You are not logged in. Please login or register to access profile.'} />
  249. <Button
  250. onPress={() =>
  251. navigation.dispatch(
  252. CommonActions.reset({
  253. index: 1,
  254. routes: [{ name: NAVIGATION_PAGES.WELCOME }]
  255. })
  256. )
  257. }
  258. variant={ButtonVariants.FILL}
  259. >
  260. Go to login/register
  261. </Button>
  262. </View>
  263. </PageWrapper>
  264. );
  265. };
  266. export default ProfileScreen;