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

Route.tsx

@@ -140,7 +140,8 @@ const Route = () => {
         }
       }),
     },
-    cardStyle: { backgroundColor: 'white' }
+    cardStyle: { backgroundColor: 'white' },
+    unmountOnBlur: true
   });
 
   const MapDrawer = createDrawerNavigator();

package.json

@@ -56,14 +56,15 @@
     "react-native-modal": "^13.0.1",
     "react-native-pager-view": "6.2.0",
     "react-native-progress": "^5.0.1",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-searchable-dropdown-kj": "^1.9.1",
     "react-native-svg": "13.9.0",
     "react-native-tab-view": "^3.5.2",
+    "react-native-walkthrough-tooltip": "^1.6.0",
     "yup": "^1.3.3",
-    "zustand": "^4.4.7",
-    "react-native-reanimated": "~3.3.0"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/screens/InAppScreens/ProfileScreen/RegionsRenderer/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { View, Text, Image, TouchableOpacity, ScrollView } from 'react-native';
+import { View, Text, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
 import { Colors } from 'src/theme';
 import { styles } from './styles';
 import { Loading } from 'src/components';
@@ -44,6 +44,8 @@ const RegionsRenderer = ({
     itemVisiblePercentThreshold: 50,
     minimumViewTime: 1000
   };
+  const isSmallWidth = Dimensions.get('window').width < 383;
+
   const getOpacity = useCallback(
     (item: any, mega?: Mega) => {
       switch (type) {
@@ -98,17 +100,27 @@ const RegionsRenderer = ({
             </View>
           </View>
           {type === 'nm' && (
-            <View style={{ flexDirection: 'row', flex: 2 }}>
+            <View style={{ flexDirection: 'row', flex: isSmallWidth ? 2.5 : 2 }}>
               <View style={{ width: '56%', alignItems: 'center', marginRight: '2%' }}>
                 {regions.data.firsts[item?.id] && regions.data.firsts[item?.id] !== 1 ? (
-                  <Text style={[styles.regionName, { fontSize: 12, fontWeight: '700' }]}>
+                  <Text
+                    style={[
+                      styles.regionName,
+                      { fontSize: isSmallWidth ? 11 : 12, fontWeight: '700' }
+                    ]}
+                  >
                     {regions.data.firsts[item?.id]}
                   </Text>
                 ) : null}
               </View>
               <View style={{ width: '42%', alignItems: 'center' }}>
                 {regions.data.last[item?.id] && regions.data.last[item?.id] !== 1 ? (
-                  <Text style={[styles.regionName, { fontSize: 12, fontWeight: '700' }]}>
+                  <Text
+                    style={[
+                      styles.regionName,
+                      { fontSize: isSmallWidth ? 11 : 12, fontWeight: '700' }
+                    ]}
+                  >
                     {regions.data.last[item?.id]}
                   </Text>
                 ) : null}
@@ -173,19 +185,27 @@ const RegionsRenderer = ({
               </Text>
             </Text>
             {type === 'nm' && (
-              <View style={{ flexDirection: 'row', flex: 2 }}>
+              <View style={{ flexDirection: 'row', flex: isSmallWidth ? 2.5 : 2 }}>
                 <View style={{ width: '56%', alignItems: 'center', marginRight: '2%' }}>
                   <Text style={styles.alignCenter}>
-                    <Text style={[styles.megaregionTitle, { fontSize: 12 }]}>First</Text>
+                    <Text style={[styles.megaregionTitle, { fontSize: isSmallWidth ? 11 : 12 }]}>
+                      First
+                    </Text>
                     {'\n'}
-                    <Text style={[styles.megaregionTitle, { fontSize: 12 }]}>visited</Text>
+                    <Text style={[styles.megaregionTitle, { fontSize: isSmallWidth ? 11 : 12 }]}>
+                      visited
+                    </Text>
                   </Text>
                 </View>
                 <View style={{ width: '42%', alignItems: 'center' }}>
                   <Text style={styles.alignCenter}>
-                    <Text style={[styles.megaregionTitle, { fontSize: 12 }]}>Last</Text>
+                    <Text style={[styles.megaregionTitle, { fontSize: isSmallWidth ? 11 : 12 }]}>
+                      Last
+                    </Text>
                     {'\n'}
-                    <Text style={[styles.megaregionTitle, { fontSize: 12 }]}>visit</Text>
+                    <Text style={[styles.megaregionTitle, { fontSize: isSmallWidth ? 11 : 12 }]}>
+                      visit
+                    </Text>
                   </Text>
                 </View>
               </View>
@@ -281,17 +301,29 @@ const RegionsRenderer = ({
                     <View style={{ flexDirection: 'row', flex: 1 }}>
                       <View style={styles.slow}>
                         <Text style={styles.alignCenter}>
-                          <Text style={[styles.megaregionTitle, { fontSize: 12 }]}>Slow11</Text>
+                          <Text
+                            style={[styles.megaregionTitle, { fontSize: isSmallWidth ? 10 : 12 }]}
+                          >
+                            Slow11
+                          </Text>
                         </Text>
                       </View>
                       <View style={styles.slow}>
                         <Text style={styles.alignCenter}>
-                          <Text style={[styles.megaregionTitle, { fontSize: 12 }]}>Slow31</Text>
+                          <Text
+                            style={[styles.megaregionTitle, { fontSize: isSmallWidth ? 10 : 12 }]}
+                          >
+                            Slow31
+                          </Text>
                         </Text>
                       </View>
                       <View style={styles.slow}>
                         <Text style={styles.alignCenter}>
-                          <Text style={[styles.megaregionTitle, { fontSize: 12 }]}>Slow101</Text>
+                          <Text
+                            style={[styles.megaregionTitle, { fontSize: isSmallWidth ? 10 : 12 }]}
+                          >
+                            Slow101
+                          </Text>
                         </Text>
                       </View>
                     </View>

src/screens/InAppScreens/ProfileScreen/UsersMap/index.tsx

@@ -1,5 +1,5 @@
-import { Platform, TouchableOpacity, View, Image } from 'react-native';
-import React, { FC, useEffect, useRef } from 'react';
+import { Platform, TouchableOpacity, View, Image, Text } from 'react-native';
+import React, { FC, useEffect, useRef, useState } from 'react';
 import MapView, { UrlTile } from 'react-native-maps';
 
 import { styles } from './styles';
@@ -8,6 +8,9 @@ import { NavigationProp } from '@react-navigation/native';
 import { AvatarWithInitials } from 'src/components';
 import { Colors } from 'src/theme';
 
+import CloseSvg from 'assets/icons/close.svg';
+import FilterIcon from 'assets/icons/filter.svg';
+
 type Props = {
   navigation: NavigationProp<any>;
   route: any;
@@ -20,8 +23,10 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
   const tilesBaseURL = `${FASTEST_MAP_HOST}/tiles_osm`;
   const gridUrl = `${FASTEST_MAP_HOST}/tiles_nm/grid`;
   const visitedTiles = `${FASTEST_MAP_HOST}/tiles_nm/user_visited/${userId}`;
+  const visitedUNTiles = `${FASTEST_MAP_HOST}/tiles_nm/user_visited_un/${userId}`;
 
   const mapRef = useRef<MapView>(null);
+  const [unVisible, setUnVisible] = useState(false);
 
   useEffect(() => {
     navigation.getParent()?.setOptions({
@@ -60,7 +65,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
       }
     });
     navigation.goBack();
-  }
+  };
 
   return (
     <View style={styles.container}>
@@ -82,24 +87,19 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
       >
         {renderMapTiles(tilesBaseURL, 1)}
         {renderMapTiles(gridUrl, 2)}
-        {userId && renderMapTiles(visitedTiles, 2, 0.5)}
+        {userId && renderMapTiles(unVisible ? visitedUNTiles : visitedTiles, 2, 0.5)}
       </MapView>
 
       <TouchableOpacity
-        style={[styles.cornerButton, styles.topLeftButton]}
+        style={[styles.cornerButton, styles.topLeftButton, styles.closeLeftButton]}
         onPress={handleGoBack}
       >
+        <CloseSvg fill="white" width={13} height={13} />
+        <Text style={styles.textClose}>Close</Text>
+      </TouchableOpacity>
+      <View style={[styles.cornerButton, styles.topRightButton]}>
         {data.avatar ? (
-          <Image
-            style={{
-              borderRadius: 48 / 2,
-              width: 48,
-              height: 48,
-              borderWidth: 2,
-              borderColor: Colors.WHITE
-            }}
-            source={{ uri: API_HOST + data.avatar }}
-          />
+          <Image style={styles.avatar} source={{ uri: API_HOST + data.avatar }} />
         ) : (
           <AvatarWithInitials
             text={`${data.first_name[0] ?? ''}${data.last_name[0] ?? ''}`}
@@ -108,6 +108,12 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
             borderColor={Colors.WHITE}
           />
         )}
+      </View>
+      <TouchableOpacity
+        style={[styles.cornerButton, styles.bottomButton, styles.bottomLeftButton]}
+        onPress={() => setUnVisible(!unVisible)}
+      >
+        <FilterIcon />
       </TouchableOpacity>
     </View>
   );

src/screens/InAppScreens/ProfileScreen/UsersMap/styles.tsx

@@ -5,10 +5,10 @@ export const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
-    justifyContent: 'flex-end',
+    justifyContent: 'flex-end'
   },
   map: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFillObject
   },
   cornerButton: {
     position: 'absolute',
@@ -22,10 +22,46 @@ export const styles = StyleSheet.create({
     shadowColor: 'rgba(33, 37, 41, 0.12)',
     shadowOffset: { width: 0, height: 4 },
     shadowRadius: 8,
-    elevation: 5,
+    elevation: 5
   },
   topLeftButton: {
+    top: 50,
+    left: 16
+  },
+  closeLeftButton: {
+    backgroundColor: 'rgba(33, 37, 41, 0.78)',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    width: 81,
+    height: 36,
+    borderRadius: 18,
+    flexDirection: 'row',
+    gap: 6
+  },
+  textClose: {
+    fontSize: 12,
+    color: 'white',
+    fontWeight: '500',
+    lineHeight: 14
+  },
+  topRightButton: {
     top: 44,
+    right: 16
+  },
+  bottomButton: {
+    bottom: 58,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+  },
+  bottomLeftButton: {
     left: 16,
+  },
+  avatar: {
+    borderRadius: 48 / 2,
+    width: 48,
+    height: 48,
+    borderWidth: 2,
+    borderColor: Colors.WHITE
   }
 });

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, ReactNode, useEffect, useState } from 'react';
-import { Linking, ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import { Image } from 'expo-image';
+import React, { FC, ReactNode, useState } from 'react';
+import { Linking, ScrollView, Text, TouchableOpacity, View, Image } from 'react-native';
 import { CommonActions, NavigationProp, useNavigation } from '@react-navigation/native';
 import Modal from 'react-native-modal';
+import Tooltip from 'react-native-walkthrough-tooltip';
 
 import {
   type Score,
@@ -38,7 +38,6 @@ import IconGlobe from '../../../../assets/icons/bottom-navigation/globe.svg';
 import IconLink from '../../../../assets/icons/link.svg';
 import GearIcon from '../../../../assets/icons/gear.svg';
 import ArrowIcon from '../../../../assets/icons/next.svg';
-import axios from 'axios';
 import RegionsRenderer from './RegionsRenderer';
 
 type Props = {
@@ -52,27 +51,13 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
   const token = storage.get('token', StoreType.STRING) as string;
   const currentUserId = storage.get('uid', StoreType.STRING) as string;
 
-  const [isUserMapAvailable, setIsUserMapAvailable] = useState<boolean>(false);
-  const [loading, setLoading] = useState(true);
-
   if (!token) return <UnauthenticatedProfileScreen />;
 
   const { data, isFetching } = isPublicView
     ? usePostGetProfileInfoPublicQuery(route.params?.userId, true)
     : usePostGetProfileInfoQuery(token, true);
 
-  useEffect(() => {
-    const getUserMapUrl = async () => {
-      const response = await axios.get(`${API_HOST}/img/single_maps/${route.params?.userId}.png`);
-      return Boolean(response.data);
-    };
-    getUserMapUrl().then((res) => {
-      setIsUserMapAvailable(res);
-      setLoading(false);
-    });
-  }, []);
-
-  if (!data || isFetching || loading) return <Loading />;
+  if (!data || isFetching) return <Loading />;
 
   const handleGoToMap = () => {
     isPublicView
@@ -93,11 +78,9 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
         onPress={handleGoToMap}
       >
         <Image
-          source={
-            isUserMapAvailable
-              ? { uri: `${API_HOST}/img/single_maps/${route.params?.userId}.png` }
-              : require('../../../../assets/nm-map.png')
-          }
+          source={{
+            uri: `${API_HOST}/img/single_maps/${isPublicView ? route.params?.userId : currentUserId}.png`
+          }}
           style={styles.usersMap}
         />
       </TouchableOpacity>
@@ -192,6 +175,7 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ data, userId }) => {
   const [showMoreSeries, setShowMoreSeries] = useState(false);
   const [type, setType] = useState<string>('nm');
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [toolTipVisible, setToolTipVisible] = useState<number | null>(null);
 
   const { data: regions } = usePostGetProfileRegions(userId, type);
 
@@ -277,16 +261,27 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ data, userId }) => {
         {data.series?.length > 0 && (
           <InfoItem showMore={showMoreSeries} inline={true} title={'SERIES'}>
             {data.series?.slice(0, showMoreSeries ? data.series.length : 8).map((data, index) => (
-              <View
+              <Tooltip
+                isVisible={toolTipVisible === index}
+                content={<Text style={{}}>{data.name}</Text>}
+                contentStyle={{ backgroundColor: Colors.FILL_LIGHT }}
+                placement="top"
+                onClose={() => setToolTipVisible(null)}
                 key={index}
-                style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center' }}
+                backgroundColor="transparent"
+                allowChildInteraction={false}
               >
-                <Image
-                  source={{ uri: API_HOST + data.icon_png }}
-                  style={{ width: 28, height: 28 }}
-                />
-                <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
-              </View>
+                <TouchableOpacity
+                  style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center' }}
+                  onPress={() => setToolTipVisible(index)}
+                >
+                  <Image
+                    source={{ uri: API_HOST + data.icon_png }}
+                    style={{ width: 28, height: 28 }}
+                  />
+                  <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
+                </TouchableOpacity>
+              </Tooltip>
             ))}
           </InfoItem>
         )}
@@ -368,11 +363,7 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ data, userId }) => {
         statusBarTranslucent={true}
         presentationStyle="overFullScreen"
       >
-        <RegionsRenderer
-          type={type}
-          regions={regions}
-          setIsModalVisible={setIsModalVisible}
-        />
+        <RegionsRenderer type={type} regions={regions} setIsModalVisible={setIsModalVisible} />
       </Modal>
     </>
   );

src/screens/InAppScreens/ProfileScreen/styles.ts

@@ -15,7 +15,7 @@ export const styles = StyleSheet.create({
     color: Colors.DARK_BLUE,
     fontSize: getFontSize(14)
   },
-  usersMap: { height: 100, width: '100%', borderRadius: 12 },
+  usersMap: { height: 140, width: '100%', borderRadius: 12 },
   avatar: {
     borderRadius: 64 / 2,
     width: 64,
@@ -44,7 +44,7 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.FILL_LIGHT,
     borderRadius: 4,
     padding: 4,
-    gap: 1 //
+    gap: 1
   },
   rankingScore: {
     flex: 0,