Merge pull request #212 from shravyaramesh/tma590-friendslist-buttons

[TMA-590] New Friends Screen

16 files changed, 452 insertions, 155 deletions

diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
new file mode 100644
index 00000000..6ef23a96
--- /dev/null
+++ b/src/components/common/FriendsButton.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Button} from 'react-native-elements';
+import {ScreenType} from '../../types';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {handleFriendUnfriend, SCREEN_WIDTH} from '../../utils';
+import {NO_PROFILE, NO_USER} from '../../store/initialStates';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {RootState} from '../../store/rootReducer';
+
+interface ProfileBodyProps {
+  userXId: string | undefined;
+  screenType: ScreenType;
+}
+const FriendsButton: React.FC<ProfileBodyProps> = ({userXId, screenType}) => {
+  const dispatch = useDispatch();
+
+  const {user = NO_USER, profile = NO_PROFILE} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
+
+  const {user: loggedInUser = NO_USER} = useSelector(
+    (state: RootState) => state.user,
+  );
+
+  const state = useStore().getState();
+
+  const {friendship_status} = profile;
+
+  return (
+    <>
+      {friendship_status === 'no_record' && (
+        <Button
+          title={'Add Friend'}
+          buttonStyle={styles.button}
+          titleStyle={styles.buttonTitle}
+          onPress={() =>
+            handleFriendUnfriend(
+              screenType,
+              user,
+              profile,
+              dispatch,
+              state,
+              loggedInUser,
+            )
+          } // requested, requested status
+        />
+      )}
+      {friendship_status === 'friends' && (
+        <Button
+          title={'Unfriend'}
+          buttonStyle={styles.requestedButton}
+          titleStyle={styles.requestedButtonTitle}
+          onPress={() =>
+            handleFriendUnfriend(
+              screenType,
+              user,
+              profile,
+              dispatch,
+              state,
+              loggedInUser,
+            )
+          } // unfriend, no record status
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  requestedButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.4,
+    height: SCREEN_WIDTH * 0.075,
+    borderColor: TAGG_LIGHT_BLUE,
+    borderWidth: 2,
+    borderRadius: 0,
+    marginRight: '2%',
+    marginLeft: '1%',
+    padding: 0,
+    backgroundColor: 'transparent',
+  },
+  requestedButtonTitle: {
+    color: TAGG_LIGHT_BLUE,
+    padding: 0,
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  buttonTitle: {
+    color: 'white',
+    padding: 0,
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.4,
+    height: SCREEN_WIDTH * 0.075,
+    padding: 0,
+    borderWidth: 2,
+    borderColor: TAGG_LIGHT_BLUE,
+    borderRadius: 0,
+    marginRight: '2%',
+    marginLeft: '1%',
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+});
+
+export default FriendsButton;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index a5718c1e..95854ba8 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -20,4 +20,5 @@ export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
 export {default as TaggPopUp} from './TaggPopup';
 export {default as TaggPrompt} from './TaggPrompt';
 export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
+export {default as FriendsButton} from './FriendsButton';
 export {default as TaggSquareButton} from './TaggSquareButton';
diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
index bd5b307f..6cdfe0e8 100644
--- a/src/components/moments/IndividualMomentTitleBar.tsx
+++ b/src/components/moments/IndividualMomentTitleBar.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {TouchableOpacity} from 'react-native';
 import {Text, View, StyleSheet, ViewProps} from 'react-native';
+import {normalize} from '../../utils';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 
 interface IndividualMomentTitleBarProps extends ViewProps {
@@ -30,9 +31,11 @@ const styles = StyleSheet.create({
     height: '5%',
   },
   header: {
-    fontSize: 20,
-    fontWeight: 'bold',
     color: 'white',
+    fontSize: normalize(18),
+    fontWeight: '700',
+    lineHeight: normalize(21.48),
+    letterSpacing: normalize(1.3),
   },
   closeButton: {
     position: 'absolute',
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index a35a5820..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,
@@ -216,31 +214,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     }
   }, [blockedUsers, user]);
 
-  // Handles click on friend/requested/unfriend button
-  /*
-   * When user logged in clicks on the friend button:
-   A request is sent.
-   Which means you have to update the status of their friendshpi to requested
-   When the status is changed to requested the button should change to requested.
-   When the button is changed to requested and thr user clicks on it,
-   a request much go to the backend to delete that request
-   When that succeeds, their friendship must be updated to no-record again;
-   When the button is changed to no_record, the add friends button should be displayed again
-   */
-  const handleFriendUnfriend = async () => {
-    const {friendship_status} = profile;
-    await dispatch(
-      friendUnfriendUser(
-        loggedInUser,
-        getUserAsProfilePreviewType(user, profile),
-        friendship_status,
-        screenType,
-      ),
-    );
-    await dispatch(updateUserXFriends(user.userId, state));
-    dispatch(updateUserXProfileAllScreens(user.userId, state));
-  };
-
   /**
    * Handles a click on the block / unblock button.
    * loadFriends updates friends list for the logged in user
@@ -332,7 +305,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
           userXId,
           screenType,
           isFriend,
-          handleFriendUnfriend,
           handleBlockUnblock,
           isBlocked,
         }}
diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index 23ce28fe..9b9e5302 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -1,64 +1,123 @@
 import React from 'react';
-import {View, StyleSheet, Text} from 'react-native';
+import {View, StyleSheet, ScrollView, Text} from 'react-native';
 import {ProfilePreviewType, ScreenType} from '../../types';
 import {ProfilePreview} from '..';
-import {useNavigation} from '@react-navigation/native';
 import {Button} from 'react-native-elements';
+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';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 
 interface FriendsProps {
   result: Array<ProfilePreviewType>;
   screenType: ScreenType;
+  userId: string;
 }
 
-const Friends: React.FC<FriendsProps> = ({result, screenType}) => {
-  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 (
     <>
-      <View style={styles.header}>
-        <Button
-          title="X"
-          buttonStyle={styles.button}
-          titleStyle={styles.buttonText}
-          onPress={() => {
-            navigation.pop();
-          }}
-        />
-        <Text style={styles.title}>Friends</Text>
+      <View style={styles.subheader}>
+        <Text style={styles.subheaderText}>Friends</Text>
       </View>
-      {result.map((profilePreview) => (
-        <ProfilePreview
-          style={styles.friend}
-          key={profilePreview.id}
-          {...{profilePreview}}
-          previewType={'Friend'}
-          screenType={screenType}
-        />
-      ))}
+      <ScrollView
+        keyboardShouldPersistTaps={'always'}
+        stickyHeaderIndices={[4]}
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollViewContent}
+        showsVerticalScrollIndicator={false}>
+        {result.map((profilePreview) => (
+          <View key={profilePreview.id} style={styles.container}>
+            <View style={styles.friend}>
+              <ProfilePreview
+                {...{profilePreview}}
+                previewType={'Friend'}
+                screenType={screenType}
+              />
+            </View>
+            {loggedInUser.userId === userId && (
+              <TouchableOpacity
+                style={styles.button}
+                onPress={() =>
+                  handleUnfriend(screenType, profilePreview, dispatch, state)
+                }>
+                <Text style={styles.buttonTitle}>Unfriend</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        ))}
+      </ScrollView>
     </>
   );
 };
 
 const styles = StyleSheet.create({
+  scrollView: {
+    flexDirection: 'column',
+    alignSelf: 'center',
+    width: SCREEN_WIDTH * 0.85,
+    height: SCREEN_HEIGHT,
+  },
+  scrollViewContent: {
+    alignSelf: 'center',
+    paddingBottom: SCREEN_HEIGHT / 15,
+    width: SCREEN_WIDTH * 0.85,
+    height: SCREEN_HEIGHT * 0.75,
+    marginTop: '1%',
+  },
   header: {flexDirection: 'row'},
-  friend: {
-    marginVertical: 10,
+  subheader: {
+    alignSelf: 'center',
+    width: SCREEN_WIDTH * 0.85,
+    marginVertical: '3%',
+  },
+  subheaderText: {
+    color: '#828282',
+    fontSize: normalize(12),
+    fontWeight: '600',
+    lineHeight: normalize(14.32),
   },
-  title: {
-    position: 'relative',
-    fontSize: 17,
-    fontWeight: 'bold',
-    paddingBottom: 10,
-    paddingTop: 10,
-    flexGrow: 1,
-    paddingLeft: '26%',
+  container: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: normalize(42),
+    alignItems: 'center',
+    marginBottom: '5%',
+  },
+  friend: {
+    alignSelf: 'center',
+    height: '100%',
   },
   button: {
+    alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '55%',
+    borderColor: TAGG_LIGHT_BLUE,
+    borderWidth: 2,
+    borderRadius: 2,
+    padding: 0,
     backgroundColor: 'transparent',
   },
-  buttonText: {
-    color: 'black',
-    fontSize: 18,
-    fontWeight: '400',
+  buttonTitle: {
+    color: TAGG_LIGHT_BLUE,
+    padding: 0,
+    fontSize: normalize(11),
+    fontWeight: '700',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '3.8%',
   },
 });
 
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index f2d75519..106b20a7 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -9,14 +9,17 @@ import {
 import ToggleButton from './ToggleButton';
 import {RootState} from '../../store/rootReducer';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {FriendshipStatusType, ScreenType} from '../../types';
-import {NO_PROFILE} from '../../store/initialStates';
-import {getUserAsProfilePreviewType, SCREEN_WIDTH} from '../../utils';
-import {AcceptDeclineButtons} from '../common';
+import {ScreenType} from '../../types';
+import {NO_PROFILE, NO_USER} from '../../store/initialStates';
+import {
+  getUserAsProfilePreviewType,
+  handleFriendUnfriend,
+  SCREEN_WIDTH,
+} from '../../utils';
+import {AcceptDeclineButtons, FriendsButton} from '../common';
 import {
   acceptFriendRequest,
   declineFriendRequest,
-  loadUserNotifications,
   updateUserXFriends,
   updateUserXProfileAllScreens,
 } from '../../store/actions';
@@ -24,7 +27,6 @@ import {
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
   isBlocked: boolean;
-  handleFriendUnfriend: () => void;
   handleBlockUnblock: () => void;
   userXId: string | undefined;
   screenType: ScreenType;
@@ -32,7 +34,6 @@ interface ProfileBodyProps {
 const ProfileBody: React.FC<ProfileBodyProps> = ({
   onLayout,
   isBlocked,
-  handleFriendUnfriend,
   handleBlockUnblock,
   userXId,
   screenType,
@@ -41,6 +42,10 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.user);
 
+  const {user: loggedInUser = NO_USER} = useSelector(
+    (state: RootState) => state.user,
+  );
+
   const {
     biography,
     website,
@@ -94,29 +99,23 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
       )}
       {userXId && !isBlocked && (
         <View style={styles.buttonsContainer}>
-          {friendship_status === 'no_record' && (
-            <Button
-              title={'Add Friend'}
-              buttonStyle={styles.button}
-              titleStyle={styles.buttonTitle}
-              onPress={handleFriendUnfriend} // requested, requested status
-            />
-          )}
-          {friendship_status === 'friends' && (
-            <Button
-              title={'Unfriend'}
-              buttonStyle={styles.requestedButton}
-              titleStyle={styles.requestedButtonTitle}
-              onPress={handleFriendUnfriend} // unfriend, no record status
-            />
-          )}
+          <FriendsButton userXId={userXId} screenType={screenType} />
           {(friendship_status === 'requested' &&
             friendship_requester_id !== userXId && (
               <Button
                 title={'Requested'}
                 buttonStyle={styles.requestedButton}
                 titleStyle={styles.requestedButtonTitle}
-                onPress={handleFriendUnfriend} // delete request, no record status
+                onPress={() =>
+                  handleFriendUnfriend(
+                    screenType,
+                    user,
+                    profile,
+                    dispatch,
+                    state,
+                    loggedInUser,
+                  )
+                } // delete request, no record status
               />
             )) ||
             (friendship_status === 'requested' &&
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 38defb8d..fad3ec09 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, 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.
@@ -308,29 +314,31 @@ const styles = StyleSheet.create({
   friendContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginVertical: 10,
+    justifyContent: 'flex-start',
+    width: SCREEN_WIDTH * 0.6,
   },
   friendAvatar: {
-    height: 42,
-    width: 42,
+    height: normalize(42),
+    width: normalize(42),
     marginRight: 15,
-    borderRadius: 20,
+    borderRadius: 50,
   },
   friendNameContainer: {
+    height: '100%',
     justifyContent: 'space-evenly',
     alignSelf: 'stretch',
   },
   friendUsername: {
-    fontSize: 14,
-    fontWeight: '700',
-    color: '#3C3C3C',
-    letterSpacing: 0.6,
+    fontSize: normalize(14),
+    fontWeight: '500',
+    color: '#000',
+    letterSpacing: normalize(0.1),
   },
   friendName: {
-    fontSize: 12,
-    fontWeight: '500',
+    fontSize: normalize(12),
+    fontWeight: '400',
     color: '#6C6C6C',
-    letterSpacing: 0.5,
+    letterSpacing: normalize(0.1),
   },
 });
 
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 76fc55e0..c0cef3ea 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -197,9 +197,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       <MainStack.Screen
         name="FriendsListScreen"
         component={FriendsListScreen}
-        options={{
-          ...modalStyle,
-        }}
         initialParams={{screenType}}
       />
       <MainStack.Screen
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index f7192d10..26d19e60 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,14 +1,18 @@
-import React, {useState} from 'react';
-import {RouteProp} from '@react-navigation/native';
-import {TabsGradient, Friends, CenteredView} from '../../components';
-import {ScrollView} from 'react-native-gesture-handler';
-import {SCREEN_HEIGHT} from '../../utils';
-import {StyleSheet, View} from 'react-native';
+import React from 'react';
+import {RouteProp, useNavigation} from '@react-navigation/native';
+import {TabsGradient, Friends} from '../../components';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  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';
 
 type FriendsListScreenRouteProp = RouteProp<
   ProfileStackParams,
@@ -20,51 +24,66 @@ interface FriendsListScreenProps {
 
 const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   const {userXId, screenType} = route.params;
+  const navigation = useNavigation();
 
   const {friends} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.friends);
 
   return (
-    <CenteredView>
-      <View style={styles.modalView}>
-        <ScrollView
-          keyboardShouldPersistTaps={'always'}
-          stickyHeaderIndices={[4]}
-          contentContainerStyle={styles.contentContainer}
-          showsVerticalScrollIndicator={false}>
-          <Friends result={friends} screenType={screenType} />
-        </ScrollView>
-        <TabsGradient />
-      </View>
-    </CenteredView>
+    <View style={styles.background}>
+      <SafeAreaView>
+        <View style={styles.header}>
+          <TouchableOpacity
+            style={styles.headerButton}
+            onPress={() => {
+              navigation.pop();
+            }}>
+            <BackIcon height={'100%'} width={'100%'} color={'white'} />
+          </TouchableOpacity>
+          <Text style={styles.headerText}>Friends</Text>
+        </View>
+        <View style={styles.body}>
+          <Friends result={friends} screenType={screenType} userId={userXId} />
+        </View>
+      </SafeAreaView>
+      <TabsGradient />
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  contentContainer: {
-    paddingBottom: SCREEN_HEIGHT / 15,
-    paddingHorizontal: 15,
-    marginTop: '5%',
+  background: {
+    backgroundColor: 'white',
+    height: '100%',
   },
-  modalView: {
-    width: '85%',
-    height: '70%',
-    backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOpacity: 30,
-    shadowOffset: {width: 0, height: 2},
-    shadowRadius: 5,
-    borderRadius: 8,
-    paddingBottom: 15,
-    paddingHorizontal: 20,
-    justifyContent: 'space-between',
-  },
-  modalScrollViewContent: {
+  header: {
+    flexDirection: 'column',
     justifyContent: 'center',
+    height: SCREEN_HEIGHT * 0.05,
+    padding: '3%',
+    paddingBottom: 0,
+    marginTop: '1%',
+  },
+  headerText: {
+    position: 'absolute',
+    alignSelf: 'center',
+    fontSize: normalize(18),
+    fontWeight: '700',
+    lineHeight: normalize(21.48),
+    letterSpacing: normalize(1.3),
+  },
+  headerButton: {
+    width: '5%',
+    aspectRatio: 1,
+    padding: 0,
+    marginLeft: '5%',
+    alignSelf: 'flex-start',
+    marginBottom: '1%',
   },
-  modalScrollView: {
-    marginBottom: 10,
+  body: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.8,
   },
 });
 
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 5c3b8579..ec193db5 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -9,7 +9,7 @@ import CommentsContainer from '../../components/comments/CommentsContainer';
 import {ADD_COMMENT_TEXT} from '../../constants/strings';
 import {MainStackParams} from '../../routes/main';
 import {CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * Comments Screen for an image uploaded
@@ -92,8 +92,10 @@ const styles = StyleSheet.create({
   headerText: {
     position: 'absolute',
     alignSelf: 'center',
-    fontSize: 20.5,
-    fontWeight: '600',
+    fontSize: normalize(18),
+    fontWeight: '700',
+    lineHeight: normalize(21.48),
+    letterSpacing: normalize(1.3),
   },
   headerButton: {
     width: '5%',
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 0ea96cd2..9cdba555 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -29,9 +29,9 @@ const ProfileScreen: React.FC<ProfileOnboardingProps> = ({route}) => {
    * This is a double safety check to avoid app crash.
    * Checks if the required userXId is present in the store, if not userXId is set to dummy id
    */
-  if (userXId && !(userXId in useStore().getState().userX[screenType])) {
-    userXId = DUMMY_USERID;
-  }
+  // if (userXId && !(userXId in useStore().getState().userX[screenType])) {
+  //   userXId = DUMMY_USERID;
+  // }
 
   /**
    * Code under useFocusEffect gets executed every time the screen comes under focus / is being viewed by the user.
diff --git a/src/services/UserFriendsService.ts b/src/services/UserFriendsService.ts
index f2e15824..99d86d0b 100644
--- a/src/services/UserFriendsService.ts
+++ b/src/services/UserFriendsService.ts
@@ -147,3 +147,32 @@ export const acceptFriendRequestService = async (
     return false;
   }
 };
+
+export const unfriendService = async (
+  user_id: string,
+  token: string | null,
+) => {
+  try {
+    const response = await fetch(FRIENDS_ENDPOINT + `${user_id}/`, {
+      method: 'DELETE',
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+      body: JSON.stringify({
+        reason: 'unfriended',
+      }),
+    });
+    const status = response.status;
+    if (Math.floor(status / 100) === 2) {
+      return true;
+    } else {
+      console.log(await response.json());
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
+      return false;
+    }
+  } catch (error) {
+    console.log(error);
+    Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
+    return false;
+  }
+};
diff --git a/src/store/actions/userFriends.ts b/src/store/actions/userFriends.ts
index 18ad247c..763f2575 100644
--- a/src/store/actions/userFriends.ts
+++ b/src/store/actions/userFriends.ts
@@ -11,6 +11,7 @@ import {
   declineFriendRequestService,
   friendOrUnfriendUser,
   loadFriends,
+  unfriendService,
 } from '../../services';
 import {Action, ThunkAction} from '@reduxjs/toolkit';
 import {
@@ -61,15 +62,17 @@ export const friendUnfriendUser = (
           data = 'requested';
           break;
         case 'requested': // cancel request: update to no relationship
+          break;
         case 'friends': // unfriend: update to no relationship
           dispatch({
             type: updateFriends.type,
             payload: {
-              friend,
+              data: friend,
               isFriend: true,
             },
           });
           data = 'no_record';
+          break;
       }
       dispatch({
         type: userXFriendshipEdited.type,
@@ -85,6 +88,39 @@ export const friendUnfriendUser = (
   }
 };
 
+export const unfriendUser = (
+  friend: ProfilePreviewType, // userX's profile preview
+  screenType: ScreenType, //screentype from content
+): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
+  dispatch,
+) => {
+  try {
+    const token = await getTokenOrLogout(dispatch);
+    // Calls method to send post or delete request
+    const success = await unfriendService(friend.id, token);
+    if (success) {
+      let data = 'no_record';
+      await dispatch({
+        type: updateFriends.type,
+        payload: {
+          data: friend,
+          isFriend: true,
+        },
+      });
+      await dispatch({
+        type: userXFriendshipEdited.type,
+        payload: {
+          userId: friend.id,
+          screenType,
+          data,
+        },
+      });
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 export const acceptFriendRequest = (
   requester: ProfilePreviewType,
 ): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
diff --git a/src/store/reducers/userFriendsReducer.ts b/src/store/reducers/userFriendsReducer.ts
index 2041a181..92402db1 100644
--- a/src/store/reducers/userFriendsReducer.ts
+++ b/src/store/reducers/userFriendsReducer.ts
@@ -11,8 +11,14 @@ const userFriendsSlice = createSlice({
 
     updateFriends: (state, action) => {
       const {isFriend, data} = action.payload;
-      if (!isFriend) state.friends.push(data);
-      else {
+      if (!isFriend) {
+        const friendInList: boolean = state.friends.some(
+          (friend) => friend.username === data.username,
+        );
+        if (!friendInList) {
+          state.friends.push(data);
+        }
+      } else {
         state.friends = state.friends.filter(
           (friend) => friend.username !== data.username,
         );
diff --git a/src/utils/friends.ts b/src/utils/friends.ts
new file mode 100644
index 00000000..ba15e087
--- /dev/null
+++ b/src/utils/friends.ts
@@ -0,0 +1,54 @@
+// Handles click on friend/requested/unfriend button
+
+import {RootState} from '../store/rootReducer';
+import {ProfilePreviewType, ProfileType, ScreenType, UserType} from '../types';
+import {AppDispatch} from '../store/configureStore';
+import {
+  friendUnfriendUser,
+  unfriendUser,
+  updateUserXFriends,
+  updateUserXProfileAllScreens,
+} from '../store/actions';
+import {getUserAsProfilePreviewType} from './users';
+
+/*
+   * When user logged in clicks on the friend button:
+   A request is sent.
+   Which means you have to update the status of their friendshpi to requested
+   When the status is changed to requested the button should change to requested.
+   When the button is changed to requested and thr user clicks on it,
+   a request much go to the backend to delete that request
+   When that succeeds, their friendship must be updated to no-record again;
+   When the button is changed to no_record, the add friends button should be displayed again
+   */
+export const handleFriendUnfriend = async (
+  screenType: ScreenType,
+  user: UserType,
+  profile: ProfileType,
+  dispatch: AppDispatch,
+  state: RootState,
+  loggedInUser: UserType,
+) => {
+  const {friendship_status} = profile;
+  await dispatch(
+    friendUnfriendUser(
+      loggedInUser,
+      getUserAsProfilePreviewType(user, profile),
+      friendship_status,
+      screenType,
+    ),
+  );
+  await dispatch(updateUserXFriends(user.userId, state));
+  dispatch(updateUserXProfileAllScreens(user.userId, state));
+};
+
+export const handleUnfriend = async (
+  screenType: ScreenType,
+  friend: ProfilePreviewType,
+  dispatch: AppDispatch,
+  state: RootState,
+) => {
+  await dispatch(unfriendUser(friend, screenType));
+  await dispatch(updateUserXFriends(friend.id, state));
+  dispatch(updateUserXProfileAllScreens(friend.id, state));
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 629a0091..82c94100 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -2,3 +2,4 @@ export * from './layouts';
 export * from './moments';
 export * from './common';
 export * from './users';
+export * from './friends';