From cf558e378e238edd29f4fa135befce43a5880d36 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Apr 2021 16:40:06 -0400
Subject: created initial styling

---
 src/components/messages/ChatInput.tsx | 111 ++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 src/components/messages/ChatInput.tsx

(limited to 'src/components/messages/ChatInput.tsx')

diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx
new file mode 100644
index 00000000..fe24b271
--- /dev/null
+++ b/src/components/messages/ChatInput.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  Image,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {useStore} from 'react-redux';
+import {MessageInputProps} from 'stream-chat-react-native';
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {
+  LocalAttachmentType,
+  LocalChannelType,
+  LocalCommandType,
+  LocalEventType,
+  LocalMessageType,
+  LocalReactionType,
+  LocalUserType,
+} from '../../types';
+
+const ChatInput: React.FC<
+  MessageInputProps<
+    LocalAttachmentType,
+    LocalChannelType,
+    LocalCommandType,
+    LocalEventType,
+    LocalMessageType,
+    LocalReactionType,
+    LocalUserType
+  >
+> = () => {
+  const state: RootState = useStore().getState();
+  // const {channel} = useContext(ChatContext);
+  const avatar = state.user.avatar;
+  // const member = getMember(channel, state);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textContainer}>
+        <Image
+          style={styles.avatar}
+          source={
+            avatar
+              ? {uri: avatar}
+              : require('../../assets/images/avatar-placeholder.png')
+          }
+        />
+        <TextInput
+          style={styles.text}
+          placeholder={'Message...'}
+          placeholderTextColor="grey"
+          multiline={true}
+        />
+        <View style={styles.submitButton}>
+          <TouchableOpacity style={styles.submitButton} onPress={() => {}}>
+            <UpArrowIcon width={35} height={35} color={'white'} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  textContainer: {
+    width: '95%',
+    flexDirection: 'row',
+    backgroundColor: '#e8e8e8',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: '3%',
+    borderRadius: 25,
+  },
+  text: {
+    flex: 1,
+    padding: '1%',
+    marginHorizontal: '1%',
+  },
+  avatar: {
+    height: 35,
+    width: 35,
+    borderRadius: 30,
+    marginRight: 10,
+    marginLeft: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  whiteBackround: {
+    backgroundColor: '#fff',
+  },
+});
+
+export default ChatInput;
-- 
cgit v1.2.3-70-g09d2


From 177cec843cb4d472b47e684774729bb6c1ec001f Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Apr 2021 20:36:40 -0400
Subject: updated chat input to use context functions

---
 src/components/messages/ChatInput.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'src/components/messages/ChatInput.tsx')

diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx
index fe24b271..9aeb9c62 100644
--- a/src/components/messages/ChatInput.tsx
+++ b/src/components/messages/ChatInput.tsx
@@ -7,7 +7,10 @@ import {
   View,
 } from 'react-native';
 import {useStore} from 'react-redux';
-import {MessageInputProps} from 'stream-chat-react-native';
+import {
+  MessageInputProps,
+  useMessageInputContext,
+} from 'stream-chat-react-native';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {RootState} from '../../store/rootReducer';
@@ -33,9 +36,8 @@ const ChatInput: React.FC<
   >
 > = () => {
   const state: RootState = useStore().getState();
-  // const {channel} = useContext(ChatContext);
   const avatar = state.user.avatar;
-  // const member = getMember(channel, state);
+  const {sendMessage, setText, text} = useMessageInputContext();
 
   return (
     <View style={styles.container}>
@@ -53,9 +55,11 @@ const ChatInput: React.FC<
           placeholder={'Message...'}
           placeholderTextColor="grey"
           multiline={true}
+          value={text}
+          onChangeText={setText}
         />
         <View style={styles.submitButton}>
-          <TouchableOpacity style={styles.submitButton} onPress={() => {}}>
+          <TouchableOpacity style={styles.submitButton} onPress={sendMessage}>
             <UpArrowIcon width={35} height={35} color={'white'} />
           </TouchableOpacity>
         </View>
-- 
cgit v1.2.3-70-g09d2