[MM-16816] Parse source URI (#3026)

* Parse source URI

* Revert "Parse source URI"

This reverts commit 1cf421c9b9897e46881685aabebb793ad6ff4c07.

* Pass imageUri instead of defaultSource to ProgressiveImage

* Parse source URI in ImageCacheManager

app/components/post_attachment_image/__snapshots__/index.test.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostAttachmentImage should match snapshot 1`] = `
+<TouchableWithoutFeedback
+  onPress={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+        "justifyContent": "flex-start",
+        "marginBottom": 6,
+        "marginTop": 10,
+      },
+      Object {
+        "height": 100,
+      },
+    ]
+  }
+>
+  <View>
+    <ForwardRef(forwardConnectRef)
+      imageUri="uri"
+      onError={[MockFunction]}
+      resizeMode="contain"
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 3,
+            "justifyContent": "center",
+            "marginVertical": 1,
+          },
+          Object {
+            "height": 100,
+            "width": 100,
+          },
+        ]
+      }
+    />
+  </View>
+</TouchableWithoutFeedback>
+`;

app/components/post_attachment_image/index.js

@@ -47,7 +47,7 @@ export default class PostAttachmentImage extends React.PureComponent {
                 <View ref={this.image}>
                     <ProgressiveImage
                         style={[styles.image, {width: this.props.width, height: this.props.height}]}
-                        defaultSource={{uri: this.props.uri}}
+                        imageUri={this.props.uri}
                         resizeMode='contain'
                         onError={this.props.onError}
                     />

app/components/post_attachment_image/index.test.js

@@ -0,0 +1,23 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import PostAttachmentImage from './index';
+
+describe('PostAttachmentImage', () => {
+    const baseProps = {
+        height: 100,
+        width: 100,
+        onError: jest.fn(),
+        onImagePress: jest.fn(),
+        uri: 'uri',
+    };
+
+    it('should match snapshot', () => {
+        const wrapper = shallow(<PostAttachmentImage {...baseProps}/>);
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});

app/utils/image_cache_manager.js

@@ -6,6 +6,8 @@
 import {Platform} from 'react-native';
 import RNFetchBlob from 'rn-fetch-blob';
 
+import Url from 'url-parse';
+
 import {Client4} from 'mattermost-redux/client';
 
 import {DeviceTypes} from 'app/constants';
@@ -22,11 +24,12 @@ let siteUrl;
 export default class ImageCacheManager {
     static listeners = {};
 
-    static cache = async (filename, uri, listener) => {
+    static cache = async (filename, fileUri, listener) => {
         if (!listener) {
             console.warn('Unable to cache image when no listener is provided'); // eslint-disable-line no-console
         }
 
+        const uri = parseUri(fileUri);
         const {path, exists} = await getCacheFile(filename, uri);
         const prefix = Platform.OS === 'android' ? 'file://' : '';
         let pathWithPrefix = `${prefix}${path}`;
@@ -94,6 +97,11 @@ export default class ImageCacheManager {
     };
 }
 
+const parseUri = (uri) => {
+    const url = new Url(uri);
+    return url.href;
+};
+
 export const getCacheFile = async (name, uri) => {
     const filename = name || uri.substring(uri.lastIndexOf('/'), uri.indexOf('?') === -1 ? uri.length : uri.indexOf('?'));
     const defaultExt = `.${getExtensionFromMime(DEFAULT_MIME_TYPE)}`;
@@ -150,7 +158,7 @@ const notifyAll = (uri, path) => {
 };
 
 // taken from https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript-jquery
-const hashCode = (str) => {
+export const hashCode = (str) => {
     let hash = 0;
     let i;
     let chr;

app/utils/image_cache_manager.test.js

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 import RNFetchBlob from 'rn-fetch-blob';
 
-import ImageCacheManager, {getCacheFile} from 'app/utils/image_cache_manager';
+import ImageCacheManager, {getCacheFile, hashCode} from 'app/utils/image_cache_manager';
 import {emptyFunction} from 'app/utils/general';
 import * as fileUtils from 'app/utils/file';
 import mattermostBucket from 'app/mattermost_bucket';
@@ -292,4 +292,22 @@ describe('ImageCacheManager.cache', () => {
         expect(existingListener).toHaveBeenCalledWith(fileUri);
         expect(newListener).toHaveBeenCalledWith(fileUri);
     });
+
+    it('should parse the uri to get the correct protocol', async () => {
+        const fileUri = 'HTTPS://file-uri/ABC123';
+        const expectedFileUri = 'https://file-uri/ABC123';
+        const fileName = null;
+
+        const incorrectHash = hashCode(fileUri);
+        const expectedHash = hashCode(expectedFileUri);
+        expect(incorrectHash).not.toBe(expectedHash);
+
+        RNFetchBlob.fs.exists.mockReturnValueOnce(false);
+        RNFetchBlob.fs.existsWithDiffExt.mockReturnValueOnce(null);
+        RNFetchBlob.fetch.mockReturnValueOnce({respInfo: {respType: '', headers: {}}});
+
+        const path = await ImageCacheManager.cache(fileName, fileUri, emptyFunction); // eslint-disable-line no-await-in-loop
+        const localFilename = path.substring(path.lastIndexOf('/') + 1, path.length);
+        expect(localFilename).toEqual(`${expectedHash}.png`);
+    });
 });