Merge branch 'go-to-map-btn' of Viktoriia/nomadmania-app into dev

assets/icons/travels-screens/map-location.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3810_38142)">
+<path d="M14.1667 4.16667C14.1667 6.0625 11.6285 9.44097 10.5139 10.8333C10.2465 11.1667 9.75 11.1667 9.48611 10.8333C8.37153 9.44097 5.83333 6.0625 5.83333 4.16667C5.83333 1.86458 7.69792 0 10 0C12.3021 0 14.1667 1.86458 14.1667 4.16667ZM14.4444 6.95833C14.566 6.71875 14.6771 6.47917 14.7778 6.24306C14.7951 6.20139 14.8125 6.15625 14.8299 6.11458L18.8576 4.50347C19.4062 4.28472 20 4.6875 20 5.27778V14.6806C20 15.0208 19.7917 15.3264 19.4757 15.4549L14.4444 17.4653V6.95833ZM4.77778 4.80208C4.86111 5.29167 5.02778 5.78472 5.22222 6.24306C5.32292 6.47917 5.43403 6.71875 5.55556 6.95833V15.6875L1.14236 17.4549C0.59375 17.6736 0 17.2708 0 16.6806V7.27778C0 6.9375 0.208333 6.63194 0.524306 6.50347L4.78125 4.80208H4.77778ZM11.3819 11.5278C11.8646 10.9236 12.6215 9.94097 13.3333 8.85417V17.5104L6.66667 15.6042V8.85417C7.37847 9.94097 8.13542 10.9236 8.61806 11.5278C9.32986 12.4167 10.6701 12.4167 11.3819 11.5278ZM10 5.27778C10.3684 5.27778 10.7216 5.13145 10.9821 4.87098C11.2426 4.61051 11.3889 4.25725 11.3889 3.88889C11.3889 3.52053 11.2426 3.16726 10.9821 2.9068C10.7216 2.64633 10.3684 2.5 10 2.5C9.63164 2.5 9.27837 2.64633 9.01791 2.9068C8.75744 3.16726 8.61111 3.52053 8.61111 3.88889C8.61111 4.25725 8.75744 4.61051 9.01791 4.87098C9.27837 5.13145 9.63164 5.27778 10 5.27778Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3810_38142">
+<rect width="20" height="17.7778" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/HorizontalTabView/index.tsx

@@ -16,7 +16,8 @@ export const HorizontalTabView = ({
   withMark,
   onDoubleClick,
   lazy = false,
-  withNotification = false
+  withNotification = false,
+  maxTabHeight
 }: {
   index: number;
   setIndex: React.Dispatch<React.SetStateAction<number>>;
@@ -26,6 +27,7 @@ export const HorizontalTabView = ({
   onDoubleClick?: () => void;
   lazy?: boolean;
   withNotification?: boolean;
+  maxTabHeight?: number;
 }) => {
   const renderTabBar = (props: any) => (
     <TabBar
@@ -51,7 +53,7 @@ export const HorizontalTabView = ({
       style={styles.tabBar}
       activeColor={Colors.ORANGE}
       inactiveColor={Colors.DARK_BLUE}
-      tabStyle={styles.tabStyle}
+      tabStyle={[styles.tabStyle, maxTabHeight ? { maxHeight: maxTabHeight } : {}]}
       pressColor={'transparent'}
     />
   );

src/screens/InAppScreens/MapScreen/CountryViewScreen/index.tsx

@@ -3,7 +3,7 @@ import { View, Text, Image, TouchableOpacity, Platform } from 'react-native';
 import ImageView from 'better-react-native-image-viewing';
 import { styles } from '../RegionViewScreen/styles';
 import { Button, HorizontalTabView, Loading, Modal as ReactModal } from 'src/components';
-import { useFocusEffect } from '@react-navigation/native';
+import { CommonActions, useFocusEffect } from '@react-navigation/native';
 import { Colors } from 'src/theme';
 import { ScrollView } from 'react-native-gesture-handler';
 
@@ -28,6 +28,7 @@ import HouseSvg from 'assets/icons/house.svg';
 import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
 import CheckSvg from 'assets/icons/travels-screens/circle-check.svg';
 import CheckRegularSvg from 'assets/icons/travels-screens/circle-check-regular.svg';
+import MapSvg from 'assets/icons/travels-screens/map-location.svg';
 
 const CountryViewScreen: FC<Props> = ({ navigation, route }) => {
   const countryId = route.params?.regionId;
@@ -220,6 +221,35 @@ const CountryViewScreen: FC<Props> = ({ navigation, route }) => {
           <ChevronLeft fill={Colors.WHITE} />
         </View>
       </TouchableOpacity>
+      {route.params?.isTravelsScreen ? (
+        <TouchableOpacity
+          onPress={() => {
+            navigation.dispatch(
+              CommonActions.reset({
+                index: 1,
+                routes: [
+                  {
+                    name: NAVIGATION_PAGES.IN_APP_MAP_TAB,
+                    state: {
+                      routes: [
+                        {
+                          name: NAVIGATION_PAGES.MAP_TAB,
+                          params: { id: countryId, type: 'countries' }
+                        }
+                      ]
+                    }
+                  }
+                ]
+              })
+            );
+          }}
+          style={styles.goToMapBtn}
+        >
+          <View style={styles.chevronWrapper}>
+            <MapSvg fill={Colors.WHITE} />
+          </View>
+        </TouchableOpacity>
+      ) : null}
       <ScrollView
         contentContainerStyle={{ flexGrow: 1 }}
         nestedScrollEnabled={true}

src/screens/InAppScreens/MapScreen/RegionViewScreen/index.tsx

@@ -9,7 +9,7 @@ import {
   Loading,
   Modal as ReactModal
 } from 'src/components';
-import { useFocusEffect } from '@react-navigation/native';
+import { CommonActions, useFocusEffect } from '@react-navigation/native';
 import { Colors } from 'src/theme';
 import { styles as ButtonStyles } from 'src/components/RegionPopup/style';
 
@@ -35,6 +35,7 @@ import HouseSvg from 'assets/icons/house.svg';
 import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
 import CalendarSvg from 'assets/icons/travels-screens/calendar.svg';
 import RotateSvg from 'assets/icons/travels-screens/rotate.svg';
+import MapSvg from 'assets/icons/travels-screens/map-location.svg';
 
 const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
   const regionId = route.params?.regionId;
@@ -282,6 +283,35 @@ const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
           <ChevronLeft fill={Colors.WHITE} />
         </View>
       </TouchableOpacity>
+      {route.params?.isTravelsScreen ? (
+        <TouchableOpacity
+          onPress={() => {
+            navigation.dispatch(
+              CommonActions.reset({
+                index: 1,
+                routes: [
+                  {
+                    name: NAVIGATION_PAGES.IN_APP_MAP_TAB,
+                    state: {
+                      routes: [
+                        {
+                          name: NAVIGATION_PAGES.MAP_TAB,
+                          params: { id: regionId, type: type === 'nm' ? 'regions' : 'places' }
+                        }
+                      ]
+                    }
+                  }
+                ]
+              })
+            );
+          }}
+          style={styles.goToMapBtn}
+        >
+          <View style={styles.chevronWrapper}>
+            <MapSvg fill={Colors.WHITE} />
+          </View>
+        </TouchableOpacity>
+      ) : null}
       <ScrollView
         contentContainerStyle={{ flexGrow: 1 }}
         nestedScrollEnabled={true}
@@ -466,6 +496,7 @@ const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
                 setIndex={setIndexSeries}
                 routes={routes}
                 renderScene={({ route }: { route: SeriesGroup }) => <View style={{ height: 0 }} />}
+                maxTabHeight={50}
               />
               <TravelSeriesList
                 series={series}

src/screens/InAppScreens/MapScreen/RegionViewScreen/styles.tsx

@@ -21,7 +21,7 @@ export const styles = StyleSheet.create({
     width: 50,
     height: 50,
     top: 50,
-    left: 5,
+    left: 10,
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 2
@@ -191,5 +191,15 @@ export const styles = StyleSheet.create({
     color: Colors.DARK_BLUE,
     fontWeight: '600',
     fontSize: getFontSize(11)
-  }
+  },
+  goToMapBtn: {
+    position: 'absolute',
+    width: 50,
+    height: 50,
+    top: 50,
+    right: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 2
+  },
 });

src/screens/InAppScreens/MapScreen/index.tsx

@@ -529,9 +529,45 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
 
   const handleFindRegion = async (id: number, type: string) => {
     cancelTokenRef.current = true;
-    const db = type === 'regions' ? getFirstDatabase() : getSecondDatabase();
-    const dataset = type === 'regions' ? regions : dareData;
+    const db =
+      type === 'regions'
+        ? getFirstDatabase()
+        : type === 'countries'
+          ? getCountriesDatabase()
+          : getSecondDatabase();
+
+    if (type === 'countries') {
+      setSelectedRegion(null);
+      setMarkers([]);
+      setProcessedMarkers([]);
+
+      await getData(db, id, type, handleRegionData)
+        .then(() => {
+          setRegionPopupVisible(true);
+        })
+        .catch((error) => {
+          console.error('Error fetching data', error);
+          refreshDatabases();
+        });
 
+      await mutateCountriesData(
+        { id: +id, token },
+        {
+          onSuccess: (data) => {
+            setUserData({ type: 'countries', ...data.data });
+            const bounds = turf.bbox(data.data.bbox);
+            const center = data.data.center;
+            const region = calculateMapCountry(bounds, center);
+
+            mapRef.current?.animateToRegion(region, 1000);
+          }
+        }
+      );
+
+      return;
+    }
+
+    const dataset = type === 'regions' ? regions : dareData;
     const foundRegion = dataset.features.find((region: any) => region.properties.id === id);
 
     if (foundRegion) {

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

@@ -142,7 +142,7 @@ const RegionsScreen = () => {
     if (megaregions && megaregions.result === 'OK') {
       setSelectedMega(megaregions.data[1]);
     }
-  }, [megaregions])
+  }, [megaregions]);
 
   const calcTotalCountries = () => {
     const visited = nmRegions?.filter((item: NmRegion) => item.visits > 0).length || 0;
@@ -150,28 +150,31 @@ const RegionsScreen = () => {
   };
 
   const renderItem = ({ item }: { item: NmRegion }) => (
-    <TouchableOpacity onPress={() => {
-      setUserData({
-        type: 'nm',
-        region_flag: item.flag_1,
-        region_name: item.region_name,
-        best_visit_quality: item.quality,
-        first_visit_year: item.year,
-        last_visit_year: item.last,
-        no_of_visits: item.visits,
-        visited: item.visits > 0,
-      });
-      navigation.navigate(
-      ...([
-        NAVIGATION_PAGES.REGION_PREVIEW,
-        {
-          regionId: item.id,
-          isTravelsScreen: true,
+    <TouchableOpacity
+      onPress={() => {
+        setUserData({
           type: 'nm',
-          disabled: token ? false : true,
-        }
-      ] as never)
-    )}}>
+          region_flag: item.flag_1,
+          region_name: item.region_name,
+          best_visit_quality: item.quality,
+          first_visit_year: item.year,
+          last_visit_year: item.last,
+          no_of_visits: item.visits,
+          visited: item.visits > 0
+        });
+        navigation.navigate(
+          ...([
+            NAVIGATION_PAGES.REGION_PREVIEW,
+            {
+              regionId: item.id,
+              isTravelsScreen: true,
+              type: 'nm',
+              disabled: token ? false : true
+            }
+          ] as never)
+        );
+      }}
+    >
       <NmRegionItem
         item={item}
         openEditModal={handleOpenEditModal}