unfriend and modal fixes

src/screens/InAppScreens/ProfileScreen/Components/FriendStatus.tsx

@@ -49,34 +49,6 @@ const FriendStatus: FC<FriendStatusProps> = ({
           </TouchableOpacity>
         </View>
       );
-    case 1:
-      return (
-        <View style={styles.statusContainer}>
-          <Text style={styles.statusTitle}>Friend</Text>
-          <TouchableOpacity
-            style={[
-              styles.statusBtn,
-              {
-                paddingVertical: 8,
-                paddingHorizontal: 12,
-                backgroundColor: Colors.RED,
-                flex: 1
-              }
-            ]}
-            onPress={() =>
-              setModalInfo({
-                isVisible: true,
-                type: 'confirm',
-                message: `Are you sure you want to unfriend ${data.firstName} ${data.lastName}?`,
-                action: () => handleUpdateFriendStatus(-1),
-                title: ''
-              })
-            }
-          >
-            <Text style={styles.statusText}>Unfriend</Text>
-          </TouchableOpacity>
-        </View>
-      );
     case 2:
       return (
         <View style={styles.statusContainer}>

src/screens/InAppScreens/ProfileScreen/Components/PersonalInfo.tsx

@@ -448,9 +448,9 @@ export const PersonalInfo: FC<PersonalInfoProps> = ({
         type={modalInfo.type}
         isVisible={modalInfo.isVisible}
         message={modalInfo.message}
+        action={modalInfo.action}
         onClose={() => setModalInfo({ ...modalInfo, isVisible: false })}
         title=""
-        onModalHide={modalInfo.action}
       />
     </>
   );

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

@@ -55,13 +55,6 @@ const MyFriendsScreen: FC<Props> = ({ navigation }) => {
   });
   const { mutateAsync: updateFriendStatus } = usePostUpdateFriendStatusMutation();
   const { mutateAsync: hideShowRequest } = usePostHideShowRequestMutation();
-  const [modalInfo, setModalInfo] = useState({
-    type: 'friend',
-    message: '',
-    isVisible: false,
-    action: () => {},
-    title: ''
-  });
 
   useEffect(() => {
     if (filter.age || filter.ranking || filter.country) {
@@ -306,15 +299,6 @@ const MyFriendsScreen: FC<Props> = ({ navigation }) => {
         }}
         countriesData={masterCountries}
       />
-      <WarningModal
-        type={modalInfo.type}
-        isVisible={modalInfo.isVisible}
-        message={modalInfo.message}
-        action={modalInfo.action}
-        onClose={() => setModalInfo({ ...modalInfo, isVisible: false })}
-        title=""
-        onModalHide={() => setModalInfo({ ...modalInfo, isVisible: false })}
-      />
     </PageWrapper>
   );
 };

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -1,10 +1,16 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import { Linking, ScrollView, Text, TouchableOpacity, View, Image, Platform } from 'react-native';
 import { CommonActions, NavigationProp, useFocusEffect } from '@react-navigation/native';
 
 import { usePostGetProfileInfoDataQuery, usePostGetProfileUpdatesQuery } from '@api/user';
 
-import { PageWrapper, Loading, AvatarWithInitials, Header } from '../../../components';
+import {
+  PageWrapper,
+  Loading,
+  AvatarWithInitials,
+  Header,
+  WarningModal
+} from '../../../components';
 import { adaptiveStyle, Colors } from '../../../theme';
 import { styles } from './styles';
 
@@ -24,10 +30,12 @@ import TBTIcon from '../../../../assets/icons/tbt.svg';
 import TickIcon from '../../../../assets/icons/tick.svg';
 import UNIcon from '../../../../assets/icons/un_icon.svg';
 import NMIcon from '../../../../assets/icons/nm_icon.svg';
+import ChevronIcon from '../../../../assets/icons/chevron-left.svg';
 
 import { ProfileStyles, ScoreStyles, TBTStyles } from '../TravellersScreen/Components/styles';
 import UnauthenticatedProfileScreen from './UnauthenticatedProfileScreen';
 import { PersonalInfo } from './Components/PersonalInfo';
+import { usePostUpdateFriendStatusMutation } from '@api/friends';
 
 type Props = {
   navigation: NavigationProp<any>;
@@ -52,6 +60,9 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
     isPublicView ? route.params?.userId : +currentUserId,
     true
   );
+  const { mutateAsync: updateFriendStatus } = usePostUpdateFriendStatusMutation();
+  const [isModalVisible, setIsModalVisible] = React.useState(false);
+  const [isFriend, setIsFriend] = React.useState<0 | 1>(0);
 
   useFocusEffect(
     useCallback(() => {
@@ -71,6 +82,10 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
     }, [navigation])
   );
 
+  useEffect(() => {
+    setIsFriend(userData?.data?.is_friend ?? 0);
+  }, [userData]);
+
   if (!userData?.data || !lastUpdates?.data || isFetching) return <Loading />;
 
   const data = userData.data;
@@ -138,6 +153,17 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
     );
   };
 
+  const handleUpdateFriendStatus = async () => {
+    await updateFriendStatus(
+      { token: token as string, id: data.friend_db_id, status: -1 },
+      {
+        onSuccess: () => {
+          setIsFriend(0);
+        }
+      }
+    );
+  };
+
   return (
     <PageWrapper>
       {isPublicView && <Header label="Profile" />}
@@ -176,9 +202,19 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
           </View>
           <View style={{ gap: 5, flex: 1 }}>
             <View style={{ height: 34 }}></View>
-            <Text style={[styles.headerText, { fontSize: getFontSize(18), flex: 0 }]}>
-              {data.user_data.first_name} {data.user_data.last_name}
-            </Text>
+            <View style={styles.nameRow}>
+              <Text style={[styles.headerText, { fontSize: getFontSize(18), flex: 0 }]}>
+                {data.user_data.first_name} {data.user_data.last_name}
+              </Text>
+              {isFriend === 1 && token ? (
+                <TouchableOpacity style={styles.friend} onPress={() => setIsModalVisible(true)}>
+                  <Text style={styles.friendText}>Friend</Text>
+                  <View style={{ transform: 'rotate(180deg)' }}>
+                    <ChevronIcon fill={Colors.WHITE} height={8} />
+                  </View>
+                </TouchableOpacity>
+              ) : null}
+            </View>
 
             <View style={styles.userInfoContainer}>
               <View style={styles.userInfo}>
@@ -263,7 +299,7 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
             lastName: data.user_data.last_name,
             friendRequestSent: data.friend_request_sent,
             friendRequestReceived: data.friend_request_received,
-            isFriend: data.is_friend,
+            isFriend,
             friendDbId: data.friend_db_id
           }}
           updates={lastUpdates.data.updates}
@@ -273,6 +309,15 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
           token={token ? token : null}
         />
       </ScrollView>
+
+      <WarningModal
+        type={'confirm'}
+        isVisible={isModalVisible}
+        message={`Are you sure you want to unfriend ${data.user_data.first_name} ${data.user_data.last_name}?`}
+        action={handleUpdateFriendStatus}
+        onClose={() => setIsModalVisible(false)}
+        title=""
+      />
     </PageWrapper>
   );
 };

src/screens/InAppScreens/ProfileScreen/styles.ts

@@ -68,5 +68,25 @@ export const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   badgeRoot: { flex: 0, justifyContent: 'flex-end', marginTop: 0 },
-  ageText: { color: Colors.DARK_BLUE, fontWeight: '600', fontSize: getFontSize(12) }
+  ageText: { color: Colors.DARK_BLUE, fontWeight: '600', fontSize: getFontSize(12) },
+  friend: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+    gap: 4,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    backgroundColor: Colors.ORANGE,
+  },
+  friendText: {
+    fontSize: getFontSize(10),
+    fontFamily: 'redhat-600',
+    color: Colors.WHITE
+  },
+  nameRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  }
 });

src/utils/request.ts

@@ -23,7 +23,9 @@ export const setupInterceptors = ({ showError }: { showError: (message: string)
   request.interceptors.response.use(
     (response) => {
       if (response.data.result === 'ERROR' && response.data.result_description) {
-        showError(response.data.result_description);
+        setTimeout(() => {
+          showError(response.data.result_description);
+        }, 1000);
       }
       return response;
     },