2 files changed, 74 insertions, 0 deletions
diff --git a/src/components/messages/MessageButton.tsx b/src/components/messages/MessageButton.tsx
new file mode 100644
index 00000000..5ac42c4c
--- /dev/null
+++ b/src/components/messages/MessageButton.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import {Fragment, useContext} from 'react';
+import {useStore} from 'react-redux';
+import {ChatContext} from '../../App';
+import {RootState} from '../../store/rootReducer';
+import {FriendshipStatusType} from '../../types';
+import {createChannel} from '../../utils';
+import {Alert, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {BasicButton} from '../common';
+import {useNavigation} from '@react-navigation/native';
+import {ERROR_UNABLE_CONNECT_CHAT} from '../../constants/strings';
+
+interface MessageButtonProps {
+  userXId: string;
+  isBlocked: boolean;
+  friendship_status: FriendshipStatusType;
+  friendship_requester_id?: string;
+  solid?: boolean;
+  externalStyles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
+}
+
+const MessageButton: React.FC<MessageButtonProps> = ({
+  userXId,
+  isBlocked,
+  friendship_status,
+  friendship_requester_id,
+  solid,
+  externalStyles,
+}) => {
+  const navigation = useNavigation();
+  const {chatClient, setChannel} = useContext(ChatContext);
+
+  const state: RootState = useStore().getState();
+  const loggedInUserId = state.user.user.userId;
+
+  const canMessage = () => {
+    if (
+      userXId &&
+      !isBlocked &&
+      (friendship_status === 'no_record' ||
+        friendship_status === 'friends' ||
+        (friendship_status === 'requested' &&
+          friendship_requester_id === loggedInUserId))
+    ) {
+      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 canMessage() ? (
+    <BasicButton
+      title={'Message'}
+      onPress={onPressMessage}
+      externalStyles={externalStyles}
+      solid={solid ? solid : false}
+    />
+  ) : (
+    <Fragment />
+  );
+};
+
+export default MessageButton;
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index b19067ca..7270e2e2 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -7,3 +7,4 @@ export {default as MessageAvatar} from './MessageAvatar';
 export {default as TypingIndicator} from './TypingIndicator';
 export {default as MessageFooter} from './MessageFooter';
 export {default as DateHeader} from './DateHeader';
+export {default as MessageButton} from './MessageButton';