Merge branch 'slow-fixes' of SashaGoncharov19/nomadmania-app into dev

src/screens/InAppScreens/TravelsScreen/Components/CountryItem/styles.tsx

@@ -1,5 +1,6 @@
-import { StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import { Colors } from 'src/theme';
+import { getFontSize } from 'src/utils';
 
 export const styles = StyleSheet.create({
   countryItem: {
@@ -29,14 +30,12 @@ export const styles = StyleSheet.create({
     color: Colors.DARK_BLUE
   },
   divider: { height: 1, backgroundColor: Colors.DARK_LIGHT, marginVertical: 12 },
-  visitDurationRow: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
   durationContainer: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    gap: 8
+    justifyContent: 'center',
+    gap: 8,
+    flexWrap: 'wrap',
+    flex: 1
   },
   durationItem: {
     alignItems: 'center',
@@ -52,9 +51,15 @@ export const styles = StyleSheet.create({
   visitDuration: {
     color: Colors.DARK_BLUE,
     fontWeight: '600',
-    fontSize: 13
+    fontSize: getFontSize(12)
+  },
+  btnContainer: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    flexDirection: 'row',
+    gap: 8,
+    flex: 1
   },
-  btnContainer: { alignItems: 'center', justifyContent: 'center', flexDirection: 'row', gap: 8 },
   markVisitedButton: {
     backgroundColor: Colors.ORANGE,
     paddingVertical: 6,
@@ -71,7 +76,8 @@ export const styles = StyleSheet.create({
     borderRadius: 6,
     alignItems: 'center',
     borderColor: Colors.BORDER_LIGHT,
-    borderWidth: 1
+    borderWidth: 1,
+    flex: Dimensions.get('window').width < 380 ? 1 : 0
   },
   markVisitedButtonText: {
     color: 'white',
@@ -83,7 +89,7 @@ export const styles = StyleSheet.create({
     fontWeight: 'bold',
     fontSize: 13
   },
-  visitedContainer: { gap: 8, flexDirection: 'row', alignItems: 'center' },
+  visitedContainer: { gap: 6, flexDirection: 'row', alignItems: 'center' },
   editScoreBtn: {
     borderRadius: 20,
     borderWidth: 1,

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

@@ -2,10 +2,11 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { View, Text, TouchableOpacity, ScrollView, FlatList } from 'react-native';
 import ReactModal from 'react-native-modal';
 import * as Progress from 'react-native-progress';
+import { useFocusEffect } from '@react-navigation/native';
 
 import CountryItem from '../Components/CountryItem';
 import EditModal from '../Components/EditSlowModal';
-import { Header, PageWrapper, WarningModal } from 'src/components';
+import { Header, Input, PageWrapper, WarningModal } from 'src/components';
 
 import { useGetSlowQuery, usePostSetSlowMutation } from '@api/countries';
 import { StoreType, storage } from 'src/storage';
@@ -15,6 +16,7 @@ import { styles } from './styles';
 
 import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
 import IngoSvg from 'assets/icons/travels-screens/info.svg';
+import SearchIcon from '../../../../../assets/icons/search.svg';
 
 const CountriesScreen = () => {
   const token = storage.get('token', StoreType.STRING) as string;
@@ -30,6 +32,8 @@ const CountriesScreen = () => {
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
   const [currentItem, setCurrentItem] = useState<SlowData | null>(null);
   const [infoModalVisible, setInfoModalVisible] = useState(false);
+  const [search, setSearch] = useState<string>('');
+  const [filteredSlow, setFilteredSlow] = useState<SlowData[] | null>(null);
 
   const handleOpenEditModal = (item: SlowData) => {
     setCurrentItem(item);
@@ -38,19 +42,46 @@ const CountriesScreen = () => {
 
   useEffect(() => {
     if (slow && slow.length) {
-      calcTotalScore();
+      calcTotalCountries();
+      setFilteredSlow(slow);
     }
   }, [slow]);
 
   useEffect(() => {
     if (data && data.result === 'OK') {
+      setSearch('');
       if (selectedMega.id === -1) {
         setSlow(data?.slow);
       } else {
         setSlow(data?.slow?.filter((item) => item.mega.includes(selectedMega.id)));
       }
     }
-  }, [selectedMega, data]);
+  }, [selectedMega]);
+
+  useFocusEffect(
+    useCallback(() => {
+      if (data && data.result === 'OK') {
+        setSlow(data?.slow);
+        calcTotalScore();
+      }
+    }, [data])
+  );
+
+  const searchFilter = (text: string) => {
+    if (text) {
+      const newData: SlowData[] | null =
+        slow?.filter((item: any) => {
+          const itemData = item.country ? item.country.toLowerCase() : ''.toLowerCase();
+          const textData = text.toLowerCase();
+          return itemData.indexOf(textData) > -1;
+        }) ?? [];
+      setFilteredSlow(newData);
+      setSearch(text);
+    } else {
+      setFilteredSlow(slow);
+      setSearch(text);
+    }
+  };
 
   const calcTotalScore = () => {
     let visited = 0;
@@ -58,7 +89,7 @@ const CountriesScreen = () => {
     let slow31 = 0;
     let slow101 = 0;
 
-    slow?.forEach((item: SlowData) => {
+    data?.slow?.forEach((item: SlowData) => {
       visited += item.visited;
       slow11 += item.slow11;
       slow31 += item.slow31;
@@ -68,6 +99,11 @@ const CountriesScreen = () => {
     setTotal({ slow: slow11 + slow31 + slow101, visited });
   };
 
+  const calcTotalCountries = () => {
+    const visited = slow?.filter((item) => item.visited === 1).length || 0;
+    setTotal({ ...total, visited });
+  };
+
   const handleUpdateSlow = useCallback(
     (id: number, v: boolean, s11: boolean, s31: boolean, s101: boolean) => {
       const updatedSlow = slow?.map((item) => {
@@ -110,12 +146,22 @@ const CountriesScreen = () => {
         <Text style={styles.megaButtonText}>{selectedMega.name}</Text>
         <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>
 
       <View style={styles.progressHeader}>
         <Text style={styles.visitedCountriesCount}>Visited countries</Text>
         <Text style={styles.visitedCountriesCount}>
           {slow?.length
-            ? `${total.visited}/${slow.length} • ${(total.visited * 100) / slow.length}%`
+            ? `${total.visited}/${slow.length} • ${((total.visited * 100) / slow.length).toFixed(2)}%`
             : '0/0 • 100%'}
         </Text>
       </View>
@@ -131,23 +177,21 @@ const CountriesScreen = () => {
       />
 
       <View style={styles.slowScoreSection}>
-        <Text style={styles.visitedCountriesCount}>
-          SLOW score: {slow?.length ? total.slow : 0}
-        </Text>
+        <Text style={styles.visitedCountriesCount}>SLOW score: {total.slow}</Text>
         <TouchableOpacity style={styles.infoBtn} onPress={() => setInfoModalVisible(true)}>
           <IngoSvg />
         </TouchableOpacity>
       </View>
 
-      {slow && (
+      {filteredSlow && filteredSlow?.length ? (
         <FlatList
-          data={slow}
+          data={filteredSlow}
           renderItem={renderCountryItem}
           keyExtractor={(item) => item.country_id.toString()}
           showsVerticalScrollIndicator={false}
           style={{ paddingTop: 8 }}
         />
-      )}
+      ) : null}
 
       <ReactModal
         isVisible={megaSelectorVisible}

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

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