1 files changed, 11 insertions, 67 deletions

diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 418638b7..656c1c47 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,9 +1,8 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext, useEffect} from 'react';
-import {Image, StyleSheet, View} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {useStore} from 'react-redux';
 import {
   Channel,
   Chat,
@@ -12,19 +11,18 @@ import {
   MessageList,
   useAttachmentPickerContext,
   Theme,
-  useMessageContext,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
-import {ChatHeader, ChatInput, TabsGradient} from '../../components';
+import {
+  ChatHeader,
+  ChatInput,
+  MessageAvatar,
+  TabsGradient,
+  TypingIndicator,
+} from '../../components';
 import {MainStackParams} from '../../routes';
 import {ScreenType} from '../../types';
-import {
-  getMember,
-  HeaderHeight,
-  isIPhoneX,
-  normalize,
-  SCREEN_WIDTH,
-} from '../../utils';
+import {HeaderHeight, isIPhoneX, normalize, SCREEN_WIDTH} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -38,9 +36,6 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const tabbarHeight = useBottomTabBarHeight();
   const {setTopInset} = useAttachmentPickerContext();
   const insets = useSafeAreaInsets();
-  const state = useStore().getState();
-  const member = getMember(channel, state);
-
   const chatTheme: DeepPartial<Theme> = {
     messageList: {
       container: {
@@ -111,35 +106,6 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     setTopInset(insets.top + HeaderHeight);
   });
 
-  const CustomTypingIndicator = () => {
-    return (
-      <View style={styles.typingIndicatorContainer}>
-        <Image
-          source={require('../../assets/gifs/loading-animation.gif')}
-          style={{width: 88, height: 49}}
-        />
-      </View>
-    );
-  };
-
-  const CustomMessageAvatar = () => {
-    const message = useMessageContext();
-    return (
-      <View style={styles.messageAvatarContainer}>
-        {message.lastGroupMessage === true && (
-          <Image
-            style={styles.messageAvatar}
-            source={
-              member
-                ? {uri: member.user?.thumbnail_url}
-                : require('../../assets/images/avatar-placeholder.png')
-            }
-          />
-        )}
-      </View>
-    );
-  };
-
   return (
     <SafeAreaView
       style={[
@@ -157,9 +123,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
             copyMessage,
             deleteMessage,
           ]}
-          TypingIndicator={CustomTypingIndicator}
+          TypingIndicator={TypingIndicator}
           myMessageTheme={loggedInUsersMessageTheme}
-          MessageAvatar={CustomMessageAvatar}>
+          MessageAvatar={MessageAvatar}>
           <MessageList onThreadSelect={() => {}} />
           {/* <MessageInput /> */}
           <MessageInput Input={ChatInput} />
@@ -175,28 +141,6 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flex: 1,
   },
-  typingIndicatorContainer: {
-    backgroundColor: '#E4F0F2',
-    width: 88,
-    height: 32,
-    borderRadius: 10,
-    marginBottom: 10,
-    marginLeft: SCREEN_WIDTH * 0.09,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  messageAvatarContainer: {
-    width: normalize(20),
-    zIndex: 1,
-    bottom: 20,
-    marginRight: '2%',
-  },
-  messageAvatar: {
-    borderRadius: 50,
-    width: normalize(18),
-    height: normalize(18),
-  },
 });
 
 export default ChatScreen;