1 files changed, 83 insertions, 16 deletions

diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index b49e71a3..527036f6 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,5 +1,12 @@
-import React from 'react';
-import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native';
+import React, {useContext} from 'react';
+import {
+  Alert,
+  LayoutChangeEvent,
+  Linking,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
 import {normalize} from 'react-native-elements';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
@@ -9,12 +16,23 @@ import {
   updateUserXFriends,
   updateUserXProfileAllScreens,
 } from '../../store/actions';
+import {canViewProfile} from '../../utils/users';
 import {NO_PROFILE} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
-import {getUserAsProfilePreviewType} from '../../utils';
-import {FriendsButton} from '../common';
+import {
+  connectChatAccount,
+  createChannel,
+  getUserAsProfilePreviewType,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
+import {FriendsButton, BasicButton} from '../common';
 import ToggleButton from './ToggleButton';
+import {ChatContext} from '../../App';
+import {useNavigation} from '@react-navigation/core';
+import {ChatListScreen} from '../../screens';
+import {ERROR_UNABLE_CONNECT_CHAT} from '../../constants/strings';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
@@ -30,6 +48,9 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
   userXId,
   screenType,
 }) => {
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
+
   const {profile = NO_PROFILE, user} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
@@ -46,8 +67,10 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     profile,
   );
 
+  const {chatClient, setChannel} = useContext(ChatContext);
+
   const state: RootState = useStore().getState();
-  const dispatch = useDispatch();
+  const loggedInUserId = state.user.user.userId;
 
   const handleAcceptRequest = async () => {
     await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
@@ -60,6 +83,32 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     dispatch(updateUserXProfileAllScreens(id, state));
   };
 
+  const canMessage = () => {
+    if (
+      userXId &&
+      !isBlocked &&
+      (friendship_status === 'no_record' ||
+        friendship_status === 'friends' ||
+        (friendship_status === 'requested' &&
+          friendship_requester_id === loggedInUserId)) &&
+      canViewProfile(state, userXId, screenType)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const onPressMessage = async () => {
+    if (chatClient.user && userXId) {
+      const channel = await createChannel(loggedInUserId, userXId, chatClient);
+      setChannel(channel);
+      navigation.navigate('Chat');
+    } else {
+      Alert.alert(ERROR_UNABLE_CONNECT_CHAT);
+    }
+  };
+
   return (
     <View onLayout={onLayout} style={styles.container}>
       <Text style={styles.username}>{`@${username}`}</Text>
@@ -85,17 +134,31 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
           />
         </View>
       )}
-      {userXId && !isBlocked && (
-        <View style={styles.buttonsContainer}>
-          <FriendsButton
-            userXId={userXId}
-            screenType={screenType}
-            friendship_requester_id={friendship_requester_id}
-            onAcceptRequest={handleAcceptRequest}
-            onRejectRequest={handleDeclineFriendRequest}
-          />
-        </View>
-      )}
+      <View style={styles.simpleRowContainer}>
+        {userXId && !isBlocked && (
+          <View style={styles.buttonsContainer}>
+            <FriendsButton
+              userXId={userXId}
+              screenType={screenType}
+              friendship_requester_id={friendship_requester_id}
+              onAcceptRequest={handleAcceptRequest}
+              onRejectRequest={handleDeclineFriendRequest}
+            />
+            {canMessage() && (
+              <BasicButton
+                title={'Message'}
+                onPress={onPressMessage}
+                externalStyles={{
+                  container: {
+                    width: SCREEN_WIDTH * 0.42,
+                    aspectRatio: 154 / 33,
+                  },
+                }}
+              />
+            )}
+          </View>
+        )}
+      </View>
     </View>
   );
 };
@@ -107,11 +170,15 @@ const styles = StyleSheet.create({
     paddingTop: '3.5%',
     paddingBottom: '2%',
   },
+  simpleRowContainer: {flexDirection: 'row'},
   buttonsContainer: {
     flex: 1,
     paddingTop: '3.5%',
     paddingBottom: '2%',
     width: '50%',
+    height: SCREEN_HEIGHT * 0.1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   container: {
     paddingVertical: '1%',