fix: master ranking icons | small fixes

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

@@ -10,6 +10,7 @@ import { Colors } from '../../../../theme';
 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';
@@ -23,7 +24,12 @@ type Props = {
   homebase2_flag: string;
   index: number;
   score: any[];
-  tbt_score: number;
+  tbt_score?: number;
+  tbt_rank?: number;
+  badge_tbt?: number;
+  badge_1281: number;
+  badge_un: number;
+  auth: number;
 };
 
 //TODO: Profile
@@ -36,12 +42,51 @@ export const Profile: FC<Props> = ({
   homebase2_flag,
   index,
   score,
-  tbt_score
+  tbt_score,
+  tbt_rank,
+  badge_tbt,
+  badge_1281,
+  badge_un,
+  auth
 }) => {
   const scoreNames = ['NM1301', 'DARE', 'UN', 'UN+', 'TCC', 'YES', 'SLOW', 'WHS', 'KYE'];
   const isOnline = getOnlineStatus();
-  const avatarBaseUri = isOnline ? `${API_HOST}/img/avatars/` : `${FileSystem.documentDirectory}avatars/`;
-  const flagBaseUri = isOnline ? `${API_HOST}/img/flags_new/` : `${FileSystem.documentDirectory}flags/`;
+  const avatarBaseUri = isOnline
+    ? `${API_HOST}/img/avatars/`
+    : `${FileSystem.documentDirectory}avatars/`;
+  const flagBaseUri = isOnline
+    ? `${API_HOST}/img/flags_new/`
+    : `${FileSystem.documentDirectory}flags/`;
+
+  const TBRanking = () => {
+    const colors = [
+      'rgba(237, 147, 52, 1)',
+      'rgba(128, 128, 128, 1)',
+      'rgba(211, 211, 211, 1)',
+      'rgba(187, 95, 5, 1)',
+      '#808080'
+    ];
+
+    const Rank = ({ color }: { color: string }) => (
+      <View style={[styles.badge, { backgroundColor: color }]}>
+        {badge_tbt ? <TBTIcon /> : <Text style={{ fontSize: getFontSize(12) }}>{tbt_score}</Text>}
+      </View>
+    );
+
+    return tbt_rank && tbt_rank >= 1 ? (
+      <View
+        style={{
+          display: 'flex',
+          marginTop: 10
+        }}
+      >
+        <View style={{ display: 'flex', alignItems: 'center' }}>
+          <Rank color={colors[tbt_rank - 1]} />
+          <Text style={[styles.titleText, { flex: 0 }]}>TBT # {tbt_rank}</Text>
+        </View>
+      </View>
+    ) : null;
+  };
 
   return (
     <>
@@ -53,7 +98,7 @@ export const Profile: FC<Props> = ({
           {avatar ? (
             <Image
               style={{ borderRadius: 24, width: 48, height: 48 }}
-              source={{uri: avatarBaseUri + avatar}}
+              source={{ uri: avatarBaseUri + avatar }}
             />
           ) : (
             <AvatarWithInitials
@@ -81,20 +126,17 @@ export const Profile: FC<Props> = ({
               >
                 Age: {date_of_birth}
               </Text>
-              <Image
-                source={{ uri: flagBaseUri + homebase_flag }}
-                style={styles.countryFlag}
-              />
-              {homebase2_flag ? (
+              <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: 10 }}>
-                <TickIcon />
-                <UNIcon />
-                <NMIcon />
+                {auth ? <TickIcon /> : null}
+                {badge_un ? <UNIcon /> : null}
+                {badge_1281 ? <NMIcon /> : null}
               </View>
             </View>
           </View>
@@ -109,21 +151,12 @@ export const Profile: FC<Props> = ({
           marginBottom: 15
         }}
       >
-        {/*TBT Score*/}
-        {/*<View*/}
-        {/*  style={{*/}
-        {/*    display: 'flex',*/}
-        {/*    marginTop: 10*/}
-        {/*  }}*/}
-        {/*>*/}
-        {/*  <View style={{ display: 'flex', alignItems: 'center' }}>*/}
-        {/*    <Text style={[styles.headerText, { flex: 0 }]}>Icon</Text>*/}
-        {/*    <Text style={[styles.titleText, { flex: 0 }]}>TBT #{tbt_score}</Text>*/}
-        {/*  </View>*/}
-        {/*</View>*/}
+        <TBRanking />
 
         {score.map((number, index) => {
           if (!number) return;
+          if (scoreNames[index] === 'YES' && number >= 10000) return;
+          if (scoreNames[index] === 'SLOW' && number >= 4500) return;
           return (
             <View
               style={{

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

@@ -26,5 +26,13 @@ export const styles = StyleSheet.create({
     color: Colors.DARK_BLUE,
     fontWeight: '600',
     fontSize: getFontSize(11)
+  },
+  badge: {
+    width: 36,
+    height: 14,
+    borderRadius: 7,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 });

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

@@ -37,6 +37,7 @@ const InHistoryScreen = () => {
         keyExtractor={(item) => item.user_id.toString()}
         renderItem={({ item, index }) => (
           <Profile
+            key={index}
             index={index}
             first_name={item.first_name}
             last_name={item.last_name}
@@ -56,6 +57,9 @@ const InHistoryScreen = () => {
               item.score_whs,
               item.score_kye
             ]}
+            auth={item.auth}
+            badge_1281={item.badge_1281}
+            badge_un={item.badge_un}
           />
         )}
         onEndReached={() => getFullRanking()}

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

@@ -37,6 +37,7 @@ const InMemoriamScreen = () => {
         keyExtractor={(item) => item.user_id.toString()}
         renderItem={({ item, index }) => (
           <Profile
+            key={index}
             index={index}
             first_name={item.first_name}
             last_name={item.last_name}
@@ -56,6 +57,11 @@ const InMemoriamScreen = () => {
               item.score_kye
             ]}
             tbt_score={item.score_tbt}
+            tbt_rank={item.rank_tbt}
+            badge_tbt={item.badge_tbt}
+            badge_1281={item.badge_1281}
+            badge_un={item.badge_un}
+            auth={item.auth}
           />
         )}
         onEndReached={() => getFullRanking()}

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

@@ -35,6 +35,7 @@ const LPIRankingScreen = () => {
         keyExtractor={(item) => item.user_id.toString()}
         renderItem={({ item, index }) => (
           <Profile
+            key={index}
             index={index}
             first_name={item.first_name}
             last_name={item.last_name}
@@ -54,6 +55,11 @@ const LPIRankingScreen = () => {
               item.score_kye
             ]}
             tbt_score={item.score_tbt}
+            tbt_rank={item.rank_tbt}
+            badge_tbt={item.badge_tbt}
+            badge_1281={item.badge_1281}
+            badge_un={item.badge_un}
+            auth={item.auth}
           />
         )}
         onEndReached={() => getFullRanking()}

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

@@ -37,6 +37,7 @@ const MasterRankingScreen = () => {
         keyExtractor={(item) => item.user_id.toString()}
         renderItem={({ item, index }) => (
           <Profile
+            key={index}
             index={index}
             first_name={item.first_name}
             last_name={item.last_name}
@@ -56,10 +57,15 @@ const MasterRankingScreen = () => {
               item.score_kye
             ]}
             tbt_score={item.score_tbt}
+            tbt_rank={item.rank_tbt}
+            badge_tbt={item.badge_tbt}
+            badge_1281={item.badge_1281}
+            badge_un={item.badge_un}
+            auth={item.auth}
           />
         )}
         onEndReached={() => getFullRanking()}
-        onEndReachedThreshold={1}
+        onEndReachedThreshold={0.5}
       />
     </PageWrapper>
   );

src/screens/InAppScreens/TravellersScreen/index.tsx

@@ -66,8 +66,13 @@ const buttons: MenuButtonType[] = [
 const TravellersScreen = () => {
   return (
     <PageWrapper>
-      {buttons.map((button) => (
-        <MenuButton label={button.label} icon={button.icon} buttonFn={button.buttonFn} />
+      {buttons.map((button, index) => (
+        <MenuButton
+          label={button.label}
+          icon={button.icon}
+          buttonFn={button.buttonFn}
+          key={'ranking-button-' + index}
+        />
       ))}
     </PageWrapper>
   );