update hash for js-libs and fix image path for dev

adriancova · Nov 13, 2020 · 22d9e2e · 22d9e2e
1 parent 1a0a8fb
commit 22d9e2e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 14 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -332,9 +332,9 @@ PODS:
     - React-Core
   - react-native-pdf (6.2.2):
     - React-Core
-  - react-native-progress-bar-android (1.0.3):
+  - react-native-progress-bar-android (1.0.4):
     - React
-  - react-native-progress-view (1.2.1):
+  - react-native-progress-view (1.2.3):
     - React
   - react-native-safe-area-context (3.1.8):
     - React-Core
@@ -646,8 +646,8 @@ SPEC CHECKSUMS:
   react-native-image-picker: 32d1ad2c0024ca36161ae0d5c2117e2d6c441f11
   react-native-netinfo: e36c1bb6df27ab84aa933679b3f5bbf9d180b18f
   react-native-pdf: 4b5a9e4465a6a3b399e91dc4838eb44ddf716d1f
-  react-native-progress-bar-android: d1b109b86c699d36f6a7099dab1a117dc1d66d3c
-  react-native-progress-view: 0b937488a5730aeec461b00c4eb438e1fe626015
+  react-native-progress-bar-android: ce95a69f11ac580799021633071368d08aaf9ad8
+  react-native-progress-view: 5816e8a6be812c2b122c6225a2a3db82d9008640
   react-native-safe-area-context: 01158a92c300895d79dee447e980672dc3fb85a6
   react-native-webview: 2e330b109bfd610e9818bf7865d1979f898960a7
   React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "electron-updater": "^4.3.4",
     "file-loader": "^6.0.0",
     "html-entities": "^1.3.1",
-    "js-libs": "git+https://[email protected]:Expensify/JS-Libs.git#92b874eed3640e7635f7342f8169ddf8f28ca7e4",
+    "js-libs": "git+https://[email protected]:Expensify/JS-Libs.git#346c72907bcd32c215227f00ec4db555a0a2a6aa",
     "lodash.get": "^4.4.2",
     "lodash.has": "^4.5.2",
     "lodash.merge": "^4.6.2",

diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
@@ -12,6 +12,7 @@ import AnchorForCommentsOnly from '../../../components/AnchorForCommentsOnly';
 import ImageThumbnailWithModal from '../../../components/ImageThumbnailWithModal';
 import InlineCodeBlock from '../../../components/InlineCodeBlock';
 import {getAuthToken} from '../../../libs/API';
+import Config from '../../../CONFIG';
 
 const propTypes = {
     // The message fragment needing to be displayed
@@ -33,6 +34,8 @@ class ReportActionItemFragment extends React.PureComponent {
     constructor(props) {
         super(props);
 
+        this.alterNode = this.alterNode.bind(this);
+
         // Define the custom render methods
         // For <a> tags, the <Anchor> attribute is used to be more cross-platform friendly
         this.customRenderers = {
@@ -68,18 +71,47 @@ class ReportActionItemFragment extends React.PureComponent {
             ),
             img: (htmlAttribs, children, convertedCSSStyles, passProps) => (
                 <ImageThumbnailWithModal
-                    previewSourceURL={htmlAttribs['data-expensify-source']
-                        ? `${htmlAttribs.src}?authToken=${getAuthToken()}`
-                        : htmlAttribs.src}
-                    sourceURL={htmlAttribs['data-expensify-source']
-                        ? `${htmlAttribs['data-expensify-source']}?authToken=${getAuthToken()}`
-                        : htmlAttribs.src}
+                    previewSourceURL={htmlAttribs.preview}
+                    sourceURL={htmlAttribs.src}
                     key={passProps.key}
                 />
             ),
         };
     }
 
+    /**
+     * Function to edit HTML on the fly before it's rendered, currently this attaches authTokens as a URL parameter to
+     * load image attachments and updates the image URL if the config is not on production.
+     *
+     * @param {object} node
+     * @returns {object}
+     */
+    alterNode(node) {
+        const htmlNode = node;
+
+        if (htmlNode.name === 'img') {
+            let previewSource = htmlNode.attribs['data-expensify-source']
+                ? `${htmlNode.attribs.src}?authToken=${getAuthToken()}`
+                : htmlNode.attribs.src;
+
+            let source = htmlNode.attribs['data-expensify-source']
+                ? `${htmlNode.attribs['data-expensify-source']}?authToken=${getAuthToken()}`
+                : htmlNode.attribs.src;
+
+            // Update the image URL so the images can be accessed in a dev envrionment
+            if (!Config.IS_IN_PRODUCTION) {
+                const devAPIURL = Config.EXPENSIFY.API_ROOT.replace('/api?', '');
+                const imageURLHostname = 'https://www.expensify.com.dev';
+                previewSource = previewSource.replace(imageURLHostname, devAPIURL);
+                source = source.replace(imageURLHostname, devAPIURL);
+            }
+
+            htmlNode.attribs.preview = previewSource;
+            htmlNode.attribs.src = source;
+            return htmlNode;
+        }
+    }
+
     render() {
         const {fragment} = this.props;
         const maxImageDimensions = 512;
@@ -109,6 +141,7 @@ class ReportActionItemFragment extends React.PureComponent {
                             tagsStyles={webViewStyles.tagStyles}
                             onLinkPress={(event, href) => Linking.openURL(href)}
                             html={fragment.html}
+                            alterNode={this.alterNode}
                             imagesMaxWidth={Math.min(maxImageDimensions, windowWidth * 0.8)}
                             imagesInitialDimensions={{width: maxImageDimensions, height: maxImageDimensions}}
                         />