added icons, fixed picker almost

3 files changed, 70 insertions, 32 deletions

diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx
index a73d4869..2b49295b 100644
--- a/src/components/messages/ChatInput.tsx
+++ b/src/components/messages/ChatInput.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
-import {Image, StyleSheet, TextInput, View} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import ImagePicker from 'react-native-image-crop-picker';
 import {useStore} from 'react-redux';
 import {
+  AutoCompleteInput,
   MessageInputProps,
+  useAttachmentPickerContext,
   useMessageInputContext,
 } from 'stream-chat-react-native';
-import {ChatInputSubmit} from '../messages';
 import {RootState} from '../../store/rootReducer';
 import {
   LocalAttachmentType,
@@ -16,6 +19,8 @@ import {
   LocalReactionType,
   LocalUserType,
 } from '../../types';
+import {normalize} from '../../utils';
+import {ChatInputSubmit} from '../messages';
 
 const ChatInput: React.FC<
   MessageInputProps<
@@ -30,7 +35,35 @@ const ChatInput: React.FC<
 > = () => {
   const state: RootState = useStore().getState();
   const avatar = state.user.avatar;
-  const {sendMessage, setText, text} = useMessageInputContext();
+  const {sendMessage, text, setText, uploadNewImage} = useMessageInputContext();
+  const {
+    setSelectedImages,
+    selectedImages,
+    openPicker,
+  } = useAttachmentPickerContext();
+
+  const selectImage = () => {
+    ImagePicker.openPicker({
+      cropping: true,
+      freeStyleCropEnabled: true,
+      mediaType: 'photo',
+      multiple: true,
+      // includeBase64: true,
+    })
+      .then((pictures) => {
+        pictures.map((pic) =>
+          uploadNewImage({
+            width: pic.width,
+            height: pic.height,
+            source: 'picker',
+            uri: 'ph://' + pic.localIdentifier,
+          }),
+        );
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
 
   return (
     <View style={styles.container}>
@@ -43,15 +76,23 @@ const ChatInput: React.FC<
               : require('../../assets/images/avatar-placeholder.png')
           }
         />
-        <TextInput
-          style={styles.text}
-          placeholder={'Message...'}
-          placeholderTextColor="grey"
-          multiline={true}
-          value={text}
-          onChangeText={setText}
-        />
-        <ChatInputSubmit onPress={sendMessage} outlined={text.length === 0} />
+        <AutoCompleteInput />
+        <View style={styles.actionButtons}>
+          {/* <TouchableOpacity onPress={openPicker}> */}
+          <TouchableOpacity onPress={selectImage}>
+            <Image
+              style={{width: normalize(23), height: normalize(23)}}
+              source={require('../../assets/images/camera.png')}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => setText('/')}>
+            <Image
+              style={{width: normalize(23), height: normalize(23)}}
+              source={require('../../assets/images/gif.png')}
+            />
+          </TouchableOpacity>
+          <ChatInputSubmit onPress={sendMessage} outlined={text.length === 0} />
+        </View>
       </View>
     </View>
   );
@@ -77,17 +118,27 @@ const styles = StyleSheet.create({
     marginHorizontal: '1%',
   },
   avatar: {
-    height: 35,
-    width: 35,
+    height: normalize(30),
+    width: normalize(30),
     borderRadius: 30,
     marginRight: 10,
     marginLeft: '3%',
-    marginVertical: '2%',
+    marginVertical: 5,
     alignSelf: 'flex-end',
   },
   whiteBackround: {
     backgroundColor: '#fff',
   },
+  actionButtons: {
+    height: normalize(30) + 10,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    marginRight: 10,
+    width: 100,
+    alignSelf: 'flex-end',
+    // borderWidth: 1,
+  },
 });
 
 export default ChatInput;
diff --git a/src/components/messages/ChatInputSubmit.tsx b/src/components/messages/ChatInputSubmit.tsx
index 6180ef20..9e29ad4d 100644
--- a/src/components/messages/ChatInputSubmit.tsx
+++ b/src/components/messages/ChatInputSubmit.tsx
@@ -9,7 +9,7 @@ interface ChatInputSubmitProps {
   onPress: () => void;
 }
 
-const SIZE = normalize(30);
+const SIZE = normalize(25);
 
 const ChatInputSubmit: React.FC<ChatInputSubmitProps> = (props) => {
   const {outlined, onPress} = props;
@@ -36,9 +36,6 @@ const styles = StyleSheet.create({
     borderRadius: 999,
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: '3%',
-    marginVertical: '2%',
-    alignSelf: 'flex-end',
   },
   background: {
     backgroundColor: TAGG_LIGHT_BLUE,
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 0052b61d..c70d6df5 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,14 +1,9 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import {useScrollToTop} from '@react-navigation/native';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {LayoutChangeEvent, RefreshControl, StyleSheet} from 'react-native';
 import Animated, {
-  useSharedValue,
   useAnimatedScrollHandler,
+  useSharedValue,
 } from 'react-native-reanimated';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {
@@ -36,8 +31,6 @@ import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
 import PublicProfile from './PublicProfile';
-import {useScrollToTop} from '@react-navigation/native';
-import {ChatContext} from '../../App';
 
 interface ContentProps {
   userXId: string | undefined;
@@ -59,8 +52,6 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
   );
   const state: RootState = useStore().getState();
 
-  const {chatClient} = useContext(ChatContext);
-
   /*
    * Used to imperatively scroll to the top when presenting the moment tutorial.
    */
@@ -77,7 +68,6 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
   const [isBlocked, setIsBlocked] = useState<boolean>(false);
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
   const [socialsBarHeight, setSocialsBarHeight] = useState(0);
-  const [shouldBounce, setShouldBounce] = useState<boolean>(true);
   const [refreshing, setRefreshing] = useState<boolean>(false);
 
   const onRefresh = useCallback(() => {