Merge branch 'master' into tma784-style-message-input

# Conflicts:
#	src/screens/chat/ChatScreen.tsx

1 files changed, 103 insertions, 8 deletions

diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index a7dd3717..f9467535 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,25 +1,24 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {Fragment, useContext} from 'react';
-import {StyleSheet, View} from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
+import React, {useContext} from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
+import {useStore} from 'react-redux';
 import {
   Channel,
   Chat,
   MessageInput,
   MessageList,
   OverlayProvider,
-  useMessageInputContext,
+  useMessageContext,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
-import UpArrowIcon from '../../assets/icons/up_arrow.svg';
-import {ChatInput} from '../../components';
 import ChatHeader from '../../components/messages/ChatHeader';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
+import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
-import {isIPhoneX} from '../../utils';
+import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -30,6 +29,8 @@ 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 chatTheme = {
@@ -40,6 +41,51 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     },
   };
 
+  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={[
@@ -53,7 +99,8 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
           <Channel
             channel={channel}
             keyboardVerticalOffset={0}
-            OverlayReactionList={Fragment}
+            OverlayReactionList={() => null}
+            MessageSimple={CustomMessageUIComponent}
             messageActions={({copyMessage, deleteMessage}) => [
               copyMessage,
               deleteMessage,
@@ -83,6 +130,54 @@ const styles = StyleSheet.create({
     bottom: -5,
     alignSelf: 'flex-end',
   },
+  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;