profile fixes

src/components/WarningModal/index.tsx

@@ -106,6 +106,30 @@ export const WarningModal = ({
           borderColor: Colors.ORANGE
         }
       ]
+    },
+    confirm: {
+      message,
+      buttons: [
+        {
+          text: 'No',
+          textColor: Colors.DARK_BLUE,
+          color: Colors.WHITE,
+          action: () => {
+            onClose();
+          },
+          borderColor: Colors.DARK_BLUE
+        },
+        {
+          text: 'Yes',
+          textColor: Colors.WHITE,
+          color: Colors.DARK_BLUE,
+          action: () => {
+            onClose();
+            action && action();
+          },
+          borderColor: Colors.DARK_BLUE
+        }
+      ]
     }
   };
 

src/screens/InAppScreens/MapScreen/index.tsx

@@ -248,7 +248,6 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     cancelTokenRef.current = true;
     const { latitude, longitude } = event.nativeEvent.coordinate;
     const point = turf.point([longitude, latitude]);
-    setUserAvatars([]);
 
     let db = getSecondDatabase();
     let tableName = 'places';
@@ -262,6 +261,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     }
 
     if (foundRegion) {
+      if (foundRegion.properties?.id === regionData?.id) return;
       const id = foundRegion.properties?.id;
 
       setSelectedRegion({

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

@@ -18,74 +18,99 @@ import UserXMark from '../../../../../assets/icons/user-xmark.svg';
 
 import type { MenuButtonType } from '../../../../types/components';
 import { StoreType, storage } from 'src/storage';
-import { CommonActions } from '@react-navigation/native';
-
-const buttons: MenuButtonType[] = [
-  {
-    label: 'Edit Profile',
-    icon: <UserPenIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-    buttonFn: (navigation) => {
-      navigation.navigate(NAVIGATION_PAGES.EDIT_PERSONAL_INFO);
-    }
-  },
-  {
-    label: 'Invite a Friend',
-    icon: <UserPlusIcon fill={Colors.DARK_BLUE} width={20} height={20} />
-  },
-  {
-    label: 'Notification',
-    icon: <BellIcon fill={Colors.DARK_BLUE} width={20} height={20} />
-  },
-  {
-    label: 'Contact Us',
-    icon: <MailIcon fill={Colors.DARK_BLUE} width={20} height={20} />
-  },
-  {
-    label: 'FAQs',
-    icon: <FAQIcon fill={Colors.DARK_BLUE} width={20} height={20} />
-  },
-  {
-    label: 'Terms & Conditions',
-    icon: <DocumentIcon fill={Colors.DARK_BLUE} width={20} height={20} />
-  },
-  {
-    label: 'Privacy Notice',
-    icon: <ShieldIcon fill={Colors.DARK_BLUE} width={20} height={20} />
-  },
-  {
-    label: 'Logout',
-    icon: <ExitIcon fill={Colors.RED} width={20} height={20} />,
-    red: true,
-    buttonFn: (navigation) => {
-      storage.remove('token');
-      storage.remove('uid');
-
-      navigation.dispatch(
-        CommonActions.reset({
-          index: 1,
-          routes: [{ name: NAVIGATION_PAGES.WELCOME }]
-        })
-      );
-    }
-  },
-  {
-    label: 'Delete account',
-    icon: <UserXMark fill={Colors.RED} width={20} height={20} />,
-    red: true
-  }
-];
+import { CommonActions, useNavigation } from '@react-navigation/native';
 
 const Settings = () => {
   const [isSubscribed, setIsSubscribed] = useState(false);
-  const [warningVisible, setWarningVisible] = useState(false);
-  const [askPermission, setAskPermission] = useState(false);
   const [shouldOpenWarningModal, setShouldOpenWarningModal] = useState(false);
+  const navigation = useNavigation();
+  const [modalInfo, setModalInfo] = useState({
+    visible: false,
+    type: 'confirm',
+    message: '',
+    action: () => {}
+  });
+
+  const openModal = (type: string, message: string, action: any) => {
+    setModalInfo({
+      visible: true,
+      type,
+      message,
+      action
+    });
+  };
+
+  const closeModal = () => {
+    setModalInfo({ ...modalInfo, visible: false });
+  };
+
+  const buttons: MenuButtonType[] = [
+    {
+      label: 'Edit Profile',
+      icon: <UserPenIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
+      buttonFn: (navigation) => {
+        navigation.navigate(NAVIGATION_PAGES.EDIT_PERSONAL_INFO);
+      }
+    },
+    {
+      label: 'Invite a Friend',
+      icon: <UserPlusIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+    },
+    {
+      label: 'Notification',
+      icon: <BellIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+    },
+    {
+      label: 'Contact Us',
+      icon: <MailIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+    },
+    {
+      label: 'FAQs',
+      icon: <FAQIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+    },
+    {
+      label: 'Terms & Conditions',
+      icon: <DocumentIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+    },
+    {
+      label: 'Privacy Notice',
+      icon: <ShieldIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+    },
+    {
+      label: 'Logout',
+      icon: <ExitIcon fill={Colors.RED} width={20} height={20} />,
+      red: true,
+      buttonFn: () => openModal('confirm', 'Are you sure you want to logout?', handleLogout)
+    },
+    {
+      label: 'Delete account',
+      icon: <UserXMark fill={Colors.RED} width={20} height={20} />,
+      red: true,
+      buttonFn: () =>
+        openModal('confirm', 'Are you sure you want to delete your account?', handleDeleteAccount)
+    }
+  ];
 
   useEffect(() => {
     const subscribed = (storage.get('subscribed', StoreType.BOOLEAN) as boolean) ?? false;
     setIsSubscribed(subscribed);
   }, []);
 
+  const handleLogout = () => {
+    storage.remove('token');
+    storage.remove('uid');
+    navigation.dispatch(
+      CommonActions.reset({
+        index: 1,
+        routes: [{ name: NAVIGATION_PAGES.WELCOME }]
+      })
+    );
+  };
+
+  const handleDeleteAccount = () => {
+    console.log('Account deleted');
+  };
+
   const handleSubscribe = async () => {
     const token = await registerForPushNotificationsAsync();
     if (token) {
@@ -104,12 +129,18 @@ const Settings = () => {
     }
   };
 
-  const toggleSwitch = async () => {
+  const toggleSwitch = () => {
     if (isSubscribed) {
       storage.set('subscribed', false);
       setIsSubscribed(false);
     } else {
-      setAskPermission(true);
+      setModalInfo({
+        visible: true,
+        type: 'success',
+        message:
+          'To use this feature we need your permission to access your notifications. If you press OK your system will ask you to confirm permission to receive notifications from NomadMania.',
+        action: () => setShouldOpenWarningModal(true)
+      });
     }
   };
 
@@ -122,7 +153,14 @@ const Settings = () => {
       finalStatus = status;
     }
     if (finalStatus !== 'granted') {
-      setWarningVisible(true);
+      setModalInfo({
+        visible: true,
+        type: 'success',
+        message:
+          'NomadMania app needs notification permissions to function properly. Open settings?',
+        action: () =>
+          Platform.OS === 'ios' ? Linking.openURL('app-settings:') : Linking.openSettings()
+      });
       return null;
     }
     token = (await Notifications.getExpoPushTokenAsync()).data;
@@ -156,7 +194,8 @@ const Settings = () => {
           display: 'flex',
           flexDirection: 'row',
           justifyContent: 'space-between',
-          marginTop: 20
+          marginTop: 20,
+          alignItems: 'center'
         }}
       >
         <Text style={{ color: Colors.DARK_BLUE, fontSize: 16, fontWeight: 'bold' }}>
@@ -170,30 +209,20 @@ const Settings = () => {
         />
       </View>
       <WarningModal
-        isVisible={askPermission}
-        onClose={() => setAskPermission(false)}
+        isVisible={modalInfo.visible}
+        onClose={closeModal}
         onModalHide={() => {
           if (shouldOpenWarningModal) {
             setShouldOpenWarningModal(false);
             handleSubscribe();
           }
         }}
-        type="success"
-        action={() => {
-          setAskPermission(false);
-          setShouldOpenWarningModal(true);
-        }}
-        message="To use this feature we need your permission to access your notifications. If you press OK your system will ask you to confirm permission to receive notifications from NomadMania."
-      />
-      <WarningModal
-        isVisible={warningVisible}
-        onClose={() => setWarningVisible(false)}
-        type="success"
+        type={modalInfo.type}
+        message={modalInfo.message}
         action={() => {
-          Platform.OS === 'ios' ? Linking.openURL('app-settings:') : Linking.openSettings();
-          setWarningVisible(false);
+          modalInfo.action();
+          closeModal();
         }}
-        message="NomadMania app needs notification permissions to function properly. Open settings?"
       />
     </PageWrapper>
   );

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC, ReactNode, useState } from 'react';
 import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { Image } from 'expo-image';
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import { CommonActions, NavigationProp, useNavigation } from '@react-navigation/native';
 
 import {
@@ -25,12 +24,8 @@ import { styles } from './styles';
 import { ButtonVariants } from '../../../types/components';
 
 import { API_HOST } from '../../../constants';
-
 import { NAVIGATION_PAGES } from '../../../types';
-import { navigationOpts } from './navigation-opts';
-
 import { storage, StoreType } from '../../../storage';
-
 import { getFontSize, getYears } from '../../../utils';
 
 import IconFacebook from '../../../../assets/icons/facebook.svg';
@@ -41,8 +36,6 @@ import IconGlobe from '../../../../assets/icons/bottom-navigation/globe.svg';
 import IconLink from '../../../../assets/icons/link.svg';
 import GearIcon from '../../../../assets/icons/gear.svg';
 
-const Tab = createMaterialTopTabNavigator();
-
 type Props = {
   navigation: NavigationProp<any>;
   route: any;
@@ -116,32 +109,17 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
           </View>
         </View>
       </View>
-      <Tab.Navigator
-        screenOptions={{
-          ...navigationOpts,
-          tabBarLabel: ({ children, color, focused }) => (
-            <Text style={[styles.headerText, { color }]}>{children}</Text>
-          )
+      <PersonalInfo
+        data={{
+          bio: data.bio,
+          date_of_birth: data.date_of_birth,
+          scores: data.scores,
+          links: data.links,
+          homebase: data.homebase_name,
+          homebase2: data.homebase2_name,
+          series: data.series
         }}
-      >
-        <Tab.Screen name="Personal Info">
-          {() => (
-            <PersonalInfo
-              data={{
-                bio: data.bio,
-                date_of_birth: data.date_of_birth,
-                scores: data.scores,
-                links: data.links,
-                homebase: data.homebase_name,
-                homebase2: data.homebase2_name,
-                series: data.series
-              }}
-            />
-          )}
-        </Tab.Screen>
-        <Tab.Screen name="Ranking">{() => <View></View>}</Tab.Screen>
-        <Tab.Screen name="Photos">{() => <View></View>}</Tab.Screen>
-      </Tab.Navigator>
+      />
     </PageWrapper>
   );
 };
@@ -175,18 +153,17 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
       style={{ marginTop: 20 }}
     >
       <InfoItem inline={true} title={'RANKING'}>
-        {data.scores?.map((data, index) => {
-          if (!data.score) return null;
-          return (
-            <View
-              key={index}
-              style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center' }}
-            >
-              <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
-              <Text style={[styles.titleText, { flex: 0 }]}>{data.name}</Text>
-            </View>
-          );
-        })}
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+          {data.scores?.map((data, index) => {
+            if (!data.score) return null;
+            return (
+              <View key={index} style={styles.rankingItem}>
+                <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
+                <Text style={[styles.titleText, { flex: 0 }]}>{data.name}</Text>
+              </View>
+            );
+          })}
+        </View>
       </InfoItem>
       <InfoItem showMore={showMoreSeries} inline={true} title={'SERIES BADGES'}>
         {data.series?.slice(0, showMoreSeries ? data.series.length : 8).map((data, index) => (

src/screens/InAppScreens/ProfileScreen/styles.ts

@@ -16,6 +16,13 @@ export const styles = StyleSheet.create({
     color: Colors.DARK_BLUE,
     fontSize: getFontSize(14)
   },
+  rankingItem: {
+    width: '23%',
+    margin: '1%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
   titleText: {
     flex: 1,
     color: Colors.DARK_BLUE,