added data from nmRegions db

src/screens/InAppScreens/TravelsScreen/Components/MyRegionsItems/NmRegionItem.tsx

@@ -5,6 +5,8 @@ import { NmRegion } from '../../utils/types';
 import { Colors } from 'src/theme';
 import { styles } from './styles';
 import { API_HOST } from 'src/constants';
+import useRegionData from '../../utils/useRegionData';
+import formatNumber from '../../utils/formatNumber';
 
 import MarkIcon from 'assets/icons/mark.svg';
 import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
@@ -28,10 +30,17 @@ export const NmRegionItem = React.memo(
     ) => void;
   }) => {
     const name = item.region_name.split(/ – | - /);
+    const { regionData, avatars } = useRegionData(item.id);
+
+    const regionImg = regionData ? JSON.parse(regionData?.region_photos)[0] : '';
+    const formattedCount = regionData ? formatNumber(regionData?.visitors_count) : 0;
 
     return (
       <View style={styles.regionItem}>
         <View style={styles.regionItemHeader}>
+          {regionImg && (
+            <Image source={{ uri: regionImg, cache: 'force-cache' }} style={styles.regionImage} />
+          )}
           <View style={{ gap: 6, flex: 1 }}>
             <Text style={styles.regionItemName}>{name[0]}</Text>
             <Text style={styles.regionItemSubname}>{name[1]}</Text>
@@ -56,21 +65,33 @@ export const NmRegionItem = React.memo(
           {item.visits > 0 && item.year > 1 && (
             <View style={styles.infoContent}>
               <CalendarSvg height={18} width={18} fill={Colors.DARK_BLUE} />
-              <Text style={{ fontWeight: 'bold', fontSize: 13, color: Colors.DARK_BLUE }}>
-                {item.year}
-              </Text>
+              <Text style={styles.visitedButtonText}>{item.year}</Text>
             </View>
           )}
 
           {item.visits > 0 && (
             <View style={styles.infoContent}>
               <RotateSvg fill={Colors.DARK_BLUE} />
-              <Text style={{ fontWeight: 'bold', fontSize: 13, color: Colors.DARK_BLUE }}>
+              <Text style={styles.visitedButtonText}>
                 {item.visits >= 10 ? '10+' : item.visits}
               </Text>
             </View>
           )}
 
+          {item.visits <= 0 && avatars && (
+            <View style={styles.userContainer}>
+              <View style={styles.userImageContainer}>
+                {avatars &&
+                  avatars?.map((avatar, index) => (
+                    <Image key={index} source={{ uri: avatar }} style={styles.userImage} />
+                  ))}
+                <View style={styles.userCountContainer}>
+                  <Text style={styles.userCount}>{formattedCount}</Text>
+                </View>
+              </View>
+            </View>
+          )}
+
           <View style={styles.btnContainer}>
             {item.visits > 0 ? (
               <TouchableOpacity onPress={() => openEditModal(item)} style={styles.editBtn}>

src/screens/InAppScreens/TravelsScreen/Components/MyRegionsItems/TccRegionItem.tsx

@@ -4,6 +4,8 @@ import { View, Text, TouchableOpacity, Image } from 'react-native';
 import { TCCRegion } from '../../utils/types';
 import { styles } from './styles';
 import { API_HOST } from 'src/constants';
+import useRegionData from '../../utils/useRegionData';
+import formatNumber from '../../utils/formatNumber';
 
 import MarkIcon from 'assets/icons/mark.svg';
 
@@ -16,10 +18,17 @@ export const TccRegionItem = React.memo(
     updateTCC: (region: number, visits: 0 | 1) => void;
   }) => {
     const name = item.name.split(/ – | - /);
+    const { regionData, avatars } = useRegionData(item.id);
+
+    const regionImg = regionData ? JSON.parse(regionData?.region_photos)[0] : '';
+    const formattedCount = regionData ? formatNumber(regionData?.visitors_count) : 0;
 
     return (
       <View style={styles.regionItem}>
         <View style={styles.regionItemHeader}>
+          {regionImg && (
+            <Image source={{ uri: regionImg, cache: 'force-cache' }} style={styles.regionImage} />
+          )}
           <View style={{ gap: 6, flex: 1 }}>
             <Text style={styles.regionItemName}>{name[0]}</Text>
             <Text style={styles.regionItemSubname}>{name[1]}</Text>
@@ -38,6 +47,19 @@ export const TccRegionItem = React.memo(
         <View style={styles.divider} />
 
         <View style={styles.regionItemContent}>
+          {avatars && (
+            <View style={styles.userContainer}>
+              <View style={styles.userImageContainer}>
+                {avatars &&
+                  avatars?.map((avatar, index) => (
+                    <Image key={index} source={{ uri: avatar }} style={styles.userImage} />
+                  ))}
+                <View style={styles.userCountContainer}>
+                  <Text style={styles.userCount}>{formattedCount}</Text>
+                </View>
+              </View>
+            </View>
+          )}
           <View style={styles.btnContainer}>
             <TouchableOpacity
               style={[

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

@@ -14,6 +14,11 @@ export const styles = StyleSheet.create({
     gap: 12,
     alignItems: 'center'
   },
+  regionImage: {
+    width: 60,
+    height: 60,
+    borderRadius: 30
+  },
   regionItemName: {
     fontSize: 14,
     fontWeight: 'bold',
@@ -26,9 +31,9 @@ export const styles = StyleSheet.create({
     flexShrink: 1
   },
   flag: {
-    height: 20,
-    width: 20,
-    borderRadius: 10,
+    height: 24,
+    width: 24,
+    borderRadius: 12,
     resizeMode: 'cover',
     borderWidth: 1,
     borderColor: Colors.DARK_LIGHT
@@ -80,5 +85,37 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
     padding: 7
   },
-  infoContent: { flexDirection: 'row', alignItems: 'center', gap: 4 }
+  infoContent: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+  userContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 6,
+    paddingVertical: 1
+  },
+  userImageContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  userImage: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    marginLeft: -6,
+    borderWidth: 1,
+    borderColor: Colors.WHITE,
+    resizeMode: 'cover'
+  },
+  userCountContainer: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: Colors.DARK_LIGHT,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: -6
+  },
+  userCount: {
+    fontSize: 12,
+    color: Colors.DARK_BLUE
+  }
 });

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

@@ -6,7 +6,7 @@ import { useFocusEffect } from '@react-navigation/native';
 import { Dropdown } from 'react-native-searchable-dropdown-kj';
 import moment from 'moment';
 
-import { Button, Header, PageWrapper, WarningModal } from 'src/components';
+import { Button, Header, PageWrapper } from 'src/components';
 import { CustomButton } from '../Components';
 
 import { StoreType, storage } from 'src/storage';
@@ -356,13 +356,13 @@ const RegionsScreen = () => {
               </View>
             </View>
           </View>
-          <View style={styles.photosContent}>
+          {/* <View style={styles.photosContent}>
             <Text style={styles.textMedium}>Photos</Text>
             <TouchableOpacity style={styles.addImgBtn}>
               <AddImgSvg fill={Colors.DARK_BLUE} />
               <Text style={styles.textSmall}>Add</Text>
             </TouchableOpacity>
-          </View>
+          </View> */}
           <Button
             children="Done"
             onPress={() => {

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

@@ -61,7 +61,8 @@ export const styles = StyleSheet.create({
     paddingVertical: 24
   },
   optionsContainer: {
-    gap: 16
+    gap: 16,
+    marginBottom: 8
   },
   closeBtn: { backgroundColor: Colors.WHITE, borderColor: '#B7C6CB' },
   rowWrapper: {

src/screens/InAppScreens/TravelsScreen/utils/formatNumber.ts

@@ -0,0 +1,8 @@
+function formatNumber(number: number) {
+  if (number >= 1000) {
+    return (number / 1000).toFixed(1) + 'k';
+  }
+  return number.toString();
+}
+
+export default formatNumber;

src/screens/InAppScreens/TravelsScreen/utils/index.ts

@@ -1,2 +1,4 @@
 export * from './photoStyles'
 export * from './groupPhotosByDate'
+export * from './useRegionData'
+export * from './formatNumber'

src/screens/InAppScreens/TravelsScreen/utils/types.ts

@@ -109,3 +109,10 @@ export interface TCCRegion {
   name: string;
   visited: number;
 }
+
+export interface DbRegion {
+  id: number;
+  name: string;
+  region_photos: string;
+  visitors_count: number;
+}

src/screens/InAppScreens/TravelsScreen/utils/useRegionData.ts

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+import { getFirstDatabase } from 'src/db';
+import { getData } from 'src/modules/map/regionData';
+import { DbRegion } from './types';
+
+const useRegionData = (regionId: number) => {
+  const [regionData, setRegionData] = useState<DbRegion | null>(null);
+  const [avatars, setAvatars] = useState<string[] | null>(null);
+
+  useEffect(() => {
+    const fetchRegionData = async () => {
+      const db = getFirstDatabase();
+      try {
+        await getData(db, regionId, 'regions', (data, avatars) => {
+          setRegionData(data);
+          setAvatars(avatars);
+        });
+      } catch (error) {
+        console.error('Error fetching region data', error);
+      }
+    };
+
+    fetchRegionData();
+  }, [regionId]);
+
+  return { regionData, avatars };
+};
+
+export default useRegionData;