Merge pull request #187 from shravyaramesh/tma538-friend-requests

[TMA485] friend request frontend

16 files changed, 588 insertions, 119 deletions

diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
new file mode 100644
index 00000000..221056c0
--- /dev/null
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {ProfilePreviewType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+
+interface AcceptDeclineButtonsProps {
+  requester: ProfilePreviewType;
+  onAccept: () => void;
+  onReject: () => void;
+  externalStyles?: Record<string, StyleProp<ViewStyle>>;
+}
+const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = ({
+  requester,
+  onAccept,
+  onReject,
+  externalStyles,
+}) => {
+  return (
+    <View style={[styles.container, externalStyles?.container]}>
+      <TouchableOpacity
+        style={[styles.genericButtonStyle, styles.acceptButton]}
+        onPress={onAccept}>
+        <Text style={[styles.buttonTitle, styles.acceptButtonTitleColor]}>
+          Accept
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[styles.genericButtonStyle, styles.rejectButton]}
+        onPress={onReject}>
+        <Text style={[styles.buttonTitle, styles.rejectButtonTitleColor]}>
+          Reject
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  genericButtonStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.14,
+    height: SCREEN_WIDTH * 0.06,
+    borderRadius: 5,
+    padding: 0,
+    marginTop: 8,
+    marginRight: '3%',
+  },
+  acceptButton: {
+    padding: 0,
+    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+  },
+  rejectButton: {
+    borderWidth: 1,
+    backgroundColor: 'white',
+    borderColor: TAGG_TEXT_LIGHT_BLUE,
+  },
+  acceptButtonTitleColor: {
+    color: 'white',
+  },
+  rejectButtonTitleColor: {
+    color: TAGG_TEXT_LIGHT_BLUE,
+  },
+  buttonTitle: {
+    padding: 0,
+    fontSize: 14,
+    fontWeight: '800',
+  },
+});
+
+export default AcceptDeclineButtons;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 9162ec70..61c7fa26 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -19,3 +19,4 @@ export {default as TaggLoadingTndicator} from './TaggLoadingIndicator';
 export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
 export {default as TaggPopUp} from './TaggPopup';
 export {default as TaggPrompt} from './TaggPrompt';
+export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 94937053..e6d16f82 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,12 +1,25 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
+import {Button} from 'react-native-elements';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {useDispatch, useStore} from 'react-redux';
+import {
+  declineFriendRequest,
+  loadUserNotifications,
+  updateUserXFriends,
+} from '../../store/actions';
+import {acceptFriendRequest} from '../../store/actions';
+import {NotificationType, ProfilePreviewType, ScreenType, MomentType} from '../../types';
+import {
+  fetchUserX,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  userXInStore,
+} from '../../utils';
+import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
 import {loadAvatar, loadMomentThumbnail} from '../../services';
-import {RootState} from '../../store/rootReducer';
-import {MomentType, NotificationType, ScreenType} from '../../types';
-import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
+
 
 interface NotificationProps {
   item: NotificationType;
@@ -26,6 +39,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
     screenType,
     moments: loggedInUserMoments,
   } = props;
+
   const navigation = useNavigation();
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
@@ -33,7 +47,6 @@ const Notification: React.FC<NotificationProps> = (props) => {
   const [avatarURI, setAvatarURI] = useState<string | undefined>(undefined);
   const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
   const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)';
-
   useEffect(() => {
     let mounted = true;
     const loadAvatarImage = async (user_id: string) => {
@@ -66,7 +79,8 @@ const Notification: React.FC<NotificationProps> = (props) => {
 
   const onNotificationTap = async () => {
     switch (notification_type) {
-      case 'FRD':
+      case 'FRD_ACPT':
+      case 'FRD_REQ':
         if (!userXInStore(state, screenType, id)) {
           await fetchUserX(
             dispatch,
@@ -103,30 +117,52 @@ const Notification: React.FC<NotificationProps> = (props) => {
     }
   };
 
+  const handleAcceptRequest = async () => {
+    await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
+    await dispatch(updateUserXFriends(id, state));
+    dispatch(loadUserNotifications());
+  };
+
+  const handleDeclineFriendRequest = async () => {
+    await dispatch(declineFriendRequest(id));
+    dispatch(loadUserNotifications());
+  };
+
   return (
-    <TouchableWithoutFeedback
-      style={[styles.container, {backgroundColor}]}
-      onPress={onNotificationTap}>
-      <View style={styles.avatarContainer}>
-        <Image
-          style={styles.avatar}
-          source={
-            avatarURI
-              ? {uri: avatarURI}
-              : require('../../assets/images/avatar-placeholder.png')
-          }
-        />
-      </View>
-      <View style={styles.contentContainer}>
-        <Text style={styles.actorName}>
-          {first_name} {last_name}
-        </Text>
-        <Text>{verbage}</Text>
-      </View>
-      {notification_type === 'CMT' && notification_object && (
+    <>
+      <TouchableWithoutFeedback
+        style={[styles.container, {backgroundColor}]}
+        onPress={onNotificationTap}>
+        <View style={styles.avatarContainer}>
+          <Image
+            style={styles.avatar}
+            source={
+              avatarURI
+                ? {uri: avatarURI, cache: 'only-if-cached'}
+                : require('../../assets/images/avatar-placeholder.png')
+            }
+          />
+        </View>
+        <View style={styles.contentContainer}>
+          <Text style={styles.actorName}>
+            {first_name} {last_name}
+          </Text>
+          <Text>{verbage}</Text>
+        </View>
+        {notification_type === 'FRD_REQ' && (
+          <View style={styles.buttonsContainer}>
+            <AcceptDeclineButtons
+              requester={{id, username, first_name, last_name}}
+              onAccept={handleAcceptRequest}
+              onReject={handleDeclineFriendRequest}
+            />
+          </View>
+        )}
+        {notification_type === 'CMT' && notification_object && (
         <Image style={styles.moment} source={{uri: momentURI}} />
       )}
-    </TouchableWithoutFeedback>
+      </TouchableWithoutFeedback>
+    </>
   );
 };
 
@@ -165,6 +201,7 @@ const styles = StyleSheet.create({
     width: 42,
     right: '5%',
   },
+  buttonsContainer: {},
 });
 
 export default Notification;
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 50516b55..e7fb566b 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -12,6 +12,8 @@ import {
 import Animated from 'react-native-reanimated';
 import {
   CategorySelectionScreenType,
+  FriendshipStatusType,
+  MomentCategoryType,
   MomentType,
   ProfilePreviewType,
   ProfileType,
@@ -19,7 +21,13 @@ import {
   UserType,
 } from '../../types';
 import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
-import {fetchUserX, moveCategory, SCREEN_HEIGHT, userLogin} from '../../utils';
+import {
+  fetchUserX,
+  getUserAsProfilePreviewType,
+  moveCategory,
+  SCREEN_HEIGHT,
+  userLogin,
+} from '../../utils';
 import TaggsBar from '../taggs/TaggsBar';
 import {Moment} from '../moments';
 import ProfileBody from './ProfileBody';
@@ -34,6 +42,7 @@ import {
   updateUserXFriends,
   updateMomentCategories,
   deleteUserMomentsForCategory,
+  updateUserXProfileAllScreens,
 } from '../../store/actions';
 import {
   NO_USER,
@@ -199,18 +208,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     ]),
   );
 
-  /**
-   * This hook is called on load of profile and when you update the friends list.
-   */
-  useEffect(() => {
-    const isActuallyAFriend = friendsLoggedInUser.some(
-      (friend) => friend.username === user.username,
-    );
-    if (isFriend != isActuallyAFriend) {
-      setIsFriend(isActuallyAFriend);
-    }
-  }, [friendsLoggedInUser]);
-
   useEffect(() => {
     const isActuallyBlocked = blockedUsers.some(
       (cur_user) => user.username === cur_user.username,
@@ -220,38 +217,29 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     }
   }, [blockedUsers, user]);
 
-  /**
-   * The object returned by this method is added to the list of blocked / friended users by the reducer.
-   * Which helps us prevent an extra api call to the backend just to fetch a 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 getUserAsProfilePreviewType = (
-    passedInUser: UserType,
-    passedInProfile: ProfileType,
-  ): ProfilePreviewType => {
-    const fullName = passedInProfile.name.split(' ');
-    return {
-      id: passedInUser.userId,
-      username: passedInUser.username,
-      first_name: fullName[0],
-      last_name: fullName[1],
-    };
-  };
-
-  /**
-   * Handles a click on the friend / unfriend button.
-   * friendUnfriendUser takes care of updating the friends list for loggedInUser
-   * updateUserXFriends updates friends list for the new friend.
-   */
-
   const handleFriendUnfriend = async () => {
+    const {friendship_status} = profile;
     await dispatch(
       friendUnfriendUser(
         loggedInUser,
         getUserAsProfilePreviewType(user, profile),
-        isFriend,
+        friendship_status,
+        screenType,
       ),
     );
     await dispatch(updateUserXFriends(user.userId, state));
+    dispatch(updateUserXProfileAllScreens(user.userId, state));
   };
 
   /**
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 57b617d8..64aec09c 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,15 +1,28 @@
 import React from 'react';
 import {StyleSheet, View, Text, LayoutChangeEvent, Linking} from 'react-native';
-import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
+import {Button} from 'react-native-elements';
+import {
+  TAGG_DARK_BLUE,
+  TAGG_TEXT_LIGHT_BLUE,
+  TOGGLE_BUTTON_TYPE,
+} from '../../constants';
 import ToggleButton from './ToggleButton';
 import {RootState} from '../../store/rootReducer';
-import {useSelector} from 'react-redux';
-import {ScreenType} from '../../types';
+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 {
+  acceptFriendRequest,
+  declineFriendRequest,
+  loadUserNotifications,
+  updateUserXFriends,
+  updateUserXProfileAllScreens,
+} from '../../store/actions';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
-  isFriend: boolean;
   isBlocked: boolean;
   handleFriendUnfriend: () => void;
   handleBlockUnblock: () => void;
@@ -18,21 +31,42 @@ interface ProfileBodyProps {
 }
 const ProfileBody: React.FC<ProfileBodyProps> = ({
   onLayout,
-  isFriend,
   isBlocked,
   handleFriendUnfriend,
   handleBlockUnblock,
   userXId,
   screenType,
 }) => {
-  const {
-    profile = NO_PROFILE,
-    user: {username},
-  } = userXId
+  const {profile = NO_PROFILE, user} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.user);
 
-  const {biography, website} = profile;
+  const {
+    biography,
+    website,
+    friendship_status,
+    friendship_requester_id,
+  } = profile;
+
+  const {id, username, first_name, last_name} = getUserAsProfilePreviewType(
+    user,
+    profile,
+  );
+
+  const state: RootState = useStore().getState();
+  const dispatch = useDispatch();
+
+  const handleAcceptRequest = async () => {
+    await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
+    await dispatch(updateUserXFriends(id, state));
+    dispatch(updateUserXProfileAllScreens(id, state));
+  };
+
+  const handleDeclineFriendRequest = async () => {
+    await dispatch(declineFriendRequest(id));
+    dispatch(updateUserXProfileAllScreens(id, state));
+  };
+
   return (
     <View onLayout={onLayout} style={styles.container}>
       <Text style={styles.username}>{`@${username}`}</Text>
@@ -57,17 +91,47 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
             buttonType={TOGGLE_BUTTON_TYPE.BLOCK_UNBLOCK}
           />
         </View>
-
       )}
       {userXId && !isBlocked && (
-        <View style={styles.toggleButtonContainer}>
-          <ToggleButton
-            toggleState={isFriend}
-            handleToggle={handleFriendUnfriend}
-            buttonType={TOGGLE_BUTTON_TYPE.FRIEND_UNFRIEND}
-          />
+        <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.button}
+              titleStyle={styles.buttonTitle}
+              onPress={handleFriendUnfriend} // unfriend, no record status
+            />
+          )}
+          {(friendship_status === 'requested' &&
+            friendship_requester_id !== userXId && (
+              <Button
+                title={'Requested'}
+                buttonStyle={styles.requestedButton}
+                titleStyle={styles.requestedButtonTitle}
+                onPress={handleFriendUnfriend} // delete request, no record status
+              />
+            )) ||
+            (friendship_status === 'requested' &&
+              friendship_requester_id === userXId && (
+                <AcceptDeclineButtons
+                  requester={getUserAsProfilePreviewType(
+                    {userId: userXId, username},
+                    profile,
+                  )}
+                  onAccept={handleAcceptRequest}
+                  onReject={handleDeclineFriendRequest}
+                  externalStyles={{container: styles.acceptRejectContainer}}
+                />
+              ))}
         </View>
-
       )}
     </View>
   );
@@ -80,6 +144,15 @@ const styles = StyleSheet.create({
     paddingTop: '3.5%',
     paddingBottom: '2%',
   },
+  acceptRejectContainer: {
+    flexDirection: 'row',
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    paddingTop: '3.5%',
+    paddingBottom: '2%',
+  },
   container: {
     paddingVertical: '1%',
     paddingHorizontal: 18,
@@ -99,6 +172,40 @@ const styles = StyleSheet.create({
     color: TAGG_DARK_BLUE,
     marginBottom: '1%',
   },
+  requestedButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.4,
+    height: SCREEN_WIDTH * 0.09,
+    borderColor: TAGG_TEXT_LIGHT_BLUE,
+    borderWidth: 3,
+    borderRadius: 5,
+    marginRight: '2%',
+    padding: 0,
+    backgroundColor: 'transparent',
+  },
+  requestedButtonTitle: {
+    color: TAGG_TEXT_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.09,
+    padding: 0,
+    borderRadius: 5,
+    marginRight: '2%',
+    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+  },
 });
 
 export default ProfileBody;
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 23cb2155..e6311daa 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -18,7 +18,7 @@ import {isUserBlocked, loadAvatar} from '../../services';
 import {useSelector, useDispatch, useStore} from 'react-redux';
 import {RootState} from '../../store/rootreducer';
 import {logout} from '../../store/actions';
-import {fetchUserX, userXInStore} from '../../utils';
+import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
 import {SearchResultsBackground} from '../search';
 import NavigationBar from 'src/routes/tabs';
 import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
@@ -73,15 +73,6 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
    * needed to make space.
    */
 
-  const checkIfUserIsBlocked = async (userId: string) => {
-    const token = await AsyncStorage.getItem('token');
-    if (!token) {
-      dispatch(logout());
-      return false;
-    }
-    return await isUserBlocked(userId, loggedInUser.userId, token);
-  };
-
   const state: RootState = useStore().getState();
 
   const addToRecentlyStoredAndNavigateToProfile = async () => {
@@ -93,13 +84,17 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
     };
 
     try {
+      //If the logged in user is blocked by the user being viewed, do not proceed.
+      const isUserBlocked = await checkIfUserIsBlocked(
+        user.id,
+        dispatch,
+        loggedInUser,
+      );
+      if (isUserBlocked) {
+        Alert.alert(ERROR_UNABLE_TO_VIEW_PROFILE);
+        return;
+      }
       if (previewType !== 'Comment') {
-        //If the logged in user is blocked by the user being viewed, do not proceed.
-        const isUserBlocked = await checkIfUserIsBlocked(user.id);
-        if (isUserBlocked) {
-          Alert.alert(ERROR_UNABLE_TO_VIEW_PROFILE);
-          return;
-        }
         const jsonValue = await AsyncStorage.getItem(
           '@recently_searched_users',
         );
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index 96d3f929..c84f03a9 100644
--- a/src/screens/onboarding/WelcomeScreen.tsx
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -17,7 +17,12 @@ interface WelcomeScreenProps {
 
 const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
   const handleNext = () => {
-    navigation.navigate('InvitationCodeVerification');
+    navigation.navigate('RegistrationThree', {
+      lastName: 'one',
+      firstName: 'chunty',
+      email: 'chunty1@gmail.com',
+      phone: '6263495836',
+    });
   };
   return (
     <Background
diff --git a/src/services/UserFriendsServices.ts b/src/services/UserFriendsServices.ts
index f7a39abf..f2e15824 100644
--- a/src/services/UserFriendsServices.ts
+++ b/src/services/UserFriendsServices.ts
@@ -1,6 +1,7 @@
 //Abstracted common friends api calls out here
 
 import {Alert} from 'react-native';
+import {FriendshipStatusType} from 'src/types';
 import {FRIENDS_ENDPOINT} from '../constants';
 import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from '../constants/strings';
 
@@ -27,19 +28,76 @@ export const friendOrUnfriendUser = async (
   user: string,
   friend: string,
   token: string,
-  isFriend: boolean,
+  friendship_status: FriendshipStatusType,
 ) => {
   try {
-    const endpoint = FRIENDS_ENDPOINT + (isFriend ? `${user}/` : '');
+    let body;
+    let method = '';
+    let endpoint = FRIENDS_ENDPOINT;
+
+    switch (friendship_status) {
+      case 'no_record':
+        method = 'POST';
+        body = JSON.stringify({
+          requested: friend,
+        });
+        break;
+      case 'requested':
+        method = 'DELETE';
+        endpoint += `${friend}/`;
+        body = JSON.stringify({
+          reason: 'cancelled',
+        });
+        break;
+      case 'friends':
+        method = 'DELETE';
+        endpoint += `${friend}/`;
+        body = JSON.stringify({
+          reason: 'unfriended',
+        });
+    }
+
     const response = await fetch(endpoint, {
-      method: isFriend ? 'DELETE' : 'POST',
+      method: method,
       headers: {
         'Content-Type': 'application/json',
         Authorization: 'Token ' + token,
       },
+      body: body,
+    });
+    const status = response.status;
+    if (Math.floor(status / 100) === 2) {
+      return true;
+    } else {
+      console.log(await response.json());
+      Alert.alert(
+        'Something went wrong! 😭',
+        "Would you believe me if I told you that I don't know what happened?",
+      );
+      return false;
+    }
+  } catch (error) {
+    console.log(error);
+    Alert.alert(
+      'Something went wrong! 😭',
+      "Would you believe me if I told you that I don't know what happened?",
+    );
+    return false;
+  }
+};
+
+export const declineFriendRequestService = 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({
-        user,
-        friend,
+        reason: 'declined',
       }),
     });
     const status = response.status;
@@ -56,3 +114,36 @@ export const friendOrUnfriendUser = async (
     return false;
   }
 };
+
+export const acceptFriendRequestService = async (
+  requester_id: string,
+  token: string | null,
+) => {
+  try {
+    const response = await fetch(FRIENDS_ENDPOINT + `${requester_id}/`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Token ' + token,
+      },
+    });
+    const status = response.status;
+    if (Math.floor(status / 100) === 2) {
+      return true;
+    } else {
+      console.log(await response.json());
+      Alert.alert(
+        'Something went wrong! 😭',
+        "Would you believe me if I told you that I don't know what happened?",
+      );
+      return false;
+    }
+  } catch (error) {
+    console.log(error);
+    Alert.alert(
+      'Something went wrong! 😭',
+      "Would you believe me if I told you that I don't know what happened?",
+    );
+    return false;
+  }
+};
diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts
index 37d00659..75d7d367 100644
--- a/src/services/UserProfileService.ts
+++ b/src/services/UserProfileService.ts
@@ -50,6 +50,8 @@ export const loadProfileInfo = async (token: string, userId: string) => {
         tiktok,
         university_class,
         profile_completion_stage,
+        friendship_status,
+        friendship_requester_id,
       } = info;
       birthday = birthday && moment(birthday).format('YYYY-MM-DD');
       return {
@@ -62,6 +64,8 @@ export const loadProfileInfo = async (token: string, userId: string) => {
         tiktok,
         university_class,
         profile_completion_stage,
+        friendship_status,
+        friendship_requester_id,
       };
     } else {
       throw 'Unable to load profile data';
diff --git a/src/store/actions/userFriends.ts b/src/store/actions/userFriends.ts
index 24e32607..18ad247c 100644
--- a/src/store/actions/userFriends.ts
+++ b/src/store/actions/userFriends.ts
@@ -1,9 +1,24 @@
 import {getTokenOrLogout} from '../../utils';
 import {RootState} from '../rootReducer';
-import {ProfilePreviewType, UserType} from '../../types/types';
-import {friendOrUnfriendUser, loadFriends} from '../../services';
+import {
+  FriendshipStatusType,
+  ProfilePreviewType,
+  ScreenType,
+  UserType,
+} from '../../types/types';
+import {
+  acceptFriendRequestService,
+  declineFriendRequestService,
+  friendOrUnfriendUser,
+  loadFriends,
+} from '../../services';
 import {Action, ThunkAction} from '@reduxjs/toolkit';
-import {userFriendsFetched, updateFriends} from '../reducers';
+import {
+  userFriendsFetched,
+  updateFriends,
+  userXFriendshipEdited,
+  userLoggedIn,
+} from '../reducers';
 
 export const loadFriendsData = (
   userId: string,
@@ -23,26 +38,67 @@ export const loadFriendsData = (
 };
 
 export const friendUnfriendUser = (
-  user: UserType,
-  friend: ProfilePreviewType,
-  isFriend: boolean,
+  user: UserType, //logged in user
+  friend: ProfilePreviewType, // userX's profile preview
+  friendship_status: FriendshipStatusType, // friendshp status with userx
+  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 friendOrUnfriendUser(
       user.userId,
       friend.id,
       token,
-      isFriend,
+      friendship_status,
     );
     if (success) {
+      let data = 'no_record';
+      switch (friendship_status) {
+        case 'no_record': // send request: update to requested
+          data = 'requested';
+          break;
+        case 'requested': // cancel request: update to no relationship
+        case 'friends': // unfriend: update to no relationship
+          dispatch({
+            type: updateFriends.type,
+            payload: {
+              friend,
+              isFriend: true,
+            },
+          });
+          data = 'no_record';
+      }
+      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 (
+  dispatch,
+) => {
+  try {
+    const token = await getTokenOrLogout(dispatch);
+    const success = await acceptFriendRequestService(requester.id, token);
+    if (success) {
       dispatch({
         type: updateFriends.type,
         payload: {
-          isFriend,
-          data: friend,
+          data: requester,
+          isFriend: false,
         },
       });
     }
@@ -50,3 +106,28 @@ export const friendUnfriendUser = (
     console.log(error);
   }
 };
+
+export const declineFriendRequest = (
+  user_id: string,
+): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
+  dispatch,
+) => {
+  try {
+    const token = await getTokenOrLogout(dispatch);
+    const success = await declineFriendRequestService(user_id, token);
+    if (success) {
+      // Get profile of requester
+      console.log('declined request: ', success);
+      // dispatch({
+      //   type: updateFriends.type,
+      //   payload: {
+      //     data: requester, // has to be a requester not id
+      //   },
+      // });
+    } else {
+      console.log('Unsuccessful call');
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
diff --git a/src/store/actions/userX.ts b/src/store/actions/userX.ts
index 0f87012d..07bea678 100644
--- a/src/store/actions/userX.ts
+++ b/src/store/actions/userX.ts
@@ -38,12 +38,12 @@ export const loadUserX = (
       payload: {screenType, userId, user},
     });
     const token = await getTokenOrLogout(dispatch);
-    loadProfileInfo(token, userId).then((data) =>
+    loadProfileInfo(token, userId).then((data) => {
       dispatch({
         type: userXProfileFetched.type,
         payload: {screenType, userId, data},
-      }),
-    );
+      });
+    });
     loadAllSocialsForUser(userId).then((data) =>
       dispatch({
         type: userXSocialsFetched.type,
@@ -92,7 +92,11 @@ export const updateUserXFriends = (
   dispatch,
 ) => {
   try {
-    const screens = <ScreenType[]>[ScreenType.Profile, ScreenType.Search];
+    const screens = <ScreenType[]>[
+      ScreenType.Profile,
+      ScreenType.Search,
+      ScreenType.Notifications,
+    ];
     const token = await getTokenOrLogout(dispatch);
     screens.forEach((screenType) => {
       if (userXInStore(state, screenType, userId)) {
@@ -123,3 +127,31 @@ export const resetScreenType = (
     console.log(error);
   }
 };
+
+export const updateUserXProfileAllScreens = (
+  userId: string,
+  state: RootState,
+): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
+  dispatch,
+) => {
+  try {
+    const screens = <ScreenType[]>[
+      ScreenType.Profile,
+      ScreenType.Search,
+      ScreenType.Notifications,
+    ];
+    const token = await getTokenOrLogout(dispatch);
+    screens.forEach((screenType) => {
+      if (userXInStore(state, screenType, userId)) {
+        loadProfileInfo(token, userId).then((data) => {
+          dispatch({
+            type: userXProfileFetched.type,
+            payload: {screenType, userId, data},
+          });
+        });
+      }
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts
index 87e1ce22..08dc7077 100644
--- a/src/store/initialStates.ts
+++ b/src/store/initialStates.ts
@@ -20,6 +20,8 @@ export const NO_PROFILE: ProfileType = {
   profile_completion_stage: 1,
   snapchat: '',
   tiktok: '',
+  friendship_status: 'no_record',
+  friendship_requester_id: '',
 };
 
 export const EMPTY_MOMENTS_LIST = <MomentType[]>[];
diff --git a/src/store/reducers/userXReducer.ts b/src/store/reducers/userXReducer.ts
index 3b00cf88..9f90d58d 100644
--- a/src/store/reducers/userXReducer.ts
+++ b/src/store/reducers/userXReducer.ts
@@ -60,6 +60,12 @@ const userXSlice = createSlice({
       ].socialAccounts = action.payload.data;
     },
 
+    userXFriendshipEdited: (state, action) => {
+      state[<ScreenType>action.payload.screenType][
+        action.payload.userId
+      ].profile.friendship_status = action.payload.data;
+    },
+
     resetScreen: (state, action) => {
       for (let userId in state[<ScreenType>action.payload.screenType]) {
         state[<ScreenType>action.payload.screenType][userId] = EMPTY_USER_X;
@@ -78,6 +84,7 @@ export const {
   userXProfileFetched,
   userXSocialsFetched,
   userXMomentCategoriesFetched,
+  userXFriendshipEdited,
   resetScreen,
 } = userXSlice.actions;
 export const userXReducer = userXSlice.reducer;
diff --git a/src/types/types.ts b/src/types/types.ts
index 093adbe4..d9d0b56b 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -13,6 +13,8 @@ export interface ProfilePreviewType {
   last_name: string;
 }
 
+export type FriendshipStatusType = 'friends' | 'requested' | 'no_record';
+
 export interface ProfileType {
   name: string;
   biography: string;
@@ -23,6 +25,8 @@ export interface ProfileType {
   birthday: Date | undefined;
   snapchat: string;
   tiktok: string;
+  friendship_status: FriendshipStatusType;
+  friendship_requester_id: string;
 }
 
 export interface SocialAccountType {
@@ -165,7 +169,7 @@ export type TaggPopupType = {
 export type NotificationType = {
   actor: ProfilePreviewType;
   verbage: string;
-  notification_type: 'DFT' | 'FRD' | 'CMT';
+  notification_type: 'DFT' | 'FRD_REQ' | 'FRD_ACPT' | 'FRD_DEC' | 'CMT';
   notification_object: CommentType | undefined;
   timestamp: string;
   unread: boolean;
diff --git a/src/utils/common.ts b/src/utils/common.ts
index dbe8f270..6314cc13 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,5 +1,5 @@
 import moment from 'moment';
-import {Linking} from 'react-native';
+import {AsyncStorage, Linking} from 'react-native';
 import {BROWSABLE_SOCIAL_URLS, TOGGLE_BUTTON_TYPE} from '../constants';
 
 export const getToggleButtonText: (
diff --git a/src/utils/users.ts b/src/utils/users.ts
index c54ea715..ca917ae4 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -1,6 +1,6 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {INTEGRATED_SOCIAL_LIST} from '../constants';
-import {loadSocialPosts} from '../services';
+import {isUserBlocked, loadSocialPosts} from '../services';
 import {
   loadAllSocials,
   loadBlockedList,
@@ -9,6 +9,7 @@ import {
   loadUserData,
   loadUserMoments,
   loadUserNotifications,
+  logout,
 } from '../store/actions';
 import {NO_SOCIAL_ACCOUNTS} from '../store/initialStates';
 import {userLoggedIn} from '../store/reducers';
@@ -16,7 +17,12 @@ import {loadUserMomentCategories} from './../store/actions/momentCategories';
 import {loadUserX} from './../store/actions/userX';
 import {AppDispatch} from './../store/configureStore';
 import {RootState} from './../store/rootReducer';
-import {ScreenType, UserType} from './../types/types';
+import {
+  ProfilePreviewType,
+  ProfileType,
+  ScreenType,
+  UserType,
+} from './../types/types';
 
 const loadData = async (dispatch: AppDispatch, user: UserType) => {
   await Promise.all([
@@ -122,3 +128,34 @@ export const getTokenOrLogout = async (dispatch: Function): Promise<string> => {
   }
   return token;
 };
+
+/**
+ * Creates ProfilePreviewType of a user using UserType && ProfileType
+ * @param passedInUser This is the UserType of the user
+ * @param passedInProfile This is the ProfileType of the user
+ */
+export const getUserAsProfilePreviewType = (
+  passedInUser: UserType,
+  passedInProfile: ProfileType,
+): ProfilePreviewType => {
+  const fullName = passedInProfile.name.split(' ');
+  return {
+    id: passedInUser.userId,
+    username: passedInUser.username,
+    first_name: fullName[0],
+    last_name: fullName[1],
+  };
+};
+
+export const checkIfUserIsBlocked = async (
+  userId: string,
+  dispatch: Function,
+  loggedInUser: UserType,
+) => {
+  const token = await AsyncStorage.getItem('token');
+  if (!token) {
+    dispatch(logout());
+    return false;
+  }
+  return await isUserBlocked(userId, loggedInUser.userId, token);
+};