feat: filter modal

src/modules/api/ranking/queries/index.ts

@@ -4,3 +4,4 @@ export * from './use-post-get-lpi';
 export * from './use-post-get-in-history';
 export * from './use-post-get-in-memoriam';
 export * from './use-post-get-un-masters';
+export * from './use-post-get-countries-ranking';

src/modules/api/ranking/queries/use-post-get-countries-ranking.tsx

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { rankingQueryKeys } from '../ranking-query-keys';
+import { type PostGetCountriesRanking, rankingApi } from '../ranking-api';
+
+import type { BaseAxiosError } from '../../../../types';
+
+export const usePostGetCountriesRanking = () => {
+  return useQuery<PostGetCountriesRanking, BaseAxiosError>({
+    queryKey: rankingQueryKeys.getCountriesRanking(),
+    queryFn: async () => {
+      const response = await rankingApi.getCountriesRanking();
+
+      return response.data;
+    }
+  });
+};

src/modules/api/ranking/ranking-api.tsx

@@ -94,7 +94,7 @@ export interface Masters {
 
 export interface YearUNType extends ResponseType {
   data: {
-    year: number,
+    year: number;
     masters: Masters[];
   }[];
 }
@@ -114,6 +114,10 @@ export interface PostGetUNType extends ResponseType {
   };
 }
 
+export interface PostGetCountriesRanking extends ResponseType {
+  data: { two: string; name: string }[];
+}
+
 export const rankingApi = {
   getLimitedRanking: () => request.postForm<PostGetRanking>(API.GET_LIMITED_RANKING),
   getFullRanking: () => request.postForm<PostGetRanking>(API.GET_FULL_RANKING),
@@ -122,5 +126,6 @@ export const rankingApi = {
   getInMemoriam: () => request.postForm<PostGetRanking>(API.GET_IN_MEMORIAM),
   getUNMastersTypes: () => request.postForm<PostGetUNTypes>(API.GET_UN_MASTERS_TYPES),
   getUNMastersType: (type: number) =>
-    request.postForm<PostGetUNType>(API.GET_UN_MASTERS_TYPE, { type })
+    request.postForm<PostGetUNType>(API.GET_UN_MASTERS_TYPE, { type }),
+  getCountriesRanking: () => request.get<PostGetCountriesRanking>(API.GET_COUNTRIES_RANKING)
 };

src/modules/api/ranking/ranking-query-keys.tsx

@@ -6,4 +6,5 @@ export const rankingQueryKeys = {
   getInMemoriam: () => ['getInMemoriam'] as const,
   getUNMastersTypes: () => ['getUNMastersTypes'] as const,
   getUNMastersType: (type: number) => ['getUNMastersType', { type }] as const,
+  getCountriesRanking: () => ['getCountriesRanking'] as const
 };

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

@@ -4,7 +4,7 @@ import { FlatList, Text, TouchableOpacity, View } from 'react-native';
 import { Dropdown } from 'react-native-searchable-dropdown-kj';
 import Modal from 'react-native-modal';
 
-import { fetchFullRanking } from '@api/ranking';
+import { fetchFullRanking, usePostGetCountriesRanking } from '@api/ranking';
 
 import { styles } from './styles';
 import { Colors } from '../../../../theme';
@@ -25,19 +25,25 @@ import type { Ranking } from '..';
 
 type RankingDropdown = { value: number; label: string };
 
-const RankingDropdownObject = { value: 1, label: 'NM' };
-
 const MasterRankingScreen = () => {
   const [masterRanking, setMasterRanking] = useState<Ranking[]>([]);
+  const [filteredData, setFilteredData] = useState<Ranking[]>([]);
   const { mutateAsync } = fetchFullRanking();
   const [isLoading, setIsLoading] = useState(true);
   const [isModalVisible, setModalVisible] = useState(false);
 
-  const [valueAge, setValueAge] = useState<{ value: string; label: string } | null>();
-  const [valueRanking, setValueRanking] = useState<RankingDropdown>(RankingDropdownObject);
-  const [confirmedValueRanking, setConfirmedValueRanking] =
-    useState<RankingDropdown>(RankingDropdownObject);
-  const [valueCountry, setValueCountry] = useState(null);
+  const [valueAge, setValueAge] = useState<{
+    value: string;
+    label: string;
+    min: number;
+    max: number;
+  } | null>();
+  const [valueCountry, setValueCountry] = useState<{ two: string; name: string } | null>();
+
+  const [valueRanking, setValueRanking] = useState<RankingDropdown | null>();
+  const [confirmedValueRanking, setConfirmedValueRanking] = useState<RankingDropdown | null>();
+
+  const { data: masterCountries } = usePostGetCountriesRanking();
 
   useFocusEffect(
     useCallback(() => {
@@ -68,50 +74,86 @@ const MasterRankingScreen = () => {
   const applySort = () => {
     setConfirmedValueRanking(valueRanking);
 
-    switch (valueRanking?.label) {
-      case 'NM':
-        setMasterRanking(masterRanking.sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm));
-        break;
-      case 'DARE':
-        setMasterRanking(
-          masterRanking.sort((a: Ranking, b: Ranking) => b.score_dare - a.score_dare)
-        );
-        break;
-      case 'UN':
-        setMasterRanking(masterRanking.sort((a: Ranking, b: Ranking) => b.score_un - a.score_un));
-        break;
-      case 'UN+':
-        setMasterRanking(masterRanking.sort((a: Ranking, b: Ranking) => b.score_unp - a.score_unp));
-        break;
-      case 'TCC':
-        setMasterRanking(masterRanking.sort((a: Ranking, b: Ranking) => b.score_tcc - a.score_tcc));
-        break;
-      case 'DEEP':
-        //TODO: Crash
-        setMasterRanking(
-          masterRanking.sort((a: Ranking, b: Ranking) => b.score_deep - a.score_deep)
-        );
-        break;
-      case 'YES':
-        const validUsers = masterRanking.filter((user) => user.score_yes !== 10000);
-        setMasterRanking(validUsers.sort((a: Ranking, b: Ranking) => a.score_yes - b.score_yes));
-        break;
-      case 'SLOW':
-        const valiidUsers = masterRanking.filter(
-          (user) => user.score_slow < 4500 && user.score_slow > 0
-        );
-        setMasterRanking(valiidUsers.sort((a: Ranking, b: Ranking) => b.score_slow - a.score_slow));
-        break;
-      case 'WHS':
-        setMasterRanking(masterRanking.sort((a: Ranking, b: Ranking) => b.score_whs - a.score_whs));
-        break;
-      case 'KYE':
-        setMasterRanking(masterRanking.sort((a: Ranking, b: Ranking) => b.score_kye - a.score_kye));
-        break;
-      case 'TBT':
-        setMasterRanking(masterRanking.sort((a: Ranking, b: Ranking) => b.score_tbt - a.score_tbt));
-        break;
+    let filteredLocalData = masterRanking;
+
+    if (valueAge) {
+      filteredLocalData = filteredLocalData.filter(
+        (user) => user.age >= valueAge.min && user.age <= valueAge.max
+      );
+    }
+
+    if (valueCountry) {
+      filteredLocalData = filteredLocalData.filter(
+        (user) => user.country === valueCountry.two.toLowerCase()
+      );
     }
+
+    if (valueRanking) {
+      switch (valueRanking?.label) {
+        case 'NM':
+          setFilteredData(
+            filteredLocalData.sort((a: Ranking, b: Ranking) => b.score_nm - a.score_nm)
+          );
+          break;
+        case 'DARE':
+          setFilteredData(
+            filteredLocalData.sort((a: Ranking, b: Ranking) => b.score_dare - a.score_dare)
+          );
+          break;
+        case 'UN':
+          setFilteredData(
+            filteredLocalData.sort((a: Ranking, b: Ranking) => b.score_un - a.score_un)
+          );
+          break;
+        case 'UN+':
+          setFilteredData(
+            filteredLocalData.sort((a: Ranking, b: Ranking) => b.score_unp - a.score_unp)
+          );
+          break;
+        case 'TCC':
+          setFilteredData(
+            filteredLocalData.sort((a: Ranking, b: Ranking) => b.score_tcc - a.score_tcc)
+          );
+          break;
+        case 'DEEP':
+          //TODO: Crash
+          setFilteredData(
+            filteredLocalData.sort((a: Ranking, b: Ranking) => b.score_deep - a.score_deep)
+          );
+          break;
+        case 'YES':
+          const validUsers = masterRanking.filter((user) => user.score_yes !== 10000);
+          setFilteredData(validUsers.sort((a: Ranking, b: Ranking) => a.score_yes - b.score_yes));
+          break;
+        case 'SLOW':
+          const valiidUsers = masterRanking.filter(
+            (user) => user.score_slow < 4500 && user.score_slow > 0
+          );
+          setFilteredData(
+            valiidUsers.sort((a: Ranking, b: Ranking) => b.score_slow - a.score_slow)
+          );
+          break;
+        case 'WHS':
+          setFilteredData(
+            filteredLocalData.sort((a: Ranking, b: Ranking) => b.score_whs - a.score_whs)
+          );
+          break;
+        case 'KYE':
+          setFilteredData(
+            filteredLocalData.sort((a: Ranking, b: Ranking) => b.score_kye - a.score_kye)
+          );
+          break;
+        case 'TBT':
+          setFilteredData(
+            filteredLocalData.sort((a: Ranking, b: Ranking) => b.score_tbt - a.score_tbt)
+          );
+          break;
+        default:
+          setFilteredData(filteredLocalData);
+      }
+    }
+
+    setFilteredData(filteredLocalData);
   };
 
   return (
@@ -134,6 +176,7 @@ const MasterRankingScreen = () => {
                   placeholderStyle={styles.placeholderStyle}
                   selectedTextStyle={styles.selectedTextStyle}
                   data={dataAge}
+                  disable={!getOnlineStatus()}
                   labelField="label"
                   valueField="value"
                   placeholder="Select age"
@@ -150,7 +193,7 @@ const MasterRankingScreen = () => {
                   labelField="label"
                   valueField="value"
                   placeholder="Select ranking"
-                  value={valueRanking.value}
+                  value={valueRanking?.value}
                   onChange={(item) => {
                     setValueRanking(item);
                   }}
@@ -160,13 +203,14 @@ const MasterRankingScreen = () => {
                 style={[styles.dropdown, { width: '100%', marginTop: 15 }]}
                 placeholderStyle={styles.placeholderStyle}
                 selectedTextStyle={styles.selectedTextStyle}
-                data={[]}
-                labelField="label"
-                valueField="value"
+                data={masterCountries ? masterCountries.data : []}
+                disable={!getOnlineStatus()}
+                labelField="name"
+                valueField="two"
                 placeholder="Select country"
-                value={valueRanking?.value}
+                value={valueCountry?.two}
                 onChange={(item) => {
-                  //todo: Country
+                  setValueCountry(item);
                 }}
               />
               <View style={styles.buttonsWrapper}>
@@ -182,7 +226,8 @@ const MasterRankingScreen = () => {
                   }}
                   onPress={() => {
                     setValueAge(null);
-                    setValueRanking(RankingDropdownObject);
+                    setValueCountry(null);
+                    setValueRanking(null);
                   }}
                   children={'Clear'}
                 />
@@ -219,7 +264,7 @@ const MasterRankingScreen = () => {
 
       <FlatList
         showsVerticalScrollIndicator={false}
-        data={masterRanking}
+        data={filteredData.length != 0 ? filteredData : masterRanking}
         keyExtractor={(item) => item.user_id.toString()}
         renderItem={({ item, index }) => (
           <Profile
@@ -245,7 +290,9 @@ const MasterRankingScreen = () => {
               item.score_kye
             ]}
             tbt_score={item.score_tbt}
-            active_score={confirmedValueRanking.value - 1}
+            active_score={
+              confirmedValueRanking ? confirmedValueRanking.value - 1 : dataRanking[0].value - 1
+            }
             tbt_rank={item.rank_tbt}
             badge_tbt={item.badge_tbt}
             badge_1281={item.badge_1281}

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

@@ -1,11 +1,11 @@
 export const dataAge = [
-  { label: 'until 19', value: '1' },
-  { label: '20 - 29', value: '2' },
-  { label: '30 - 39', value: '3' },
-  { label: '40 - 49', value: '4' },
-  { label: '50 - 59', value: '5' },
-  { label: '60 - 69', value: '6' },
-  { label: '70+', value: '7' }
+  { label: 'until 19', value: '1', min: 0, max: 19 },
+  { label: '20 - 29', value: '2', min: 20, max: 29 },
+  { label: '30 - 39', value: '3', min: 30, max: 39 },
+  { label: '40 - 49', value: '4', min: 40, max: 49 },
+  { label: '50 - 59', value: '5', min: 50, max: 59 },
+  { label: '60 - 69', value: '6', min: 60, max: 69 },
+  { label: '70+', value: '7', min: 70, max: 150 }
 ];
 
 export const dataRanking = [

src/types/api.ts

@@ -31,7 +31,8 @@ export enum API_ENDPOINT {
   GET_UN_MASTERS_TYPE = 'get-type',
   GET_UPDATED_AVATARS = 'get-updates',
   GET_LIST = 'get-list',
-  GET_STATISTIC = 'get-stat'
+  GET_STATISTIC = 'get-stat',
+  GET_COUNTRIES_RANKING = 'get-countries-ranking'
 }
 
 export enum API {
@@ -54,7 +55,8 @@ export enum API {
   GET_UN_MASTERS_TYPE = `${API_ROUTE.UN_MASTERS}/${API_ENDPOINT.GET_UN_MASTERS_TYPE}`,
   GET_UPDATED_AVATARS = `${API_ROUTE.AVATARS}/${API_ENDPOINT.GET_UPDATED_AVATARS}`,
   GET_LIST = `${API_ROUTE.STATISTICS}/${API_ENDPOINT.GET_LIST}`,
-  GET_STATISTIC = `${API_ROUTE.STATISTICS}/${API_ENDPOINT.GET_STATISTIC}`
+  GET_STATISTIC = `${API_ROUTE.STATISTICS}/${API_ENDPOINT.GET_STATISTIC}`,
+  GET_COUNTRIES_RANKING = `${API_ROUTE.RANKING}/${API_ENDPOINT.GET_COUNTRIES_RANKING}`
 }
 
 export type BaseAxiosError = AxiosError;