adding binary attachements to mobile app

balzack · Aug 11, 2023 · f3fc131 · f3fc131
1 parent b2f1316
commit f3fc131
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 15 deletions.
diff --git a/app/mobile/src/session/conversation/addTopic/AddTopic.jsx b/app/mobile/src/session/conversation/addTopic/AddTopic.jsx
@@ -12,6 +12,7 @@ import ColorPicker from 'react-native-wheel-color-picker'
 import { VideoFile } from './videoFile/VideoFile';
 import { AudioFile } from './audioFile/AudioFile';
 import { ImageFile } from './imageFile/ImageFile';
+import { BinaryFile } from './binaryFile/BinaryFile';
 
 export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
 
@@ -80,15 +81,28 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
 
   const addAudio = async () => {
     try {
-        const audio = await DocumentPicker.pickSingle({
-          presentationStyle: 'fullScreen',
-          copyTo: 'cachesDirectory',
-          type: DocumentPicker.types.audio,
-        })
-        actions.addAudio(audio.fileCopyUri, audio.name.replace(/\.[^/.]+$/, ""));
-      } catch (err) {
-        console.log(err);
-      }
+      const audio = await DocumentPicker.pickSingle({
+        presentationStyle: 'fullScreen',
+        copyTo: 'cachesDirectory',
+        type: DocumentPicker.types.audio,
+      })
+      actions.addAudio(audio.fileCopyUri, audio.name.replace(/\.[^/.]+$/, ""));
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  const addBinary = async () => {
+    try {
+      const binary = await DocumentPicker.pickSingle({
+        presentationStyle: 'fullScreen',
+        copyTo: 'cachesDirectory',
+        type: DocumentPicker.types.allFiles,
+      })
+      actions.addBinary(binary.fileCopyUri, binary.name);
+    } catch (err) {
+      console.log(err);
+    }
   }
 
   const remove = (item) => {
@@ -123,7 +137,13 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
     if (item.type === 'audio') {
       return (
         <AudioFile path={item.data} label={item.label} remove={() => remove(item)}
-            setLabel={(label) => actions.setAudioLabel(item.key, label)} />
+            setLabel={(label) => actions.setLabel(item.key, label)} />
+      )
+    }
+    if (item.type === 'binary') {
+      return (
+        <BinaryFile path={item.data} label={item.label} extension={item.extension} remove={() => remove(item)}
+            setLabel={(label) => actions.setLabel(item.key, label)} />
       )
     }
     else {
@@ -171,9 +191,10 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
             <MatIcons name="music-box-outline" size={20} color={Colors.text} />
           </TouchableOpacity>
         )}
-        { (state.enableImage || state.enableVideo || state.enableAudio) && (
-          <View style={styles.divider} />
-        )}
+        <TouchableOpacity style={styles.addButton} onPress={addBinary}>
+          <MatIcons name="all-inclusive-box-outline" size={20} color={Colors.text} />
+        </TouchableOpacity>
+        <View style={styles.divider} />
         <TouchableOpacity style={styles.addButton} onPress={actions.showFontSize}>
           <MatIcons name="format-size" size={20} color={Colors.text} />
         </TouchableOpacity>

diff --git a/app/mobile/src/session/conversation/addTopic/binaryFile/BinaryFile.jsx b/app/mobile/src/session/conversation/addTopic/binaryFile/BinaryFile.jsx
@@ -0,0 +1,14 @@
+import { Image, Text, View, TextInput, TouchableOpacity } from 'react-native';
+import { styles } from './BinaryFile.styled';
+
+export function BinaryFile({ path, remove, extension, label, setLabel }) {
+  return (
+    <TouchableOpacity style={styles.binary} onLongPress={remove}>
+      <TextInput style={ styles.input } value={ label } onChangeText={setLabel}
+          multiline={true} autoCapitalize={'none'} placeholder="Binary Label" />
+      <View style={styles.extension}>
+        <Text style={styles.label}>{ extension }</Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
diff --git a/app/mobile/src/session/conversation/addTopic/binaryFile/BinaryFile.styled.js b/app/mobile/src/session/conversation/addTopic/binaryFile/BinaryFile.styled.js
@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  binary: {
+    width: 92,
+    height: 92,
+    backgroundColor: '#888888',
+    borderRadius: 4,
+    marginRight: 16,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  input: {
+    maxHeight: 50,
+    textAlign: 'center',
+    padding: 4,
+    color: 'white',
+  },
+  extension: {
+    flexGrow: 1,
+    display: 'flex',
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
+  },
+  label: {
+    color: 'white',
+    fontSize: 24,
+  },
+})
diff --git a/app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js b/app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js
@@ -162,7 +162,19 @@ export function useAddTopic(contentKey) {
       asset.type = 'audio';
       asset.label = label;
       updateState({ assets: [ ...state.assets, asset ] });
-    }, 
+    },
+    addBinary: async (data, name) => {
+      assetId.current++;
+      const asset = await setAsset(data);
+      asset.key = assetId.current;
+      asset.type = 'binary';
+      asset.extension = name.split('.').pop().toUpperCase();
+      asset.label = name.slice(0, -1 * (asset.extension.length + 1));
+
+console.log(asset);
+
+      updateState({ assets: [ ...state.assets, asset ] });
+    },
     setVideoPosition: (key, position) => {
       updateState({ assets: state.assets.map((item) => {
           if(item.key === key) {
@@ -172,7 +184,7 @@ export function useAddTopic(contentKey) {
         })
       });
     },
-    setAudioLabel: (key, label) => {
+    setLabel: (key, label) => {
       updateState({ assets: state.assets.map((item) => {
           if(item.key === key) {
             return { ...item, label };