friend request

1 files changed, 86 insertions, 14 deletions

diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 57b617d8..87c12424 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,15 +1,21 @@
 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 {FriendshipStatusType, ScreenType} from '../../types';
 import {NO_PROFILE} from '../../store/initialStates';
+import {getUserAsProfilePreviewType, SCREEN_WIDTH} from '../../utils';
+import {AcceptDeclineButtons} from '../common';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
-  isFriend: boolean;
   isBlocked: boolean;
   handleFriendUnfriend: () => void;
   handleBlockUnblock: () => void;
@@ -18,7 +24,6 @@ interface ProfileBodyProps {
 }
 const ProfileBody: React.FC<ProfileBodyProps> = ({
   onLayout,
-  isFriend,
   isBlocked,
   handleFriendUnfriend,
   handleBlockUnblock,
@@ -32,7 +37,13 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     ? 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;
+
   return (
     <View onLayout={onLayout} style={styles.container}>
       <Text style={styles.username}>{`@${username}`}</Text>
@@ -57,24 +68,51 @@ 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,
+                  )}
+                />
+              ))}
         </View>
-
       )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  toggleButtonContainer: {
+  buttonsContainer: {
     flexDirection: 'row',
     flex: 1,
     paddingTop: '3.5%',
@@ -99,6 +137,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;