fullscreen friends + unfriend button

6 files changed, 36 insertions, 42 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,
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index ac3504d5..7ef5d752 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,8 +1,7 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import {TabsGradient, Friends, CenteredView} from '../../components';
-import {ScrollView} from 'react-native-gesture-handler';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {TabsGradient, Friends} from '../../components';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {
   SafeAreaView,
   StyleSheet,
@@ -11,8 +10,6 @@ import {
   View,
 } from 'react-native';
 import {ProfileStackParams} from '../../routes';
-import {ProfilePreviewType} from '../../types';
-import {EMPTY_PROFILE_PREVIEW_LIST} from '../../store/initialStates';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
 import BackIcon from '../../assets/icons/back-arrow.svg';
@@ -47,7 +44,7 @@ const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
           <Text style={styles.headerText}>Friends</Text>
         </View>
         <View style={styles.body}>
-          <Friends result={friends} screenType={screenType} userXId={userXId} />
+          <Friends result={friends} screenType={screenType} userId={userXId} />
         </View>
       </SafeAreaView>
       <TabsGradient />
@@ -88,7 +85,7 @@ const styles = StyleSheet.create({
   headerText: {
     position: 'absolute',
     alignSelf: 'center',
-    fontSize: 20.5,
+    fontSize: normalize(20.5),
     fontWeight: '600',
   },
   headerButton: {
diff --git a/src/store/actions/userFriends.ts b/src/store/actions/userFriends.ts
index ae808e9a..4d191894 100644
--- a/src/store/actions/userFriends.ts
+++ b/src/store/actions/userFriends.ts
@@ -101,7 +101,7 @@ export const unfriendUser = (
       await dispatch({
         type: updateFriends.type,
         payload: {
-          friend,
+          data: friend,
           isFriend: true,
         },
       });
diff --git a/src/utils/friends.ts b/src/utils/friends.ts
index c10cf1de..a0ff879a 100644
--- a/src/utils/friends.ts
+++ b/src/utils/friends.ts
@@ -1,8 +1,6 @@
 // Handles click on friend/requested/unfriend button
 
-import {useSelector} from 'react-redux';
 import {RootState} from '../store/rootReducer';
-import {NO_USER} from '../store/initialStates';
 import {ProfilePreviewType, ProfileType, ScreenType, UserType} from '../types';
 import {AppDispatch} from '../store/configureStore';
 import {
@@ -62,4 +60,5 @@ export const handleUnfriend = async (
 ) => {
   await dispatch(unfriendUser(friend, screenType));
   await dispatch(updateUserXFriends(friend.id, state));
+  dispatch(updateUserXProfileAllScreens(friend.id, state));
 };