feat: refactor statistics screen

Route.tsx

@@ -28,6 +28,7 @@ import InHistoryScreen from './src/screens/InAppScreens/TravellersScreen/InHisto
 import UNMastersScreen from './src/screens/InAppScreens/TravellersScreen/UNMasters';
 import StatisticsScreen from './src/screens/InAppScreens/TravellersScreen/StatisticsScreen';
 import StatisticsListScreen from './src/screens/InAppScreens/TravellersScreen/StatisticsListScreen';
+import NomadsStatistics from './src/screens/InAppScreens/TravellersScreen/NomadsStatistics';
 
 import SeriesScreen from 'src/screens/InAppScreens/TravelsScreen/Series';
 
@@ -152,6 +153,10 @@ const Route = () => {
                     name={NAVIGATION_PAGES.STATISTICS_LIST_DATA}
                     component={StatisticsListScreen}
                   />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.NOMADS_STATISTICS}
+                    component={NomadsStatistics}
+                  />
                 </ScreenStack.Navigator>
               )}
             </BottomTab.Screen>

src/database/statisticsService/index.ts

@@ -106,6 +106,19 @@ interface StructuredData {
   [key: string]: List;
 }
 
+export type ListTypesArray =
+  | Type1[]
+  | Type2[]
+  | Type3[]
+  | Type4[]
+  | Type5[]
+  | Type6[]
+  | Type7[]
+  | Type8[]
+  | Type9[];
+
+export type ListType = Type1 | Type2 | Type3 | Type4 | Type5 | Type6 | Type7 | Type8 | Type9;
+
 export interface Statistic {
   data: {
     url1: string;
@@ -113,7 +126,7 @@ export interface Statistic {
     type: number;
     name: string;
     comment: string;
-    ranking: Type1[] | Type2[] | Type3[];
+    ranking: ListTypesArray;
   }[];
 }
 
@@ -123,24 +136,24 @@ export type StatisticType = {
   type: number;
   name: string;
   comment: string;
-  ranking: Type1[] | Type2[] | Type3[];
+  ranking: ListTypesArray;
 };
 
 export interface Type1 {
-  region_id: number;
   cnt: number;
-  region_name: string;
   country: string;
   flag: string;
+  region_id: number;
+  region_name: string;
 }
 
 export interface Type2 {
   cnt: number;
-  mega_id: number;
-  mega_name: string;
-  dare_name: string;
   dare_flag: string;
   dare_id: number;
+  dare_name: string;
+  mega_id: number;
+  mega_name: string;
 }
 
 export interface Type3 {
@@ -151,3 +164,51 @@ export interface Type3 {
   last_name: string;
   flag: string;
 }
+
+export interface Type4 {
+  cnt: number;
+  country: string;
+  flag: string;
+  mega_id: number;
+  megaregion: string;
+  region_id: number;
+  region_name: string;
+}
+
+export interface Type5 {
+  cnt: number;
+  flag: string;
+  region_id: number;
+  region_name: string;
+}
+
+export interface Type6 {
+  cnt: number;
+  country: string;
+  country_flag: string;
+  region: string;
+  region_flag: string;
+  region_id: number;
+}
+
+export interface Type7 {
+  cnt: number;
+  country_name: string;
+  flag: string;
+}
+
+export interface Type8 {
+  cnt: number;
+  country: string;
+  flag: string;
+  mega_id: number;
+  mega_name: string;
+}
+
+export interface Type9 {
+  flag: string;
+  nation: string;
+  score: string;
+  user_count: number;
+  visited_countries: number;
+}

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

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, FlatList, ScrollView } from 'react-native';
+import { Dropdown } from 'react-native-searchable-dropdown-kj';
+
+import { Header, Loading, PageWrapper } from '../../../../components';
+import { getStatistic, ListData, StatisticType } from '../../../../database/statisticsService';
+import { ModalStyles } from '../Components/styles';
+import { Colors } from '../../../../theme';
+import { getFontSize } from '../../../../utils';
+import { Image } from 'expo-image';
+import { API_HOST } from '../../../../constants';
+
+const NomadsStatistics = ({
+  route
+}: {
+  route: { params: { key: string; title: string; list?: ListData[] | undefined } };
+}) => {
+  const [data, setData] = useState([]);
+  const [selectedValue, setSelectedValue] = useState(route.params.sublist[0].list[0]);
+
+  const [statisticsData, setStatisticsData] = useState<null>();
+  function getDataByUrl(url1: string, url2: string | null) {
+    const data = getStatistic(url1, url2);
+    return JSON.parse(data as unknown as string) as unknown as StatisticType;
+  }
+
+  useEffect(() => {
+    route.params.sublist?.map((item, index) => {
+      item.list?.map((subitem, index) => {
+        data.push(subitem);
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    const dataStatistics = getStatistic(selectedValue.url1, selectedValue.url2);
+    const tempData = JSON.parse(dataStatistics as unknown as string) as unknown as StatisticType;
+    setStatisticsData(tempData);
+  }, [selectedValue]);
+
+  if (!selectedValue.url1) return <Loading />;
+  if (!statisticsData) return <Loading />;
+
+  const Item = (data: { name: string; flag: string; cnt: number | string; index: number }) => (
+    <View
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
+        flex: 1,
+        gap: 8
+      }}
+    >
+      <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
+        {data.index + 1}
+      </Text>
+      <Image
+        style={{ width: 36, height: 36, borderRadius: 18 }}
+        source={{ uri: API_HOST + '/img/flags_new/' + data.flag }}
+      />
+      <View
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}
+      >
+        <Text style={{ width: '75%', color: Colors.DARK_BLUE, fontWeight: '700' }}>
+          {data.name}
+        </Text>
+        <Text style={{ color: Colors.DARK_BLUE, fontWeight: '700' }}>{data.cnt}</Text>
+      </View>
+    </View>
+  );
+
+  console.log(statisticsData);
+
+  return (
+    <PageWrapper>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <Header label={route.params.title} />
+        <Dropdown
+          style={{
+            width: '100%',
+            height: 40,
+            backgroundColor: '#F9F9F9',
+            borderRadius: 4,
+            paddingHorizontal: 8
+          }}
+          placeholderStyle={ModalStyles.placeholderStyle}
+          selectedTextStyle={ModalStyles.selectedTextStyle}
+          data={data}
+          placeholder={'Select'}
+          onChange={(obj) => setSelectedValue(obj)}
+          value={selectedValue?.url1}
+          labelField="name"
+          valueField="url1"
+        />
+        <FlatList
+          data={statisticsData.ranking}
+          renderItem={({ item, index }) => (
+            <View style={{ marginTop: 5, marginBottom: 5 }}>
+              <Item
+                name={`${item.first_name} ${item.last_name}`}
+                flag={item.flag}
+                cnt={item.cnt}
+                index={index}
+              />
+            </View>
+          )}
+        />
+      </ScrollView>
+    </PageWrapper>
+  );
+};
+
+export default NomadsStatistics;

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

@@ -1,159 +1,196 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { FlatList, View, Text } from 'react-native';
 import { Image } from 'expo-image';
+import { useFocusEffect } from '@react-navigation/native';
 
 import { Header, Loading, PageWrapper } from '../../../../components';
-import {
-  getStatistic,
-  StatisticType,
-  Type2,
-  Type1,
-  Type3
-} from '../../../../database/statisticsService';
+import { getStatistic, StatisticType, ListType } from '../../../../database/statisticsService';
 import { API_HOST } from '../../../../constants';
 import { Colors } from '../../../../theme';
 import { getFontSize } from '../../../../utils';
+import {
+  isType1,
+  isType2,
+  isType3,
+  isType4,
+  isType5,
+  isType6,
+  isType7,
+  isType8,
+  isType9
+} from './temp';
 
 const StatisticsListScreen = ({ route }) => {
   const title = route.params.title;
   const url1 = route.params.url1;
+  const url2 = route.params.url2;
 
   const [isLoading, setIsLoading] = useState(true);
   const [statistic, setStatistic] = useState<StatisticType | null>(null);
 
-  useEffect(() => {
-    const data = getStatistic(url1);
+  useFocusEffect(
+    useCallback(() => {
+      function fetchStatistic() {
+        const data = getStatistic(url1, url2);
 
-    if (!data) return;
+        if (!data) return;
 
-    setStatistic(JSON.parse(data as unknown as string) as unknown as StatisticType);
-    setIsLoading(false);
-  }, []);
+        setStatistic(JSON.parse(data as unknown as string) as unknown as StatisticType);
+        setIsLoading(false);
+      }
+
+      fetchStatistic();
+    }, [url1])
+  );
 
   if (isLoading) return <Loading />;
   if (!statistic) return null;
 
-  console.log(statistic);
+  const Item = (data: { name: string; flag: string; cnt: number | string; index: number }) => (
+    <View
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
+        flex: 1,
+        gap: 8
+      }}
+    >
+      <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
+        {data.index + 1}
+      </Text>
+      <Image
+        style={{ width: 36, height: 36, borderRadius: 18 }}
+        source={{ uri: API_HOST + '/img/flags_new/' + data.flag }}
+      />
+      <View
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}
+      >
+        <Text style={{ width: '75%', color: Colors.DARK_BLUE, fontWeight: '700' }}>
+          {data.name}
+        </Text>
+        <Text style={{ color: Colors.DARK_BLUE, fontWeight: '700' }}>{data.cnt}</Text>
+      </View>
+    </View>
+  );
 
-  const renderItem = ({ item, index }: { index: number; item: Type1 | Type2 | Type3 }) => {
-    if ('region_id' in item) {
+  const renderItem = ({ item, index }: { index: number; item: ListType }) => {
+    if (isType1(item) || isType4(item) || isType5(item)) {
       return (
-        <View
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'row',
-            flex: 1,
-            gap: 8
-          }}
-        >
-          <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
-            {index + 1}
-          </Text>
-          <Image
-            style={{ width: 36, height: 36, borderRadius: 18 }}
-            source={{ uri: API_HOST + '/img/flags_new/' + (item.flag ?? item.region_flag) }}
-          />
-          <View
-            style={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            <Text style={{ width: '75%', color: Colors.DARK_BLUE, fontWeight: '700' }}>
-              {item.region_name ?? item.region}
-            </Text>
-            <Text style={{ color: Colors.DARK_BLUE, fontWeight: '700' }}>{item.cnt}</Text>
-          </View>
-        </View>
+        <>
+          {'megaregion' in item && (
+            <View>
+              {item.megaregion !== statistic.ranking[index - 1]?.megaregion ? (
+                <Text
+                  style={{
+                    color: Colors.DARK_BLUE,
+                    fontSize: getFontSize(14),
+                    fontWeight: '700',
+                    textAlign: 'center',
+                    marginTop: 10,
+                    marginBottom: 15
+                  }}
+                >
+                  {item.megaregion as string}
+                </Text>
+              ) : null}
+            </View>
+          )}
+          <Item cnt={item.cnt} flag={item.flag} index={index} name={item.region_name} />
+        </>
       );
-    } else if ('mega_id' in item) {
+    } else if (isType6(item)) {
       return (
-        <View
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'row',
-            flex: 1,
-            gap: 8
-          }}
-        >
-          <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
-            {index + 1}
-          </Text>
-          <Image
-            style={{ width: 36, height: 36, borderRadius: 18 }}
-            source={{ uri: API_HOST + '/img/flags_new/' + (item.dare_flag ?? item.flag) }}
-          />
-          <View
-            style={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            <Text style={{ width: '75%', color: Colors.DARK_BLUE, fontWeight: '700' }}>
-              {item.dare_name ?? item.country}
-            </Text>
-            <Text style={{ color: Colors.DARK_BLUE, fontWeight: '700' }}>{item.cnt}</Text>
+        <>
+          <View>
+            {item.country !== statistic.ranking[index - 1]?.country ? (
+              <Text
+                style={{
+                  color: Colors.DARK_BLUE,
+                  fontSize: getFontSize(14),
+                  fontWeight: '700',
+                  textAlign: 'center',
+                  marginTop: 10,
+                  marginBottom: 15
+                }}
+              >
+                {item.country}
+              </Text>
+            ) : null}
           </View>
-        </View>
+          <Item cnt={item.cnt} flag={item.region_flag} index={index} name={item.region} />
+        </>
       );
-    } else if ('user' in item) {
+    } else if (isType2(item)) {
       return (
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-          <Text>
-            {item.first_name} {item.last_name}
-          </Text>
-        </View>
+        <>
+          <View>
+            {item.mega_name !== statistic.ranking[index - 1]?.mega_name ? (
+              <Text
+                style={{
+                  color: Colors.DARK_BLUE,
+                  fontSize: getFontSize(14),
+                  fontWeight: '700',
+                  textAlign: 'center',
+                  marginTop: 10,
+                  marginBottom: 15
+                }}
+              >
+                {item.mega_name as string}
+              </Text>
+            ) : null}
+          </View>
+          <Item name={item.dare_name} flag={item.dare_flag} cnt={item.cnt} index={index} />
+        </>
       );
-    } else {
+    } else if (isType7(item)) {
+      return <Item name={item.country_name} flag={item.flag} cnt={item.cnt} index={index} />;
+    } else if (isType8(item)) {
       return (
-        <View
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'row',
-            flex: 1,
-            gap: 8
-          }}
-        >
-          <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
-            {index + 1}
-          </Text>
-          <Image
-            style={{ width: 36, height: 36, borderRadius: 18 }}
-            source={{ uri: API_HOST + '/img/flags_new/' + item.flag }}
-          />
-          <View
-            style={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
-            <Text style={{ width: '75%', color: Colors.DARK_BLUE, fontWeight: '700' }}>
-              {item.country_name ?? item.nation ?? item.item_name}
-            </Text>
-            <Text style={{ color: Colors.DARK_BLUE, fontWeight: '700' }}>
-              {item.cnt ?? item.score}
-            </Text>
+        <>
+          <View>
+            {item.mega_name !== statistic.ranking[index - 1]?.mega_name ? (
+              <Text
+                style={{
+                  color: Colors.DARK_BLUE,
+                  fontSize: getFontSize(14),
+                  fontWeight: '700',
+                  textAlign: 'center',
+                  marginTop: 10,
+                  marginBottom: 15
+                }}
+              >
+                {item.mega_name as string}
+              </Text>
+            ) : null}
+            <Item name={item.country} flag={item.flag} cnt={item.cnt} index={index} />
           </View>
-        </View>
+        </>
+      );
+    } else if (isType9(item)) {
+      return <Item name={item.nation} flag={item.flag} cnt={item.score} index={index} />;
+    } else
+      return (
+        <>
+          <Item name={item.nation} flag={item.flag} cnt={item.score} index={index} />
+        </>
       );
-    }
   };
 
   return (
     <PageWrapper>
       <Header label={title} />
+      {statistic.comment && (
+        <Text style={{ color: Colors.DARK_BLUE, textAlign: 'center', marginBottom: 15 }}>
+          {statistic.comment}
+        </Text>
+      )}
       <FlatList
         contentContainerStyle={{ gap: 10 }}
         horizontal={false}

src/screens/InAppScreens/TravellersScreen/StatisticsListScreen/temp.ts

@@ -0,0 +1,140 @@
+import {
+  Type1,
+  Type2,
+  Type3,
+  Type4,
+  Type5,
+  Type6,
+  Type7,
+  Type8,
+  Type9
+} from 'src/database/statisticsService';
+
+export function isType1(obj: any): obj is Type1 {
+  const length = Object.keys(obj).length;
+
+  if (length !== 5) {
+    return false;
+  }
+
+  return (
+    'cnt' in obj && 'country' in obj && 'flag' in obj && 'region_id' in obj && 'region_name' in obj
+  );
+}
+
+export function isType2(obj: any): obj is Type2 {
+  const length = Object.keys(obj).length;
+
+  if (length !== 6) {
+    return false;
+  }
+
+  return (
+    'cnt' in obj &&
+    'dare_flag' in obj &&
+    'dare_id' in obj &&
+    'dare_name' in obj &&
+    'mega_id' in obj &&
+    'mega_name' in obj
+  );
+}
+
+export function isType3(obj: any): obj is Type3 {
+  const length = Object.keys(obj).length;
+
+  if (length !== 6) {
+    return false;
+  }
+
+  return (
+    'year' in obj &&
+    'user' in obj &&
+    'cnt' in obj &&
+    'first_name' in obj &&
+    'last_name' in obj &&
+    'flag' in obj
+  );
+}
+
+export function isType4(obj: any): obj is Type4 {
+  const length = Object.keys(obj).length;
+
+  if (length !== 7) {
+    return false;
+  }
+
+  return (
+    'cnt' in obj &&
+    'country' in obj &&
+    'flag' in obj &&
+    'mega_id' in obj &&
+    'megaregion' in obj &&
+    'region_id' in obj &&
+    'region_name' in obj
+  );
+}
+
+export function isType5(obj: any): obj is Type5 {
+  const length = Object.keys(obj).length;
+
+  if (length !== 4) {
+    return false;
+  }
+
+  return 'cnt' in obj && 'flag' in obj && 'region_id' in obj && 'region_name' in obj;
+}
+
+export function isType6(obj: any): obj is Type6 {
+  const length = Object.keys(obj).length;
+
+  if (length !== 6) {
+    return false;
+  }
+
+  return (
+    'cnt' in obj &&
+    'country' in obj &&
+    'country_flag' in obj &&
+    'region' in obj &&
+    'region_flag' in obj &&
+    'region_id' in obj
+  );
+}
+
+export function isType7(obj: any): obj is Type7 {
+  const length = Object.keys(obj).length;
+
+  if (length !== 3) {
+    return false;
+  }
+
+  return 'cnt' in obj && 'country_name' in obj && 'flag' in obj;
+}
+
+export function isType8(obj: any): obj is Type8 {
+  const length = Object.keys(obj).length;
+
+  if (length !== 5) {
+    return false;
+  }
+
+  return (
+    'cnt' in obj && 'country' in obj && 'flag' in obj && 'mega_id' in obj && 'mega_name' in obj
+  );
+}
+
+export function isType9(obj: any): obj is Type9 {
+  const length = Object.keys(obj).length;
+
+  if (length !== 5) {
+    return false;
+  }
+
+  return (
+    'flag' in obj &&
+    'nation' in obj &&
+    'score' in obj &&
+    'user_count' in obj &&
+    'visited_countries' in obj
+  );
+}

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

@@ -2,11 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { getList, ListData } from '../../../../database/statisticsService';
 import { Header, Loading, PageWrapper } from '../../../../components';
 
-import { Text, TouchableOpacity, View } from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NAVIGATION_PAGES } from '../../../../types';
 import { Colors } from '../../../../theme';
 import ArrowIcon from '../../../../../assets/icons/mark-to-up.svg';
+import { getFontSize } from '../../../../utils';
 
 const StatisticsScreen = () => {
   const [index, setIndex] = useState(null);
@@ -34,207 +35,77 @@ const StatisticsScreen = () => {
   return (
     <>
       <PageWrapper>
-        <Header label={'Statistics'} />
-        <View style={{ gap: 20 }}>
-          {routes.map((route, i) => {
-            return (
-              <View>
-                <TouchableOpacity
-                  onPress={() => setIndex(index === i ? null : i)}
-                  style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}
-                >
-                  <Text
-                    style={[{ fontSize: 20, color: 'rgba(237, 147, 52, 1)', fontWeight: '700' }]}
+        <ScrollView showsVerticalScrollIndicator={false}>
+          <Header label={'Statistics'} />
+          <View style={{ gap: 20 }}>
+            {routes.map((route, i) => {
+              return (
+                <View>
+                  <TouchableOpacity
+                    onPress={() => {
+                      if (route.title === 'NOMADS STATISTICS')
+                        navigation.navigate(NAVIGATION_PAGES.NOMADS_STATISTICS, {
+                          ...route
+                        });
+                      else setIndex(index === i ? null : i);
+                    }}
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      justifyContent: 'space-between'
+                    }}
                   >
-                    {route.title}
-                  </Text>
-                  <View style={index === i ? { transform: 'rotate(180deg)' } : {}}>
-                    <ArrowIcon height={18} width={18} stroke={'#B7C6CB'} />
-                  </View>
-                </TouchableOpacity>
-                {index === i && (
-                  <View>
-                    {route.list?.map((item, index) => {
-                      return (
-                        <TouchableOpacity
-                          onPress={() =>
-                            navigation.navigate(NAVIGATION_PAGES.STATISTICS_LIST_DATA, {
-                              title: item.name,
-                              type: route.title,
-                              url1: item.url1
-                            })
-                          }
-                        >
-                          <Text
-                            style={{
-                              marginTop: 12,
-                              marginBottom: 5,
-                              marginLeft: 10,
-                              color: Colors.DARK_BLUE,
-                              fontWeight: '700'
-                            }}
+                    <Text
+                      style={[
+                        {
+                          fontSize: getFontSize(16),
+                          color: 'rgba(237, 147, 52, 1)',
+                          fontWeight: '700'
+                        }
+                      ]}
+                    >
+                      {route.title}
+                    </Text>
+                    <View style={index === i ? { transform: 'rotate(180deg)' } : {}}>
+                      <ArrowIcon height={18} width={18} stroke={'#B7C6CB'} />
+                    </View>
+                  </TouchableOpacity>
+                  {index === i && (
+                    <View>
+                      {route.list?.map((item, index) => {
+                        return (
+                          <TouchableOpacity
+                            onPress={() =>
+                              navigation.navigate(NAVIGATION_PAGES.STATISTICS_LIST_DATA, {
+                                title: item.name,
+                                type: route.title,
+                                url1: item.url1
+                              })
+                            }
                           >
-                            {item.name}
-                          </Text>
-                        </TouchableOpacity>
-                      );
-                    })}
-                  </View>
-                )}
-              </View>
-            );
-          })}
-        </View>
-        {/*<HorizontalTabView*/}
-        {/*  index={index}*/}
-        {/*  setIndex={setIndex}*/}
-        {/*  withMark={true}*/}
-        {/*  routes={routes}*/}
-        {/*  renderScene={({ route }: Data) => <></>}*/}
-        {/*  onDoubleClick={() => console.log('double click')}*/}
-        {/*/>*/}
+                            <Text
+                              style={{
+                                marginTop: 12,
+                                marginBottom: 5,
+                                marginLeft: 10,
+                                color: Colors.DARK_BLUE,
+                                fontWeight: '700'
+                              }}
+                            >
+                              {item.name}
+                            </Text>
+                          </TouchableOpacity>
+                        );
+                      })}
+                    </View>
+                  )}
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
       </PageWrapper>
     </>
   );
 };
-
-// const StatisticsList = React.memo(({ list }: { list: { name: string; url1: string }[] }) => {
-//   const [isLoading, setIsLoading] = useState(true);
-//   const [statistic, setStatistic] = useState<StatisticType | null>(null);
-//
-//   useEffect(() => {
-//     const data = getStatistic(list ? list[0]?.url1 : '');
-//
-//     if (!data) return;
-//
-//     setStatistic(JSON.parse(data as unknown as string) as unknown as StatisticType);
-//     setIsLoading(false);
-//   }, []);
-//
-//   if (isLoading) return <Loading />;
-//   if (!statistic) return null;
-//
-//   const renderItem = ({ item, index }: { index: number; item: Type1 | Type2 | Type3 }) => {
-//     if ('region_id' in item) {
-//       return (
-//         <View
-//           style={{
-//             display: 'flex',
-//             alignItems: 'center',
-//             flexDirection: 'row',
-//             flex: 1,
-//             gap: 8
-//           }}
-//         >
-//           <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
-//             {index + 1}
-//           </Text>
-//           <Image
-//             style={{ width: 36, height: 36, borderRadius: 18 }}
-//             source={{ uri: API_HOST + '/img/flags_new/' + item.flag }}
-//           />
-//           <View
-//             style={{
-//               flex: 1,
-//               display: 'flex',
-//               flexDirection: 'row',
-//               justifyContent: 'space-between',
-//               alignItems: 'center'
-//             }}
-//           >
-//             <Text style={{ width: '75%', color: Colors.DARK_BLUE, fontWeight: '700' }}>
-//               {item.region_name}
-//             </Text>
-//             <Text style={{ color: Colors.DARK_BLUE, fontWeight: '700' }}>{item.cnt}</Text>
-//           </View>
-//         </View>
-//       );
-//     } else if ('mega_id' in item) {
-//       return (
-//         <View
-//           style={{
-//             display: 'flex',
-//             alignItems: 'center',
-//             flexDirection: 'row',
-//             flex: 1,
-//             gap: 8
-//           }}
-//         >
-//           <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
-//             {index + 1}
-//           </Text>
-//           <Image
-//             style={{ width: 36, height: 36, borderRadius: 18 }}
-//             source={{ uri: API_HOST + '/img/flags_new/' + item.dare_flag }}
-//           />
-//           <View
-//             style={{
-//               flex: 1,
-//               display: 'flex',
-//               flexDirection: 'row',
-//               justifyContent: 'space-between',
-//               alignItems: 'center'
-//             }}
-//           >
-//             <Text style={{ width: '75%', color: Colors.DARK_BLUE, fontWeight: '700' }}>
-//               {item.dare_name}
-//             </Text>
-//             <Text style={{ color: Colors.DARK_BLUE, fontWeight: '700' }}>{item.cnt}</Text>
-//           </View>
-//         </View>
-//       );
-//     } else if ('user' in item) {
-//       return (
-//         <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-//           <Text>
-//             {item.first_name} {item.last_name}
-//           </Text>
-//         </View>
-//       );
-//     }
-//   };
-//
-//   return (
-//     <>
-//       <View
-//         style={{
-//           width: '100%',
-//           display: 'flex',
-//           justifyContent: 'center',
-//           alignItems: 'center',
-//           marginTop: 10,
-//           marginBottom: 10
-//         }}
-//       >
-//         <Text
-//           style={{
-//             color: Colors.DARK_BLUE,
-//             fontSize: getFontSize(16),
-//             fontWeight: '700',
-//             textAlign: 'center'
-//           }}
-//         >
-//           {statistic?.name}
-//         </Text>
-//       </View>
-//       <FlatList
-//         contentContainerStyle={{ gap: 10 }}
-//         horizontal={false}
-//         data={statistic.ranking}
-//         renderItem={renderItem}
-//         showsVerticalScrollIndicator={false}
-//       />
-//     </>
-//   );
-// });
-
-type Data = {
-  route: {
-    key: string;
-    title: string;
-    list: { name: string; url1: string }[];
-    sublist: [] | undefined;
-  };
-};
-
 export default StatisticsScreen;

src/types/navigation.ts

@@ -24,5 +24,6 @@ export enum NAVIGATION_PAGES {
   TRAVELS_TAB = 'inAppTravels',
   SERIES = 'inAppSeries',
   SERIES_ITEM = 'inAppSeriesItem',
-  STATISTICS_LIST_DATA = 'statisticsListData'
+  STATISTICS_LIST_DATA = 'statisticsListData',
+  NOMADS_STATISTICS = 'nomadsStatistics'
 }