From 1a9b34f6184f12314746bb4938c55b273fbe0b70 Mon Sep 17 00:00:00 2001
From: Miguel Alatzar <migbot@users.noreply.github.com>
Date: Mon, 22 Apr 2019 19:19:21 -0700
Subject: [PATCH] [MM-14699] Update image cache manager to handle correct file
 extensions (#2701)

* Update image cache manager to handle correct file extensions

* Use RNFetchBlob.fs.existsWithDiffExt to find cached images with
  extensions other than the default .png

* Add package-lock.json

* Use app/util/file's getExtensionFromMime

* Define DEFAULT_MIME_TYPE in image_cache_manager.js
---
 app/utils/image_cache_manager.js | 29 +++++++++++++++++++++++++----
 package-lock.json                | 19 +++++++++++++++++--
 package.json                     |  2 +-
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/app/utils/image_cache_manager.js b/app/utils/image_cache_manager.js
index c990c6277..64f3ee973 100644
--- a/app/utils/image_cache_manager.js
+++ b/app/utils/image_cache_manager.js
@@ -9,9 +9,11 @@ import RNFetchBlob from 'rn-fetch-blob';
 import {Client4} from 'mattermost-redux/client';
 
 import {DeviceTypes} from 'app/constants';
+import {getExtensionFromMime} from 'app/utils/file';
 import mattermostBucket from 'app/mattermost_bucket';
 
 const {IMAGES_PATH} = DeviceTypes;
+const DEFAULT_MIME_TYPE = 'image/png';
 let siteUrl;
 
 export default class ImageCacheManager {
@@ -53,7 +55,17 @@ export default class ImageCacheManager {
                         throw new Error();
                     }
 
-                    notifyAll(uri, `${prefix}${path}`);
+                    const mimeType = this.downloadTask.respInfo.headers['Content-Type'];
+                    const ext = `.${getExtensionFromMime(mimeType) || getExtensionFromMime(DEFAULT_MIME_TYPE)}`;
+                    if (path.endsWith(ext)) {
+                        notifyAll(uri, `${prefix}${path}`);
+                    } else {
+                        const oldExt = path.substring(path.lastIndexOf('.'));
+                        const newPath = path.replace(oldExt, ext);
+                        await RNFetchBlob.fs.mv(path, newPath);
+
+                        notifyAll(uri, `${prefix}${newPath}`);
+                    }
                 } catch (e) {
                     RNFetchBlob.fs.unlink(`${prefix}${path}`);
                     notifyAll(uri, uri);
@@ -70,8 +82,9 @@ export default class ImageCacheManager {
 
 export const getCacheFile = async (name, uri) => {
     const filename = name || uri.substring(uri.lastIndexOf('/'), uri.indexOf('?') === -1 ? uri.length : uri.indexOf('?'));
-    const ext = filename.indexOf('.') === -1 ? '.png' : filename.substring(filename.lastIndexOf('.'));
-    const path = `${IMAGES_PATH}/${Math.abs(hashCode(uri))}${ext}`;
+    const defaultExt = `.${getExtensionFromMime(DEFAULT_MIME_TYPE)}`;
+    const ext = filename.indexOf('.') === -1 ? defaultExt : filename.substring(filename.lastIndexOf('.'));
+    let path = `${IMAGES_PATH}/${Math.abs(hashCode(uri))}${ext}`;
 
     try {
         const isDir = await RNFetchBlob.fs.isDir(IMAGES_PATH);
@@ -82,7 +95,15 @@ export const getCacheFile = async (name, uri) => {
         // do nothing
     }
 
-    const exists = await RNFetchBlob.fs.exists(path);
+    let exists = await RNFetchBlob.fs.exists(path);
+    if (!exists) {
+        const pathWithDiffExt = await RNFetchBlob.fs.existsWithDiffExt(path);
+        if (pathWithDiffExt) {
+            exists = true;
+            path = pathWithDiffExt;
+        }
+    }
+
     return {exists, path};
 };
 
diff --git a/package-lock.json b/package-lock.json
index 29f1dac66..b72798732 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10360,6 +10360,21 @@
         }
       }
     },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "requires": {
+        "minimist": "0.0.8"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+        }
+      }
+    },
     "moment": {
       "version": "2.22.2",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
@@ -13891,8 +13906,8 @@
       }
     },
     "rn-fetch-blob": {
-      "version": "github:mattermost/react-native-fetch-blob#5b19784992ef2a1fa00c3a4c71fb005d7789b05c",
-      "from": "github:mattermost/react-native-fetch-blob#5b19784992ef2a1fa00c3a4c71fb005d7789b05c",
+      "version": "github:mattermost/react-native-fetch-blob#1800697e2e3834e80f7e5fa84edb5aa43c161bbc",
+      "from": "github:mattermost/react-native-fetch-blob#1800697e2e3834e80f7e5fa84edb5aa43c161bbc",
       "requires": {
         "base-64": "0.1.0",
         "glob": "7.0.6"
diff --git a/package.json b/package.json
index 973949a90..97395728a 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "redux-persist-transform-filter": "0.0.18",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
-    "rn-fetch-blob": "github:mattermost/react-native-fetch-blob#5b19784992ef2a1fa00c3a4c71fb005d7789b05c",
+    "rn-fetch-blob": "github:mattermost/react-native-fetch-blob#1800697e2e3834e80f7e5fa84edb5aa43c161bbc",
     "rn-placeholder": "github:mattermost/rn-placeholder#bfee66eb54f1f06d1425a0ad511a5e16559bf82c",
     "semver": "5.6.0",
     "shallow-equals": "1.0.0",