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

[TMA485] friend request frontend

3 files changed, 160 insertions, 70 deletions

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',
         );