From df6595694c678657fec30d881fb1edcd39b62f17 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 15 Jan 2021 03:33:59 -0800
Subject: friend request

---
 src/components/notifications/Notification.tsx | 90 ++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 24 deletions(-)

(limited to 'src/components/notifications')

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index f6a04526..5e68c6f3 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,17 +1,27 @@
 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 {loadAvatar} from '../../services';
+import {
+  declineFriendRequest,
+  loadUserNotifications,
+  updateUserXFriends,
+} from '../../store/actions';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {loadAvatar, unfriendUser} from '../../services';
+import {acceptFriendRequest} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {NotificationType, ScreenType} from '../../types';
+import {NotificationType, ProfilePreviewType, ScreenType} from '../../types';
 import {
   fetchUserX,
+  getTokenOrLogout,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
   userXInStore,
 } from '../../utils';
+import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
 
 interface NotificationProps {
   item: NotificationType;
@@ -29,6 +39,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
     },
     screenType,
   } = props;
+
   const navigation = useNavigation();
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
@@ -36,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) => {
@@ -68,7 +78,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,
@@ -86,26 +97,45 @@ const Notification: React.FC<NotificationProps> = (props) => {
     }
   };
 
+  // const handleAcceptRequest = async () => {
+  //   const requester: ProfilePreviewType = {
+  //     id: id,
+  //     username: username,
+  //     first_name: first_name,
+  //     last_name: last_name,
+  //   };
+  //   dispatch(acceptFriendRequest(requester));
+  //   dispatch(updateUserXFriends(id, state));
+  //   console.log('fetching notifications since user accepted request!');
+  //   dispatch(loadUserNotifications());
+  // };
+
+  // const handleDeclineFriendRequest = async () => {
+  //   dispatch(declineFriendRequest(id));
+  // };
+
   return (
-    <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>
+    <>
+      <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>
+      </TouchableWithoutFeedback>
       {/* TODO: Still WIP */}
       {/* {notification_type === 'CMT' && notification_object && (
         <Image
@@ -113,7 +143,14 @@ const Notification: React.FC<NotificationProps> = (props) => {
           source={{uri: momentURI, cache: 'only-if-cached'}}
         />
       )} */}
-    </TouchableWithoutFeedback>
+      {notification_type === 'FRD_REQ' && (
+        <View style={styles.buttonsContainer}>
+          <AcceptDeclineButtons
+            requester={{id, username, first_name, last_name}}
+          />
+        </View>
+      )}
+    </>
   );
 };
 
@@ -123,6 +160,8 @@ const styles = StyleSheet.create({
     height: SCREEN_HEIGHT / 10,
     flex: 1,
     alignItems: 'center',
+    borderColor: 'red',
+    borderWidth: 2,
   },
   avatarContainer: {
     marginLeft: '5%',
@@ -152,6 +191,9 @@ const styles = StyleSheet.create({
     width: 42,
     right: '5%',
   },
+  buttonsContainer: {
+    
+  },
 });
 
 export default Notification;
-- 
cgit v1.2.3-70-g09d2


From ed91266981e1662b512baa1856d8c921a8718e68 Mon Sep 17 00:00:00 2001
From: Ashm Walia <ashmwalia@outlook.com>
Date: Fri, 15 Jan 2021 16:20:29 -0800
Subject: fixes

---
 src/components/common/AcceptDeclineButtons.tsx | 96 ++++++++++++++------------
 src/components/notifications/Notification.tsx  | 46 +++++-------
 src/components/profile/Content.tsx             |  8 ++-
 src/components/profile/ProfileBody.tsx         | 45 ++++++++++--
 src/routes/Routes.tsx                          |  2 +-
 src/services/UserFriendsServices.ts            |  2 +-
 src/store/actions/userFriends.ts               |  1 -
 src/store/actions/userX.ts                     | 32 ++++++++-
 src/store/reducers/userXReducer.ts             |  2 +
 src/utils/users.ts                             |  7 +-
 10 files changed, 158 insertions(+), 83 deletions(-)

(limited to 'src/components/notifications')

diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 2ebae029..164ce6e7 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 import {Button} from 'react-native-elements';
 import {useDispatch, useStore} from 'react-redux';
 import {
@@ -12,73 +19,72 @@ import {acceptFriendRequest} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 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> = (props) => {
-  const {requester} = props;
-  const state: RootState = useStore().getState();
-  const dispatch = useDispatch();
-
-  const handleAcceptRequest = async () => {
-    dispatch(acceptFriendRequest(requester));
-    dispatch(updateUserXFriends(requester.id, state));
-    dispatch(loadUserNotifications());
-  };
-
-  const handleDeclineFriendRequest = async () => {
-    dispatch(declineFriendRequest(requester.id));
-  };
+const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = ({
+  requester,
+  onAccept,
+  onReject,
+  externalStyles,
+}) => {
   return (
-    <>
-      <Button
-        title="Accept"
-        buttonStyle={styles.acceptButton}
-        titleStyle={styles.acceptButtonTitle}
-        onPress={() => handleAcceptRequest()}
-      />
-      <Button
-        title="Reject"
-        buttonStyle={styles.rejectButton}
-        titleStyle={styles.rejectButtonTitle}
-        onPress={() => handleDeclineFriendRequest()}
-      />
-    </>
+    <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({
-  acceptButton: {
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  genericButtonStyle: {
     justifyContent: 'center',
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.2,
     height: SCREEN_WIDTH * 0.07,
     borderRadius: 5,
     padding: 0,
-    marginRight: '2%',
+    marginTop: 10,
+    marginRight: '5%',
+  },
+  acceptButton: {
+    padding: 0,
     backgroundColor: TAGG_TEXT_LIGHT_BLUE,
   },
   rejectButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH * 0.2,
-    height: SCREEN_WIDTH * 0.07,
-    borderColor: TAGG_TEXT_LIGHT_BLUE,
     borderWidth: 1,
-    borderRadius: 5,
-    marginRight: '2%',
-    padding: 0,
     backgroundColor: 'white',
+    borderColor: TAGG_TEXT_LIGHT_BLUE,
   },
-  rejectButtonTitle: {
+  acceptButtonTitleColor: {
+    color: 'white',
+  },
+  rejectButtonTitleColor: {
     color: TAGG_TEXT_LIGHT_BLUE,
-    padding: 0,
-    fontSize: 14,
-    fontWeight: '800',
   },
-  acceptButtonTitle: {
-    color: 'white',
+  buttonTitle: {
     padding: 0,
     fontSize: 14,
     fontWeight: '800',
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 5e68c6f3..42b10ea3 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -97,22 +97,16 @@ const Notification: React.FC<NotificationProps> = (props) => {
     }
   };
 
-  // const handleAcceptRequest = async () => {
-  //   const requester: ProfilePreviewType = {
-  //     id: id,
-  //     username: username,
-  //     first_name: first_name,
-  //     last_name: last_name,
-  //   };
-  //   dispatch(acceptFriendRequest(requester));
-  //   dispatch(updateUserXFriends(id, state));
-  //   console.log('fetching notifications since user accepted request!');
-  //   dispatch(loadUserNotifications());
-  // };
+  const handleAcceptRequest = async () => {
+    await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
+    await dispatch(updateUserXFriends(id, state));
+    dispatch(loadUserNotifications());
+  };
 
-  // const handleDeclineFriendRequest = async () => {
-  //   dispatch(declineFriendRequest(id));
-  // };
+  const handleDeclineFriendRequest = async () => {
+    await dispatch(declineFriendRequest(id));
+    dispatch(loadUserNotifications());
+  };
 
   return (
     <>
@@ -135,6 +129,15 @@ const Notification: React.FC<NotificationProps> = (props) => {
           </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>
+        )}
       </TouchableWithoutFeedback>
       {/* TODO: Still WIP */}
       {/* {notification_type === 'CMT' && notification_object && (
@@ -143,13 +146,6 @@ const Notification: React.FC<NotificationProps> = (props) => {
           source={{uri: momentURI, cache: 'only-if-cached'}}
         />
       )} */}
-      {notification_type === 'FRD_REQ' && (
-        <View style={styles.buttonsContainer}>
-          <AcceptDeclineButtons
-            requester={{id, username, first_name, last_name}}
-          />
-        </View>
-      )}
     </>
   );
 };
@@ -160,8 +156,6 @@ const styles = StyleSheet.create({
     height: SCREEN_HEIGHT / 10,
     flex: 1,
     alignItems: 'center',
-    borderColor: 'red',
-    borderWidth: 2,
   },
   avatarContainer: {
     marginLeft: '5%',
@@ -191,9 +185,7 @@ const styles = StyleSheet.create({
     width: 42,
     right: '5%',
   },
-  buttonsContainer: {
-    
-  },
+  buttonsContainer: {},
 });
 
 export default Notification;
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 339144d6..f7b4b71c 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -21,7 +21,13 @@ import {
   UserType,
 } from '../../types';
 import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
-import {fetchUserX, getUserAsProfilePreviewType, 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';
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 87c12424..edda5d43 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -8,11 +8,18 @@ import {
 } from '../../constants';
 import ToggleButton from './ToggleButton';
 import {RootState} from '../../store/rootReducer';
-import {useSelector} from 'react-redux';
+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;
@@ -30,10 +37,7 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
   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);
 
@@ -44,6 +48,31 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     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 () => {
+    try {
+      await dispatch(
+        acceptFriendRequest({id, username, first_name, last_name}),
+      );
+      await dispatch(updateUserXFriends(id, state));
+      dispatch(updateUserXProfileAllScreens(id));
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleDeclineFriendRequest = async () => {
+    await dispatch(declineFriendRequest(id));
+    dispatch(updateUserXProfileAllScreens(id));
+  };
+
   return (
     <View onLayout={onLayout} style={styles.container}>
       <Text style={styles.username}>{`@${username}`}</Text>
@@ -103,6 +132,9 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
                     {userId: userXId, username},
                     profile,
                   )}
+                  onAccept={handleAcceptRequest}
+                  onReject={handleDeclineFriendRequest}
+                  externalStyles={{container: styles.acceptRejectContainer}}
                 />
               ))}
         </View>
@@ -112,6 +144,9 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
 };
 
 const styles = StyleSheet.create({
+  acceptRejectContainer: {
+    flexDirection: 'row',
+  },
   buttonsContainer: {
     flexDirection: 'row',
     flex: 1,
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index c64abcfc..38a987f7 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -26,7 +26,7 @@ const Routes: React.FC = () => {
    */
   useEffect(() => {
     if (!userId) {
-      // userLogin(dispatch, {userId: '', username: ''});
+      userLogin(dispatch, {userId: '', username: ''});
     } else {
       SplashScreen.hide();
     }
diff --git a/src/services/UserFriendsServices.ts b/src/services/UserFriendsServices.ts
index 9235d890..97e319f1 100644
--- a/src/services/UserFriendsServices.ts
+++ b/src/services/UserFriendsServices.ts
@@ -64,7 +64,7 @@ export const friendOrUnfriendUser = async (
       },
       body: body,
     });
-
+    console.log('FOF', response);
     const status = response.status;
     if (Math.floor(status / 100) === 2) {
       return true;
diff --git a/src/store/actions/userFriends.ts b/src/store/actions/userFriends.ts
index 010dc5ed..154ed20e 100644
--- a/src/store/actions/userFriends.ts
+++ b/src/store/actions/userFriends.ts
@@ -71,7 +71,6 @@ export const friendUnfriendUser = (
           });
           data = 'no_record';
       }
-      // Update loggedInUser's friends list
       console.log('friendship_status data: ', data);
       dispatch({
         type: userXFriendshipEdited.type,
diff --git a/src/store/actions/userX.ts b/src/store/actions/userX.ts
index 2f910052..6772837b 100644
--- a/src/store/actions/userX.ts
+++ b/src/store/actions/userX.ts
@@ -93,7 +93,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)) {
@@ -124,3 +128,29 @@ export const resetScreenType = (
     console.log(error);
   }
 };
+
+export const updateUserXProfileAllScreens = (
+  userId: string,
+): 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) => {
+      loadProfileInfo(token, userId).then((data) => {
+        console.log('DATA FETCHED: ', data);
+        dispatch({
+          type: userXProfileFetched.type,
+          payload: {screenType, userId, data},
+        });
+      });
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
diff --git a/src/store/reducers/userXReducer.ts b/src/store/reducers/userXReducer.ts
index 9f90d58d..42de806d 100644
--- a/src/store/reducers/userXReducer.ts
+++ b/src/store/reducers/userXReducer.ts
@@ -64,6 +64,8 @@ const userXSlice = createSlice({
       state[<ScreenType>action.payload.screenType][
         action.payload.userId
       ].profile.friendship_status = action.payload.data;
+
+      console.log('Inside state management friends', action.payload);
     },
 
     resetScreen: (state, action) => {
diff --git a/src/utils/users.ts b/src/utils/users.ts
index 2a7db214..d4aaebe3 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -16,7 +16,12 @@ import {loadUserMomentCategories} from './../store/actions/momentCategories';
 import {loadUserX} from './../store/actions/userX';
 import {AppDispatch} from './../store/configureStore';
 import {RootState} from './../store/rootReducer';
-import {ProfilePreviewType, ProfileType, ScreenType, UserType} from './../types/types';
+import {
+  ProfilePreviewType,
+  ProfileType,
+  ScreenType,
+  UserType,
+} from './../types/types';
 
 const loadData = async (dispatch: AppDispatch, user: UserType) => {
   await Promise.all([
-- 
cgit v1.2.3-70-g09d2


From 72aabf60d815cdecf59aaef86df57be6a557efd0 Mon Sep 17 00:00:00 2001
From: Ashm Walia <ashmwalia@outlook.com>
Date: Fri, 15 Jan 2021 19:04:07 -0800
Subject: Done

---
 src/components/common/AcceptDeclineButtons.tsx | 22 +++------------------
 src/components/notifications/Notification.tsx  |  4 +---
 src/components/profile/Content.tsx             | 25 ++----------------------
 src/components/profile/ProfileBody.tsx         |  4 ++--
 src/components/profile/ProfilePreview.tsx      | 27 +++++++++++---------------
 src/store/actions/userX.ts                     | 15 ++++++++------
 src/store/reducers/userXReducer.ts             |  2 --
 src/utils/common.ts                            |  2 +-
 src/utils/users.ts                             | 16 ++++++++++++++-
 9 files changed, 44 insertions(+), 73 deletions(-)

(limited to 'src/components/notifications')

diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 164ce6e7..7d01a398 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -1,22 +1,6 @@
 import React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  Text,
-  View,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
-import {Button} from 'react-native-elements';
-import {useDispatch, useStore} from 'react-redux';
-import {
-  declineFriendRequest,
-  loadUserNotifications,
-  updateUserXFriends,
-} from '../../store/actions';
+import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
 import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
-import {acceptFriendRequest} from '../../store/actions';
-import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
 import {TouchableOpacity} from 'react-native-gesture-handler';
@@ -62,8 +46,8 @@ const styles = StyleSheet.create({
   genericButtonStyle: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.2,
-    height: SCREEN_WIDTH * 0.07,
+    width: SCREEN_WIDTH * 0.15,
+    height: SCREEN_WIDTH * 0.06,
     borderRadius: 5,
     padding: 0,
     marginTop: 10,
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 42b10ea3..efbda46f 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -9,14 +9,12 @@ import {
   loadUserNotifications,
   updateUserXFriends,
 } from '../../store/actions';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
-import {loadAvatar, unfriendUser} from '../../services';
+import {loadAvatar} from '../../services';
 import {acceptFriendRequest} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {NotificationType, ProfilePreviewType, ScreenType} from '../../types';
 import {
   fetchUserX,
-  getTokenOrLogout,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
   userXInStore,
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index f7b4b71c..cc9849e6 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -42,6 +42,7 @@ import {
   updateUserXFriends,
   updateMomentCategories,
   deleteUserMomentsForCategory,
+  updateUserXProfileAllScreens,
 } from '../../store/actions';
 import {
   NO_USER,
@@ -214,29 +215,6 @@ 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.
-  //  */
-  // 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.
-   */
-
   // Handles click on friend/requested/unfriend button
   /*
    * When user logged in clicks on the friend button:
@@ -259,6 +237,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, 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 edda5d43..4076e473 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -62,7 +62,7 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
         acceptFriendRequest({id, username, first_name, last_name}),
       );
       await dispatch(updateUserXFriends(id, state));
-      dispatch(updateUserXProfileAllScreens(id));
+      dispatch(updateUserXProfileAllScreens(id, state));
     } catch (err) {
       console.log(err);
     }
@@ -70,7 +70,7 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
 
   const handleDeclineFriendRequest = async () => {
     await dispatch(declineFriendRequest(id));
-    dispatch(updateUserXProfileAllScreens(id));
+    dispatch(updateUserXProfileAllScreens(id, state));
   };
 
   return (
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 6f008540..0d8d9852 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';
 
@@ -72,15 +72,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 () => {
@@ -92,13 +83,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('You cannot view this 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('You cannot view this profile');
-          return;
-        }
         const jsonValue = await AsyncStorage.getItem(
           '@recently_searched_users',
         );
diff --git a/src/store/actions/userX.ts b/src/store/actions/userX.ts
index 6772837b..39d3f918 100644
--- a/src/store/actions/userX.ts
+++ b/src/store/actions/userX.ts
@@ -131,6 +131,7 @@ export const resetScreenType = (
 
 export const updateUserXProfileAllScreens = (
   userId: string,
+  state: RootState,
 ): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
   dispatch,
 ) => {
@@ -142,13 +143,15 @@ export const updateUserXProfileAllScreens = (
     ];
     const token = await getTokenOrLogout(dispatch);
     screens.forEach((screenType) => {
-      loadProfileInfo(token, userId).then((data) => {
-        console.log('DATA FETCHED: ', data);
-        dispatch({
-          type: userXProfileFetched.type,
-          payload: {screenType, userId, data},
+      if (userXInStore(state, screenType, userId)) {
+        loadProfileInfo(token, userId).then((data) => {
+          console.log('DATA FETCHED: ', data);
+          dispatch({
+            type: userXProfileFetched.type,
+            payload: {screenType, userId, data},
+          });
         });
-      });
+      }
     });
   } catch (error) {
     console.log(error);
diff --git a/src/store/reducers/userXReducer.ts b/src/store/reducers/userXReducer.ts
index 42de806d..9f90d58d 100644
--- a/src/store/reducers/userXReducer.ts
+++ b/src/store/reducers/userXReducer.ts
@@ -64,8 +64,6 @@ const userXSlice = createSlice({
       state[<ScreenType>action.payload.screenType][
         action.payload.userId
       ].profile.friendship_status = action.payload.data;
-
-      console.log('Inside state management friends', action.payload);
     },
 
     resetScreen: (state, action) => {
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 d4aaebe3..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';
@@ -145,3 +146,16 @@ export const getUserAsProfilePreviewType = (
     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);
+};
-- 
cgit v1.2.3-70-g09d2