feat: view profile on click | modal fixes | left ranking on filter select

Route.tsx

@@ -135,6 +135,10 @@ const Route = () => {
                     name={NAVIGATION_PAGES.UN_MASTERS}
                     component={UNMastersScreen}
                   />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
+                    component={ProfileScreen}
+                  />
                 </ScreenStack.Navigator>
               )}
             </BottomTab.Screen>

src/screens/InAppScreens/ProfileScreen/Profile/edit-personal-info.tsx

@@ -18,7 +18,15 @@ import { useGetRegionsWithFlagQuery } from '@api/regions';
 
 import { API_HOST } from '../../../../constants';
 
-import { AvatarPicker, BigText, Header, Input, PageWrapper, Button } from '../../../../components';
+import {
+  AvatarPicker,
+  BigText,
+  Header,
+  Input,
+  PageWrapper,
+  Button,
+  Loading
+} from '../../../../components';
 import { InputDatePicker } from '../../../../components/Calendar/InputDatePicker';
 import { ModalFlatList } from '../../../../components/FlatList/modal-flatlist';
 
@@ -31,7 +39,6 @@ import XIcon from '../../../../../assets/icons/x(twitter).svg';
 import YoutubeIcon from '../../../../../assets/icons/youtube.svg';
 import GlobeIcon from '../../../../../assets/icons/bottom-navigation/globe.svg';
 import LinkIcon from '../../../../../assets/icons/link.svg';
-import Loading from '../../../../components/Loading';
 
 const ProfileSchema = yup.object({
   username: yup.string().optional(),

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -1,12 +1,18 @@
-import React, { FC, ReactNode, useState } from 'react';
+import React, { FC, ReactNode, useEffect, useState } from 'react';
 import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { Image } from 'expo-image';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import { CommonActions, NavigationProp, useNavigation } from '@react-navigation/native';
 
-import { type Score, type Series, type SocialData, usePostGetProfileInfoQuery } from '@api/user';
+import {
+  type Score,
+  type Series,
+  type SocialData,
+  usePostGetProfileInfoPublicQuery,
+  usePostGetProfileInfoQuery
+} from '@api/user';
 
-import { BigText, Button, PageWrapper } from '../../../components';
+import { BigText, Button, PageWrapper, Loading } from '../../../components';
 import { Colors } from '../../../theme';
 import { styles } from './styles';
 import { ButtonVariants } from '../../../types/components';
@@ -27,22 +33,26 @@ 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';
-import Loading from '../../../components/Loading';
 
 const Tab = createMaterialTopTabNavigator();
 
 type Props = {
   navigation: NavigationProp<any>;
+  route: any;
 };
 
-const ProfileScreen: FC<Props> = ({ navigation }) => {
+const ProfileScreen: FC<Props> = ({ navigation, route }) => {
+  const isPublicView = route.name === NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW;
+
   const token = storage.get('token', StoreType.STRING) as string;
 
   if (!token) return <UnauthenticatedProfileScreen />;
 
-  const { data, error } = usePostGetProfileInfoQuery(token, true);
+  const { data, isFetching } = isPublicView
+    ? usePostGetProfileInfoPublicQuery(route.params?.userId, true)
+    : usePostGetProfileInfoQuery(token, true);
 
-  if (!data) return <Loading />;
+  if (!data || isFetching) return <Loading />;
 
   return (
     <PageWrapper>
@@ -80,11 +90,13 @@ const ProfileScreen: FC<Props> = ({ navigation }) => {
               ) : null}
             </View>
 
-            <View>
-              <TouchableOpacity onPress={() => navigation.navigate(NAVIGATION_PAGES.SETTINGS)}>
-                <GearIcon fill={Colors.DARK_BLUE} />
-              </TouchableOpacity>
-            </View>
+            {!isPublicView ? (
+              <View>
+                <TouchableOpacity onPress={() => navigation.navigate(NAVIGATION_PAGES.SETTINGS)}>
+                  <GearIcon fill={Colors.DARK_BLUE} />
+                </TouchableOpacity>
+              </View>
+            ) : null}
           </View>
         </View>
       </View>
@@ -112,8 +124,6 @@ const ProfileScreen: FC<Props> = ({ navigation }) => {
             />
           )}
         />
-        <Tab.Screen name="Ranking" component={() => <Text>Visited Regions</Text>} />
-        <Tab.Screen name="Photos" component={() => <Text>Photos</Text>} />
       </Tab.Navigator>
     </PageWrapper>
   );

src/screens/InAppScreens/TravellersScreen/Components/Profile.tsx

@@ -1,9 +1,15 @@
 import React, { FC } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 import { Image } from 'expo-image';
+import { useNavigation } from '@react-navigation/native';
+import * as FileSystem from 'expo-file-system';
 
-import { API_HOST } from '../../../../constants';
 import { styles } from './styles';
+
+import { getOnlineStatus } from 'src/storage';
+import { AvatarWithInitials } from 'src/components';
+
+import { API_HOST } from '../../../../constants';
 import { getFontSize } from '../../../../utils';
 import { Colors } from '../../../../theme';
 
@@ -11,10 +17,7 @@ import TickIcon from '../../../../../assets/icons/tick.svg';
 import UNIcon from '../../../../../assets/icons/un_icon.svg';
 import NMIcon from '../../../../../assets/icons/nm_icon.svg';
 import TBTIcon from '../../../../../assets/icons/tbt.svg';
-import { getOnlineStatus } from 'src/storage';
-import * as FileSystem from 'expo-file-system';
-import { AvatarWithInitials } from 'src/components';
-import { useNavigation } from '@react-navigation/native';
+
 import { NAVIGATION_PAGES } from '../../../../types';
 
 type Props = {
@@ -26,6 +29,7 @@ type Props = {
   homebase2_flag: string;
   index: number;
   score: any[];
+  active_score: number;
   tbt_score?: number;
   tbt_rank?: number;
   badge_tbt?: number;
@@ -45,6 +49,7 @@ export const Profile: FC<Props> = ({
   homebase2_flag,
   index,
   score,
+  active_score,
   tbt_score,
   tbt_rank,
   badge_tbt,
@@ -55,7 +60,7 @@ export const Profile: FC<Props> = ({
 }) => {
   const navigation = useNavigation();
 
-  const scoreNames = ['DARE', 'UN', 'UN+', 'TCC', 'YES', 'SLOW', 'WHS', 'KYE'];
+  const scoreNames = ['NM', 'DARE', 'UN', 'UN+', 'TCC', 'DEEP', 'YES', 'SLOW', 'WHS', 'KYE', 'TBT'];
   const isOnline = getOnlineStatus();
   const avatarBaseUri = isOnline
     ? `${API_HOST}/img/avatars/`
@@ -94,85 +99,130 @@ export const Profile: FC<Props> = ({
     ) : null;
   };
 
+  const EmptyScore = () => {
+    return (
+      <View
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          marginBottom: 10
+        }}
+      >
+        <Text style={[styles.scoreHeaderText, { flex: 0 }]}></Text>
+        <Text style={[styles.scoreNameText, { flex: 0 }]}></Text>
+      </View>
+    );
+  };
+
   return (
-    <TouchableOpacity onPress={() => navigation.navigate(NAVIGATION_PAGES.PROFILE_TAB, { userId })}>
-      <View style={{ alignItems: 'center', flexDirection: 'row', gap: 10, marginBottom: 5 }}>
-        <View style={{ paddingLeft: 20 }}>
-          <View>
-            <Text style={styles.rankText}>{index + 1}</Text>
+    <View>
+      <TouchableOpacity
+        onPress={() =>
+          navigation.navigate(...([NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW, { userId }] as never))
+        }
+      >
+        <View style={{ alignItems: 'center', flexDirection: 'row', gap: 10, marginBottom: 5 }}>
+          <View style={{ paddingLeft: 20 }}>
+            <View style={{ marginRight: 5 }}>
+              <Text style={styles.rankText}>{index + 1}</Text>
+            </View>
+            {avatar ? (
+              <Image
+                style={{ borderRadius: 24, width: 48, height: 48 }}
+                source={{ uri: avatarBaseUri + avatar }}
+              />
+            ) : (
+              <AvatarWithInitials
+                text={`${first_name[0] ?? ''}${last_name[0] ?? ''}`}
+                flag={flagBaseUri + homebase_flag}
+                size={48}
+              />
+            )}
           </View>
-          {avatar ? (
-            <Image
-              style={{ borderRadius: 24, width: 48, height: 48 }}
-              source={{ uri: avatarBaseUri + avatar }}
-            />
-          ) : (
-            <AvatarWithInitials
-              text={`${first_name[0]}${last_name[0]}`}
-              flag={flagBaseUri + homebase_flag}
-              size={48}
-            />
-          )}
-        </View>
-        <View style={{ gap: 5, width: '75%' }}>
-          <Text style={[styles.headerText, { fontSize: getFontSize(14), flex: 0 }]}>
-            {first_name} {last_name}
-          </Text>
-          <View style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'row' }}>
+          <View style={{ gap: 5, width: '75%' }}>
+            <Text style={[styles.headerText, { fontSize: getFontSize(14), flex: 0 }]}>
+              {first_name ?? ''} {last_name ?? ''}
+            </Text>
             <View
-              style={{
-                display: 'flex',
-                flexDirection: 'row',
-                gap: 10,
-                alignItems: 'center'
-              }}
+              style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'row' }}
             >
-              <Text
-                style={{ color: Colors.DARK_BLUE, fontWeight: '600', fontSize: getFontSize(12) }}
+              <View
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  gap: 10,
+                  alignItems: 'center'
+                }}
               >
-                Age: {date_of_birth}
-              </Text>
-              <Image source={{ uri: flagBaseUri + homebase_flag }} style={styles.countryFlag} />
-              {homebase2_flag && homebase2_flag !== homebase_flag ? (
-                <Image
-                  source={{ uri: flagBaseUri + homebase2_flag }}
-                  style={[styles.countryFlag, { marginLeft: -15 }]}
-                />
-              ) : null}
-              <View style={{ display: 'flex', flexDirection: 'row', gap: 3, marginLeft: 10 }}>
-                {auth ? <TickIcon /> : null}
-                {badge_un ? <UNIcon /> : null}
-                {badge_1281 ? <NMIcon /> : null}
+                <Text
+                  style={{ color: Colors.DARK_BLUE, fontWeight: '600', fontSize: getFontSize(12) }}
+                >
+                  Age: {date_of_birth ?? ''}
+                </Text>
+                <Image source={{ uri: flagBaseUri + homebase_flag }} style={styles.countryFlag} />
+                {homebase2_flag && homebase2_flag !== homebase_flag ? (
+                  <Image
+                    source={{ uri: flagBaseUri + homebase2_flag }}
+                    style={[styles.countryFlag, { marginLeft: -15 }]}
+                  />
+                ) : null}
+                <View style={{ display: 'flex', flexDirection: 'row', gap: 3, marginLeft: 10 }}>
+                  {auth ? <TickIcon /> : null}
+                  {badge_un ? <UNIcon /> : null}
+                  {badge_1281 ? <NMIcon /> : null}
+                </View>
               </View>
             </View>
           </View>
         </View>
-      </View>
-
+      </TouchableOpacity>
       <View style={styles.rankingWrapper}>
         <View style={styles.nmWrapper}>
           <Text style={{ fontSize: 20, color: Colors.DARK_BLUE, fontWeight: '700' }}>
-            {score[0]}
+            {score[active_score]}
+          </Text>
+          <Text style={{ fontSize: 14, color: Colors.DARK_BLUE, fontWeight: '500' }}>
+            {scoreNames[active_score]}
           </Text>
-          <Text style={{ fontSize: 14, color: Colors.DARK_BLUE, fontWeight: '500' }}>NM</Text>
         </View>
 
-        <View style={styles.seriesWrapper}>
+        <View style={styles.rankingScoresWrapper}>
           {score.slice(1).map((number, index) => {
-            if (!number) return;
-            if (scoreNames[index] === 'YES' && number >= 10000) return;
-            if (scoreNames[index] === 'SLOW' && number >= 4500) return;
+            if (!number) return <EmptyScore />;
+            if (scoreNames[index] === 'YES' && number >= 10000)
+              return (
+                <View
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexDirection: 'column',
+                    marginBottom: 10,
+                    width: 40,
+                    borderWidth: 1
+                  }}
+                >
+                  <Text style={[styles.scoreHeaderText, { flex: 0 }]}>-</Text>
+                  <Text style={[styles.scoreNameText, { flex: 0 }]}>YES</Text>
+                </View>
+              );
+            if (scoreNames[index] === 'SLOW' && number >= 4500) return <EmptyScore />;
+            if (index === active_score) return;
             return (
               <View
                 style={{
                   display: 'flex',
-                  marginTop: 10
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexDirection: 'column',
+                  marginBottom: 10,
+                  width: 40
                 }}
               >
-                <View style={{ display: 'flex', alignItems: 'center' }}>
-                  <Text style={[styles.headerText, { flex: 0 }]}>{number}</Text>
-                  <Text style={[styles.titleText, { flex: 0 }]}>{scoreNames[index]}</Text>
-                </View>
+                <Text style={[styles.scoreHeaderText, { flex: 0 }]}>{number}</Text>
+                <Text style={[styles.scoreNameText, { flex: 0 }]}>{scoreNames[index]}</Text>
               </View>
             );
           })}
@@ -182,6 +232,6 @@ export const Profile: FC<Props> = ({
           <TBRanking />
         </View>
       </View>
-    </TouchableOpacity>
+    </View>
   );
 };

src/screens/InAppScreens/TravellersScreen/Components/styles.ts

@@ -30,6 +30,20 @@ export const styles = StyleSheet.create({
     fontWeight: '600',
     fontSize: getFontSize(11)
   },
+  scoreHeaderText: {
+    flex: 1,
+    fontFamily: 'redhat-700',
+    color: Colors.DARK_BLUE,
+    fontSize: getFontSize(12),
+    textAlign: 'center'
+  },
+  scoreNameText: {
+    flex: 1,
+    color: Colors.DARK_BLUE,
+    fontWeight: '600',
+    fontSize: getFontSize(11),
+    textAlign: 'center'
+  },
   badge: {
     width: 36,
     height: 14,
@@ -47,14 +61,23 @@ export const styles = StyleSheet.create({
     columnGap: 20,
     flex: 1
   },
+  rankingScoresWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    columnGap: 5,
+    flex: 1
+  },
   nmWrapper: {
     paddingTop: 17,
     paddingBottom: 17,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    marginLeft: 25,
-    marginRight: 10
+    marginLeft: 15,
+    marginRight: 20
   },
   rankingWrapper: {
     display: 'flex',

src/screens/InAppScreens/TravellersScreen/MasterRankingScreen/index.tsx

@@ -23,6 +23,10 @@ import CloseIcon from '../../../../../assets/icons/close.svg';
 
 import type { Ranking } from '..';
 
+type RankingDropdown = { value: number; label: string };
+
+const RankingDropdownObject = { value: 1, label: 'NM' };
+
 const MasterRankingScreen = () => {
   const [masterRanking, setMasterRanking] = useState<Ranking[]>([]);
   const { mutateAsync } = fetchFullRanking();
@@ -30,10 +34,9 @@ const MasterRankingScreen = () => {
   const [isModalVisible, setModalVisible] = useState(false);
 
   const [valueAge, setValueAge] = useState<{ value: string; label: string } | null>();
-  const [valueRanking, setValueRanking] = useState<{ value: string; label: string } | null>({
-    value: '1',
-    label: '1301'
-  });
+  const [valueRanking, setValueRanking] = useState<RankingDropdown>(RankingDropdownObject);
+  const [confirmedValueRanking, setConfirmedValueRanking] =
+    useState<RankingDropdown>(RankingDropdownObject);
   const [valueCountry, setValueCountry] = useState(null);
 
   useFocusEffect(
@@ -63,8 +66,10 @@ const MasterRankingScreen = () => {
   };
 
   const applySort = () => {
+    setConfirmedValueRanking(valueRanking);
+
     switch (valueRanking?.label) {
-      case '1301':
+      case 'NM':
         setMasterRanking(masterRanking.sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm));
         break;
       case 'DARE':
@@ -108,126 +113,112 @@ const MasterRankingScreen = () => {
     }
   };
 
-  const ModalComponent = () => {
-    return (
-      <>
-        <Modal isVisible={isModalVisible}>
-          <View style={{ height: 270, backgroundColor: 'white', borderRadius: 15 }}>
-            <View style={{ marginLeft: '5%', marginRight: '5%', marginTop: '5%' }}>
-              <View style={{ alignSelf: 'flex-end' }}>
-                <TouchableOpacity onPress={() => setModalVisible(!isModalVisible)}>
-                  <CloseIcon />
-                </TouchableOpacity>
-              </View>
-              <View style={{ display: 'flex', alignItems: 'center' }}>
-                <Text style={{ color: Colors.DARK_BLUE, fontSize: 20, fontWeight: '700' }}>
-                  Filter
-                </Text>
-                <View style={styles.ageAndRankingWrapper}>
-                  <Dropdown
-                    style={styles.dropdown}
-                    placeholderStyle={styles.placeholderStyle}
-                    selectedTextStyle={styles.selectedTextStyle}
-                    data={dataAge}
-                    maxHeight={300}
-                    labelField="label"
-                    valueField="value"
-                    placeholder="Select age"
-                    searchPlaceholder="Search..."
-                    value={valueAge?.value}
-                    onChange={(item) => {
-                      setValueAge(item);
-                    }}
-                  />
-                  <Dropdown
-                    style={styles.dropdown}
-                    placeholderStyle={styles.placeholderStyle}
-                    selectedTextStyle={styles.selectedTextStyle}
-                    data={dataRanking}
-                    maxHeight={300}
-                    labelField="label"
-                    valueField="value"
-                    placeholder="Select ranking"
-                    searchPlaceholder="Search..."
-                    value={valueRanking?.value}
-                    onChange={(item) => {
-                      setValueRanking(item);
-                    }}
-                  />
-                </View>
+  return (
+    <PageWrapper>
+      <Modal isVisible={isModalVisible}>
+        <View style={{ height: 270, backgroundColor: 'white', borderRadius: 15 }}>
+          <View style={{ marginLeft: '5%', marginRight: '5%', marginTop: '5%' }}>
+            <View style={{ alignSelf: 'flex-end' }}>
+              <TouchableOpacity onPress={() => setModalVisible(!isModalVisible)}>
+                <CloseIcon />
+              </TouchableOpacity>
+            </View>
+            <View style={{ display: 'flex', alignItems: 'center' }}>
+              <Text style={{ color: Colors.DARK_BLUE, fontSize: 20, fontWeight: '700' }}>
+                Filter
+              </Text>
+              <View style={styles.ageAndRankingWrapper}>
                 <Dropdown
                   style={styles.dropdown}
                   placeholderStyle={styles.placeholderStyle}
                   selectedTextStyle={styles.selectedTextStyle}
-                  data={[]}
-                  maxHeight={300}
+                  data={dataAge}
                   labelField="label"
                   valueField="value"
-                  placeholder="Select country"
-                  searchPlaceholder="Search..."
+                  placeholder="Select age"
+                  value={valueAge?.value}
+                  onChange={(item) => {
+                    setValueAge(item);
+                  }}
+                />
+                <Dropdown
+                  style={styles.dropdown}
+                  placeholderStyle={styles.placeholderStyle}
+                  selectedTextStyle={styles.selectedTextStyle}
+                  data={dataRanking}
+                  labelField="label"
+                  valueField="value"
+                  placeholder="Select ranking"
                   value={valueRanking?.value}
                   onChange={(item) => {
-                    //todo: Country
+                    setValueRanking(item);
                   }}
                 />
-                <View style={styles.buttonsWrapper}>
-                  <Button
-                    variant={ButtonVariants.OPACITY}
-                    containerStyles={{
-                      borderColor: Colors.DARK_BLUE,
-                      backgroundColor: 'white',
-                      width: '45%'
-                    }}
-                    textStyles={{
-                      color: Colors.DARK_BLUE
-                    }}
-                    onPress={() => {
-                      setValueAge(null);
-                      setValueRanking(null);
-                    }}
-                    children={'Clear'}
-                  />
-                  <Button
-                    variant={ButtonVariants.FILL}
-                    containerStyles={{
-                      borderColor: Colors.DARK_BLUE,
-                      backgroundColor: Colors.DARK_BLUE,
-                      width: '45%'
-                    }}
-                    textStyles={{
-                      color: Colors.WHITE
-                    }}
-                    onPress={() => {
-                      setModalVisible(!isModalVisible);
-                      applySort();
-                    }}
-                    children={'Filter'}
-                  />
-                </View>
+              </View>
+              <Dropdown
+                style={[styles.dropdown, { width: '100%', marginTop: 15 }]}
+                placeholderStyle={styles.placeholderStyle}
+                selectedTextStyle={styles.selectedTextStyle}
+                data={[]}
+                labelField="label"
+                valueField="value"
+                placeholder="Select country"
+                value={valueRanking?.value}
+                onChange={(item) => {
+                  //todo: Country
+                }}
+              />
+              <View style={styles.buttonsWrapper}>
+                <Button
+                  variant={ButtonVariants.OPACITY}
+                  containerStyles={{
+                    borderColor: Colors.DARK_BLUE,
+                    backgroundColor: 'white',
+                    width: '45%'
+                  }}
+                  textStyles={{
+                    color: Colors.DARK_BLUE
+                  }}
+                  onPress={() => {
+                    setValueAge(null);
+                    setValueRanking(RankingDropdownObject);
+                  }}
+                  children={'Clear'}
+                />
+                <Button
+                  variant={ButtonVariants.FILL}
+                  containerStyles={{
+                    borderColor: Colors.DARK_BLUE,
+                    backgroundColor: Colors.DARK_BLUE,
+                    width: '45%'
+                  }}
+                  textStyles={{
+                    color: Colors.WHITE
+                  }}
+                  onPress={() => {
+                    setModalVisible(!isModalVisible);
+                    applySort();
+                  }}
+                  children={'Filter'}
+                />
               </View>
             </View>
           </View>
-        </Modal>
-      </>
-    );
-  };
+        </View>
+      </Modal>
+
+      <Header
+        label="Master Ranking"
+        rightElement={
+          <TouchableOpacity onPress={() => setModalVisible(!isModalVisible)}>
+            <FilterIcon />
+          </TouchableOpacity>
+        }
+      />
 
-  return (
-    <PageWrapper>
-      <ModalComponent />
       <FlatList
         showsVerticalScrollIndicator={false}
         data={masterRanking}
-        ListHeaderComponent={
-          <Header
-            label="Master Ranking"
-            rightElement={
-              <TouchableOpacity onPress={() => setModalVisible(!isModalVisible)}>
-                <FilterIcon />
-              </TouchableOpacity>
-            }
-          />
-        }
         keyExtractor={(item) => item.user_id.toString()}
         renderItem={({ item, index }) => (
           <Profile
@@ -246,12 +237,15 @@ const MasterRankingScreen = () => {
               item.score_un,
               item.score_unp,
               item.score_tcc,
+              item.score_deep,
               item.score_yes,
               item.score_slow,
               item.score_whs,
-              item.score_kye
+              item.score_kye,
+              item.rank_tbt
             ]}
             tbt_score={item.score_tbt}
+            active_score={confirmedValueRanking.value - 1}
             tbt_rank={item.rank_tbt}
             badge_tbt={item.badge_tbt}
             badge_1281={item.badge_1281}

src/screens/InAppScreens/TravellersScreen/MasterRankingScreen/values.ts

@@ -9,15 +9,15 @@ export const dataAge = [
 ];
 
 export const dataRanking = [
-  { label: '1301', value: '1' },
-  { label: 'DARE', value: '2' },
-  { label: 'UN', value: '3' },
-  { label: 'UN+', value: '4' },
-  { label: 'TCC', value: '5' },
-  { label: 'DEEP', value: '6' },
-  { label: 'YES', value: '7' },
-  { label: 'SLOW', value: '8' },
-  { label: 'WHS', value: '9' },
-  { label: 'KYE', value: '10' },
-  { label: 'TBT', value: '11' }
+  { label: 'NM', value: 1 },
+  { label: 'DARE', value: 2 },
+  { label: 'UN', value: 3 },
+  { label: 'UN+', value: 4 },
+  { label: 'TCC', value: 5 },
+  { label: 'DEEP', value: 6 },
+  { label: 'YES', value: 7 },
+  { label: 'SLOW', value: 8 },
+  { label: 'WHS', value: 9 },
+  { label: 'KYE', value: 10 },
+  { label: 'TBT', value: 11 }
 ];

src/types/navigation.ts

@@ -16,6 +16,7 @@ export enum NAVIGATION_PAGES {
   UN_MASTERS = 'inAppUNMaster',
   IN_APP_PROFILE = 'Profile',
   PROFILE_TAB = 'inAppProfile',
+  PUBLIC_PROFILE_VIEW = 'publicProfileView',
   EDIT_PERSONAL_INFO = 'editPersonalInfo',
   SETTINGS = 'settings',
   IN_APP_TRAVELS_TAB = 'Travels'