small fixes

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

@@ -20,9 +20,9 @@ import { Colors } from 'src/theme';
 import { SeriesRanking } from '../utils/types';
 
 const SeriesRankingListScreen = ({ route }: { route: any }) => {
-  const name = route.params.name;
-  const id = route.params.id;
-  const series = route.params.series;
+  const name = route.params?.name;
+  const id = route.params?.id;
+  const series = route.params?.series;
   const [index, setIndex] = useState(0);
   const [routes, setRoutes] = useState<{ key: string; title: string }[]>([]);
   const [loading, setLoading] = useState(true);

src/screens/InAppScreens/TravelsScreen/CountriesScreen/index.tsx

@@ -46,7 +46,17 @@ const CountriesScreen = () => {
   useEffect(() => {
     if (slow && slow.length) {
       token && calcTotalScore();
-      setFilteredSlow(slow);
+      let newSlowData = slow;
+
+      if (search) {
+        newSlowData =
+          slow?.filter((item: any) => {
+            const itemData = item.country ? item.country.toLowerCase() : ''.toLowerCase();
+            const textData = search.toLowerCase();
+            return itemData.indexOf(textData) > -1;
+          }) ?? [];
+      }
+      setFilteredSlow(newSlowData);
     }
   }, [slow]);
 
@@ -57,12 +67,12 @@ const CountriesScreen = () => {
           setSlow(res.data.slow);
         }
       });
-    }
+    };
 
     if (data && data.result === 'OK') {
       setSearch('');
       if (selectedMega.id === -1) {
-        refetchData()
+        refetchData();
       } else {
         setSlow(data?.slow?.filter((item) => item.mega.includes(selectedMega.id)));
       }

src/screens/InAppScreens/TravelsScreen/DareScreen/index.tsx

@@ -3,7 +3,7 @@ import { View, Text, TouchableOpacity, FlatList, Platform } from 'react-native';
 import * as Progress from 'react-native-progress';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 
-import { Header, PageWrapper } from 'src/components';
+import { Header, Input, PageWrapper } from 'src/components';
 import { CustomButton } from '../Components';
 import MegaregionsModal from '../Components/MegaregionsModal';
 
@@ -21,9 +21,10 @@ import {
 import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
 import { NAVIGATION_PAGES } from 'src/types';
 import { useRegion } from 'src/contexts/RegionContext';
+import SearchIcon from 'assets/icons/search.svg';
 
 const DareScreen = () => {
-  const token = (storage.get('token', StoreType.STRING) as string);
+  const token = storage.get('token', StoreType.STRING) as string;
   const { data: megaregions } = useGetMegaregionsDareQuery(String(token), true);
   const [megaSelectorVisible, setMegaSelectorVisible] = useState(false);
   const [selectedMega, setSelectedMega] = useState<{ name: string; id: number }>({
@@ -41,12 +42,13 @@ const DareScreen = () => {
     setDareRegions,
     setUserData
   } = useRegion();
+  const [search, setSearch] = useState<string>('');
 
   useEffect(() => {
     if (megaregions && megaregions.result === 'OK') {
       setSelectedMega(megaregions.data[1]);
     }
-  }, [megaregions])
+  }, [megaregions]);
 
   useEffect(() => {
     if (dareRegions && dareRegions.length) {
@@ -66,27 +68,48 @@ const DareScreen = () => {
     }
   }, [selectedMega]);
 
-  useEffect(() => {
+  const applyFilters = () => {
+    let newDareData = dareRegions ?? [];
+
     switch (contentIndex) {
       case 1:
-        setFilteredDareRegions(dareRegions?.filter((item: DareRegion) => +item.visited <= 0) || []);
+        newDareData = dareRegions?.filter((item: DareRegion) => +item.visited <= 0) || [];
         break;
       case 2:
-        setFilteredDareRegions(dareRegions?.filter((item: DareRegion) => +item.visited > 0) || []);
+        newDareData = dareRegions?.filter((item: DareRegion) => +item.visited > 0) || [];
         break;
       case 3:
-        setFilteredDareRegions(dareRegions?.filter((item: DareRegion) => item.new === 1) || []);
+        newDareData = dareRegions?.filter((item: DareRegion) => item.new === 1) || [];
         break;
-      default:
-        setFilteredDareRegions(dareRegions);
     }
-  }, [contentIndex, dareRegions]);
+
+    if (search) {
+      newDareData = newDareData?.filter((item: DareRegion) => {
+        const itemData = item.name ? item.name.toLowerCase() : '';
+        return itemData.includes(search.toLowerCase());
+      });
+    }
+
+    setFilteredDareRegions(newDareData);
+  };
+
+  useEffect(() => {
+    applyFilters();
+  }, [contentIndex, dareRegions, search]);
+
+  useEffect(() => {
+    setSearch('');
+  }, [contentIndex, selectedMega]);
 
   const calcTotalCountries = () => {
     const visited = dareRegions?.filter((item: DareRegion) => +item.visited > 0).length || 0;
     setTotal(visited);
   };
 
+  const searchFilter = (text: string) => {
+    setSearch(text);
+  };
+
   const renderItem = ({ item }: { item: DareRegion }) => (
     <TouchableOpacity
       onPress={() => {
@@ -132,6 +155,17 @@ const DareScreen = () => {
         <ChevronIcon width={18} height={18} />
       </TouchableOpacity>
 
+      <View style={{ marginBottom: 16 }}>
+        <Input
+          inputMode={'search'}
+          placeholder={'Search'}
+          onChange={(text) => searchFilter(text)}
+          value={search}
+          icon={<SearchIcon fill={'#C8C8C8'} width={14} height={14} />}
+          height={34}
+        />
+      </View>
+
       {token && (
         <View style={styles.buttonContainer}>
           <CustomButton

src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

@@ -4,7 +4,7 @@ import * as Progress from 'react-native-progress';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import moment from 'moment';
 
-import { EditNmModal, Header, PageWrapper } from 'src/components';
+import { EditNmModal, Header, Input, PageWrapper } from 'src/components';
 import { CustomButton } from '../Components';
 import { NmRegionItem } from '../Components/MyRegionsItems/NmRegionItem';
 import { RegionItem } from '../Components/MyRegionsItems/RegionItem';
@@ -24,6 +24,7 @@ import { qualityOptions } from '../utils/constants';
 import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
 import { NAVIGATION_PAGES } from 'src/types';
 import { useRegion } from 'src/contexts/RegionContext';
+import SearchIcon from 'assets/icons/search.svg';
 
 const RegionsScreen = () => {
   const token = storage.get('token', StoreType.STRING) as string;
@@ -51,6 +52,7 @@ const RegionsScreen = () => {
   });
   const navigation = useNavigation();
   const { handleUpdateNMList: handleUpdateNM, nmRegions, setNmRegions, setUserData } = useRegion();
+  const [search, setSearch] = useState<string>('');
 
   useEffect(() => {
     const currentYear = moment().year();
@@ -121,22 +123,43 @@ const RegionsScreen = () => {
     }
   }, [selectedMega]);
 
-  useEffect(() => {
+  const applyFilters = () => {
+    let newNmData = nmRegions ?? [];
+    let newTccData = tccRegions ?? [];
+
     switch (contentIndex) {
-      case 0:
-        setFilteredNmRegions(nmRegions);
-        setFilteredTccRegions(tccRegions);
-        break;
       case 1:
-        setFilteredNmRegions(nmRegions?.filter((item: NmRegion) => item.visits <= 0) || []);
-        setFilteredTccRegions(tccRegions?.filter((item) => item.visited <= 0) || []);
+        newNmData = nmRegions?.filter((item: NmRegion) => item.visits <= 0) || [];
+        newTccData = tccRegions?.filter((item) => item.visited <= 0) || [];
         break;
       case 2:
-        setFilteredNmRegions(nmRegions?.filter((item: NmRegion) => item.visits > 0) || []);
-        setFilteredTccRegions(tccRegions?.filter((item) => item.visited > 0) || []);
+        newNmData = nmRegions?.filter((item: NmRegion) => item.visits > 0) || [];
+        newTccData = tccRegions?.filter((item) => item.visited > 0) || [];
         break;
     }
-  }, [contentIndex, nmRegions, tccRegions]);
+
+    if (search) {
+      newNmData = newNmData?.filter((item: NmRegion) => {
+        const itemData = item.region_name ? item.region_name.toLowerCase() : '';
+        return itemData.includes(search.toLowerCase());
+      });
+      newTccData = newTccData?.filter((item: TCCRegion) => {
+        const itemData = item.name ? item.name.toLowerCase() : '';
+        return itemData.includes(search.toLowerCase());
+      });
+    }
+
+    setFilteredNmRegions(newNmData);
+    setFilteredTccRegions(newTccData);
+  };
+
+  useEffect(() => {
+    applyFilters();
+  }, [contentIndex, nmRegions, tccRegions, search]);
+
+  useEffect(() => {
+    setSearch('');
+  }, [contentIndex, selectedMega]);
 
   useEffect(() => {
     if (megaregions && megaregions.result === 'OK') {
@@ -149,6 +172,10 @@ const RegionsScreen = () => {
     setTotal(visited);
   };
 
+  const searchFilter = (text: string) => {
+    setSearch(text);
+  };
+
   const renderItem = ({ item }: { item: NmRegion }) => (
     <TouchableOpacity
       onPress={() => {
@@ -203,6 +230,17 @@ const RegionsScreen = () => {
         <ChevronIcon width={18} height={18} />
       </TouchableOpacity>
 
+      <View style={{ marginBottom: 16 }}>
+        <Input
+          inputMode={'search'}
+          placeholder={'Search'}
+          onChange={(text) => searchFilter(text)}
+          value={search}
+          icon={<SearchIcon fill={'#C8C8C8'} width={14} height={14} />}
+          height={34}
+        />
+      </View>
+
       {token && (
         <View style={styles.buttonContainer}>
           <CustomButton

src/screens/InAppScreens/TravelsScreen/RegionsScreen/styles.tsx

@@ -10,7 +10,7 @@ export const styles = StyleSheet.create({
     borderRadius: 6,
     backgroundColor: Colors.FILL_LIGHT,
     justifyContent: 'space-between',
-    marginBottom: 16
+    marginBottom: 8
   },
   megaButtonText: {
     color: Colors.DARK_BLUE,