Merge pull request #360 from shravyaramesh/tma770-message-bubbles

[TMA-770] bubbles

1 files changed, 107 insertions, 3 deletions

diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 1554274d..2307b242 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,19 +1,23 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext} from 'react';
-import {StyleSheet} from 'react-native';
+import {Image, StyleSheet, Text, Vibration, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
+import {useStore} from 'react-redux';
+import {RootState} from '../../store/rootReducer';
 import {
   Channel,
   Chat,
+  MessageActions,
   MessageInput,
   MessageList,
+  useMessageContext,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
 import ChatHeader from '../../components/messages/ChatHeader';
 import {MainStackParams} from '../../routes';
 import {ScreenType} from '../../types';
-import {isIPhoneX} from '../../utils';
+import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -24,8 +28,55 @@ interface ChatScreenProps {
  */
 const ChatScreen: React.FC<ChatScreenProps> = () => {
   const {channel, chatClient} = useContext(ChatContext);
+  const state: RootState = useStore().getState();
+  const loggedInUserId = state.user.user.userId;
   const tabbarHeight = useBottomTabBarHeight();
 
+  const isOwnMessage = (message) => {
+    if (message.user.id === loggedInUserId) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const OwnMessageBubble = ({message}) => (
+    <View style={[styles.mainBubbleContainer, styles.mainOwnBubbleContainer]}>
+      <View style={styles.ownBubbleContainer}>
+        <View style={styles.ownBubble}>
+          <Text style={styles.messageText}>{message.text}</Text>
+        </View>
+      </View>
+      {/* TODO: Timestamp */}
+    </View>
+  );
+
+  const UserXMessageBubble = ({message}) => (
+    <View style={[styles.mainBubbleContainer, styles.mainUserXBubbleContainer]}>
+      <Image
+        style={styles.avatar}
+        source={
+          message.user.thumbnail_url
+            ? {uri: message.user.thumbnail_url}
+            : require('../../assets/images/avatar-placeholder.png')
+        }
+      />
+      <View style={styles.userXBubble}>
+        <Text style={styles.messageText}>{message.text}</Text>
+      </View>
+      {/* TODO: Timestamp */}
+    </View>
+  );
+
+  const CustomMessageUIComponent = () => {
+    const {message} = useMessageContext();
+    if (isOwnMessage(message)) {
+      return <OwnMessageBubble message={message} />;
+    } else {
+      return <UserXMessageBubble message={message} />;
+    }
+  };
+
   return (
     <SafeAreaView
       style={[
@@ -35,7 +86,12 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
       ]}>
       <ChatHeader screenType={ScreenType.Chat} />
       <Chat client={chatClient}>
-        <Channel channel={channel} keyboardVerticalOffset={0}>
+        <Channel
+          channel={channel}
+          keyboardVerticalOffset={0}
+          MessageSimple={CustomMessageUIComponent}
+          messageActions={[]}
+          OverlayReactionList={() => null}>
           <MessageList onThreadSelect={() => {}} />
           <MessageInput />
         </Channel>
@@ -49,6 +105,54 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flex: 1,
   },
+  messageText: {
+    width: 196,
+    paddingHorizontal: 23,
+    paddingTop: 7.35,
+    paddingBottom: 12,
+  },
+  mainBubbleContainer: {
+    marginVertical: 1,
+    width: SCREEN_WIDTH,
+    flexDirection: 'row',
+  },
+  mainOwnBubbleContainer: {
+    justifyContent: 'flex-end', // Different
+    marginTop: 22,
+  },
+  mainUserXBubbleContainer: {
+    justifyContent: 'flex-start',
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    right: -19,
+    zIndex: 1,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  ownBubbleContainer: {width: 241, marginBottom: 9},
+  ownBubble: {
+    maxWidth: 270,
+    backgroundColor: '#DEE6F4',
+    borderColor: '#DEE6F4',
+    borderWidth: 1,
+    borderRadius: 10,
+    alignSelf: 'center',
+  },
+  userXBubble: {
+    maxWidth: 235,
+    backgroundColor: '#E4F0F2',
+    borderColor: '#E4F0F2',
+    borderWidth: 1,
+    borderRadius: 10,
+    zIndex: 0,
+    alignSelf: 'flex-end',
+    marginLeft: 25,
+    marginTop: 14,
+  },
 });
 
 export default ChatScreen;