fullscreen friends + unfriend button

3 files changed, 29 insertions, 31 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 56ae1e51..28000dd7 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -25,11 +25,9 @@ import {
 import {
   blockUnblockUser,
   deleteUserMomentsForCategory,
-  friendUnfriendUser,
   loadFriendsData,
   updateMomentCategories,
   updateUserXFriends,
-  updateUserXProfileAllScreens,
 } from '../../store/actions';
 import {
   EMPTY_MOMENTS_LIST,
diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index ec2b6a68..44ce4e63 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -1,27 +1,27 @@
 import React from 'react';
-import {View, StyleSheet, Text, ScrollView} from 'react-native';
+import {View, StyleSheet, ScrollView} from 'react-native';
 import {ProfilePreviewType, ScreenType} from '../../types';
 import {ProfilePreview} from '..';
-import {useNavigation} from '@react-navigation/native';
 import {Button} from 'react-native-elements';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {RootState} from '../../store/rootReducer';
 import {useDispatch, useStore} from 'react-redux';
 import {handleUnfriend} from '../../utils/friends';
+import {NO_USER} from '../../store/initialStates';
 
 interface FriendsProps {
   result: Array<ProfilePreviewType>;
   screenType: ScreenType;
-  userXId: string;
+  userId: string;
 }
 
-const Friends: React.FC<FriendsProps> = ({result, screenType, userXId}) => {
-  const navigation = useNavigation();
-
+const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
 
+  const {user: loggedInUser = NO_USER} = state;
+
   return (
     <ScrollView
       keyboardShouldPersistTaps={'always'}
@@ -37,14 +37,16 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userXId}) => {
             previewType={'Friend'}
             screenType={screenType}
           />
-          <Button
-            title={'Unfriend'}
-            buttonStyle={styles.requestedButton}
-            titleStyle={styles.requestedButtonTitle}
-            onPress={() =>
-              handleUnfriend(screenType, profilePreview, dispatch, state)
-            } // unfriend, no record status
-          />
+          {loggedInUser.userId === userId && (
+            <Button
+              title={'Unfriend'}
+              buttonStyle={styles.button}
+              titleStyle={styles.buttonTitle}
+              onPress={() =>
+                handleUnfriend(screenType, profilePreview, dispatch, state)
+              }
+            />
+          )}
         </View>
       ))}
     </ScrollView>
@@ -71,21 +73,13 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     paddingLeft: '26%',
   },
-  button: {
-    backgroundColor: 'transparent',
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: 18,
-    fontWeight: '400',
-  },
   scrollView: {},
   scrollViewContent: {
     paddingBottom: SCREEN_HEIGHT / 15,
     paddingLeft: '4%',
     marginTop: '5%',
   },
-  requestedButton: {
+  button: {
     justifyContent: 'center',
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.25,
@@ -98,10 +92,10 @@ const styles = StyleSheet.create({
     padding: 0,
     backgroundColor: 'transparent',
   },
-  requestedButtonTitle: {
+  buttonTitle: {
     color: TAGG_LIGHT_BLUE,
     padding: 0,
-    fontSize: 14,
+    fontSize: normalize(14),
     fontWeight: '700',
   },
 });
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 45913877..159798de 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -15,7 +15,13 @@ import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
 import {loadImageFromURL} from '../../services';
 import {RootState} from '../../store/rootreducer';
 import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
-import {checkIfUserIsBlocked, fetchUserX, SCREEN_WIDTH, userXInStore} from '../../utils';
+import {
+  checkIfUserIsBlocked,
+  fetchUserX,
+  normalize,
+  SCREEN_WIDTH,
+  userXInStore,
+} from '../../utils';
 
 /**
  * This component returns user's profile picture friended by username as a touchable component.
@@ -322,13 +328,13 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
   },
   friendUsername: {
-    fontSize: 14,
+    fontSize: normalize(14),
     fontWeight: '500',
     color: '#3C3C3C',
     letterSpacing: 0.6,
   },
   friendName: {
-    fontSize: 12,
+    fontSize: normalize(12),
     fontWeight: '400',
     color: '#6C6C6C',
     letterSpacing: 0.5,