preparing assets for message

app/mobile/src/session/conversation/addTopic/AddTopic.jsx

@@ -1,4 +1,4 @@
-import { TextInput, View, TouchableOpacity, Text, } from 'react-native';
+import { Image, FlatList, TextInput, Alert, View, TouchableOpacity, Text, } from 'react-native';
 import { useState, useRef } from 'react';
 import { useAddTopic } from './useAddTopic.hook';
 import { styles } from './AddTopic.styled';
@@ -6,17 +6,65 @@ import AntIcons from '@expo/vector-icons/AntDesign';
 import MaterialIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import Colors from 'constants/Colors';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import ImagePicker from 'react-native-image-crop-picker'
 
 export function AddTopic() {
 
   const { state, actions } = useAddTopic();
 
+  const addImage = async () => {
+    try {
+      const full = await ImagePicker.openPicker({ mediaType: 'photo', includeBase64: true });
+      actions.addImage(full.path);
+    }
+    catch (err) {
+      console.log(err);
+    }
+  }
+
+  const remove = (item) => {
+    Alert.alert(
+      `Removing ${item.type} from message.`,
+      "Confirm?",
+      [
+        { text: "Cancel",
+          onPress: () => {},
+        },
+        { text: "Remove", onPress: () => {
+          actions.removeAsset(item.key);
+        }}
+      ]
+    );
+  }
+
+  const renderAsset = ({ item }) => {
+    if (item.type === 'image') {
+      return (
+        <TouchableOpacity onPress={() => remove(item)}>
+          <Image source={{ uri: item.data }} style={{ width: 92 * item.ratio, height: 92, marginRight: 16 }}resizeMode={'contain'} />
+        </TouchableOpacity>
+      );
+    }
+    else {
+      return (
+        <View style={styles.asset}></View>
+      );
+    }
+  }
+
   return (
     <SafeAreaView style={styles.add} edges={['right']}>
+      { state.assets.length > 0 && (
+        <FlatList style={styles.carousel}
+          data={state.assets}
+          horizontal={true}
+          renderItem={renderAsset}
+        />
+      )}
       <TextInput style={styles.input} value={state.message} onChangeText={actions.setMessage}
           autoCapitalize="sentences" placeholder="New Message" multiline={true} />
       <View style={styles.addButtons}>
-        <TouchableOpacity style={styles.addButton}>
+        <TouchableOpacity style={styles.addButton} onPress={addImage}>
           <AntIcons name="picture" size={20} color={Colors.text} />
         </TouchableOpacity>
         <TouchableOpacity style={styles.addButton}>

app/mobile/src/session/conversation/addTopic/AddTopic.styled.js

@@ -11,8 +11,8 @@ export const styles = StyleSheet.create({
   addButtons: {
     display: 'flex',
     flexDirection: 'row',
-    marginLeft: 4,
-    marginRight: 4,
+    marginLeft: 12,
+    marginRight: 12,
     marginBottom: 16,
   },
   addButton: {
@@ -29,7 +29,10 @@ export const styles = StyleSheet.create({
     marginRight: 4,
   },
   input: {
-    margin: 8,
+    marginLeft: 16,
+    marginRight: 16,
+    marginTop: 8,
+    marginBottom: 8,
     padding: 8,
     borderRadius: 4,
     borderWidth: 1,
@@ -49,5 +52,16 @@ export const styles = StyleSheet.create({
     marginLeft: 8,
     marginRight: 8,
   },
+  asset: {
+    width: 92,
+    height: 92,
+    marginRight: 8,
+    backgroundColor: 'yellow',
+  },
+  carousel: {
+    paddingTop: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
 })
 

app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js

@@ -1,12 +1,15 @@
-import { useState, useEffect, useContext } from 'react';
+import { useState, useRef, useEffect, useContext } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
+import { Image } from 'react-native';
 
 export function useAddTopic(cardId, channelId) {
 
   const [state, setState] = useState({
     message: null,
+    assets: [],
   });
 
+  const assetId = useRef(0);
   const conversation = useContext(ConversationContext);
 
   const updateState = (value) => {
@@ -17,6 +20,16 @@ export function useAddTopic(cardId, channelId) {
     setMessage: (message) => {
       updateState({ message });
     },
+    addImage: (data) => {
+      assetId.current++;
+      Image.getSize(data, (width, height) => {
+        const asset = { key: assetId.current, type: 'image', data: data, ratio: width/height };
+        updateState({ assets: [ ...state.assets, asset ] });
+      });
+    },
+    removeAsset: (key) => {
+      updateState({ assets: state.assets.filter(item => (item.key !== key))});
+    },
   };
 
   return { state, actions };