fix file downloading and progress

apps/mobile/patches/react-native-progress+5.0.0.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/react-native-progress/Circle.js b/node_modules/react-native-progress/Circle.js
+index 79f0a9e..3f9ff26 100644
+--- a/node_modules/react-native-progress/Circle.js
++++ b/node_modules/react-native-progress/Circle.js
+@@ -120,8 +120,8 @@ export class ProgressCircle extends Component {
+     return (
+       <View style={[styles.container, style]} {...restProps}>
+         <Surface
+-          width={size}
+-          height={size}
++          width={size + 5}
++          height={size + 5}
+           style={
+             indeterminate && rotation
+               ? {

apps/mobile/src/components/AttachmentDialog/index.js

@@ -133,20 +133,9 @@ function formatBytes(bytes, decimals = 2) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
 
-let icons = {
+function getFileExtension(filename) {
-  image: 'image',
+  var ext = /^.+\.([^.]+)$/.exec(filename);
-  file: 'file',
+  return ext == null ? '' : ext[1];
-  pdf: 'file-pdf-box',
-  video: 'file-video-outline',
-  audio: 'file-music-outline'
-};
-
-function getIcon(type) {
-  let types = type.split('/');
-  let icon = Object.keys(icons).find(
-    i => i.includes(types[0]) || i.includes(types[1])
-  );
-  return icons[icon] || 'file';
 }
 
 const Attachment = ({attachment, note, setNote}) => {
@@ -154,66 +143,70 @@ const Attachment = ({attachment, note, setNote}) => {
   const colors = state.colors;
   const progress = useAttachmentStore(state => state.progress);
   const setProgress = useAttachmentStore(state => state.setProgress);
+  const [currentProgress, setCurrentProgress] = useState(null);
 
-
+  const onPress = async () => {
-  const onPress = async attachment => {
+    if (currentProgress) {
-    if (getProgress()) {
       db.fs.cancel(attachment.metadata.hash, 'download');
-      setProgress(0, 0, attachment.metadata.hash, 0, 'download', false);
+      useAttachmentStore.getState().remove(attachment.metadata.hash);
       return;
     }
 
     let folder = {};
     if (Platform.OS === 'android') {
-      let uris = await ScopedStorage.getPersistedUriPermissions();
+      folder = await ScopedStorage.openDocumentTree(false);
-      if (uris.length === 0) {
+      if (!folder) return;
-        folder = await ScopedStorage.openDocumentTree();
-      } else {
-        folder = {
-          uri: uris[0]
-        };
-      }
     } else {
       folder.uri = await Storage.checkAndCreateDir('/Downloads/');
     }
 
     try {
+      setCurrentProgress({
+        value: 0,
+        percent: '0%'
+      });
       await db.fs.downloadFile(
         attachment.metadata.hash,
         attachment.metadata.hash
       );
-      db.attachments;
       let key = await db.user.getEncryptionKey();
-      await Sodium.decryptFile(key, {
+      let info = {
         iv: attachment.iv,
         salt: attachment.salt,
         length: attachment.length,
         alg: attachment.alg,
-        hash: attachment.hash,
+        hash: attachment.metadata.hash,
-        hashType: attachment.hashType,
+        hashType: attachment.metadata.hashType,
         mime: attachment.metadata.type,
         fileName: attachment.metadata.filename,
         uri: folder.uri
+      };
+      await Sodium.decryptFile(key, info, false);
+      ToastEvent.show({
+        heading: 'Download successful',
+        message: attachment.metadata.filename + 'downloaded',
+        type: 'success',
+        context: 'local'
       });
     } catch (e) {
-      setProgress(0, 0, attachment.metadata.hash, 0, 'download', false);
+      console.log('download attachment error: ', e);
+      useAttachmentStore.getState().remove(attachment.metadata.hash);
     }
   };
-
+  useEffect(() => {
-  const getProgress = attachment => {
     let prog = progress[attachment.metadata.hash];
     if (prog && prog.type === 'download') {
       prog = prog.recieved / prog.total;
       prog = (prog * 100).toFixed(0);
-
+      console.log('progress: ', prog);
-      return {
+      setCurrentProgress({
         value: prog,
         percent: prog + '%'
-      };
+      });
     } else {
-      return null;
+      setCurrentProgress(null);
     }
-  };
+  }, [progress]);
 
   return (
     <View
@@ -233,11 +226,25 @@ const Attachment = ({attachment, note, setNote}) => {
           flexDirection: 'row',
           alignItems: 'center'
         }}>
-        <Icon
+        <View
-          name={getIcon(attachment.metadata.type)}
+          style={{
-          size={SIZE.lg}
+            justifyContent: 'center',
-          color={colors.pri}
+            alignItems: 'center',
-        />
+            marginLeft: -5
+          }}>
+          <Icon name="file" size={SIZE.xxxl} color={colors.icon} />
+
+          <Paragraph
+            adjustsFontSizeToFit
+            size={6}
+            color={colors.light}
+            style={{
+              position: 'absolute'
+            }}>
+            {getFileExtension(attachment.metadata.filename).toUpperCase()}
+          </Paragraph>
+        </View>
+
         <View
           style={{
             flexShrink: 1,
@@ -261,7 +268,7 @@ const Attachment = ({attachment, note, setNote}) => {
         </View>
       </View>
 
-      {getProgress(attachment) ? (
+      {currentProgress ? (
         <View
           style={{
             justifyContent: 'center',
@@ -269,7 +276,7 @@ const Attachment = ({attachment, note, setNote}) => {
           }}>
           <Progress.Circle
             size={SIZE.xxl}
-            progress={getProgress(attachment).value / 100}
+            progress={currentProgress?.value ? currentProgress?.value / 100 : 0}
             showsText
             textStyle={{
               fontSize: 9

apps/mobile/src/utils/useAppEvents.js

@@ -64,12 +64,12 @@ export const useAppEvents = () => {
   });
 
   const onMediaDownloaded = ({hash, src}) => {
-    console.log('on media download: ', hash, src);
+    console.log('on media download: ', hash);
     tiny.call(
       EditorWebView,
       `
         (function(){
-          let image = JSON.parse("${JSON.stringify({hash, src})}");
+          let image = ${JSON.stringify({hash, src})};
           tinymce.activeEditor.execCommand("mceReplaceImage",image);
         })();
         `