Download E.cash attachments immediately

src/components/AnchorForCommentsOnly/AnchorWithAuthToken.js

@@ -0,0 +1,50 @@
+import _ from 'underscore';
+import React from 'react';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import {
+    propTypes as anchorForCommentsOnlyPropTypes,
+    defaultProps as anchorForCommentsOnlyDefaultProps,
+} from './anchorForCommentsOnlyPropTypes';
+import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
+import addAuthTokenToURL from '../../libs/addAuthTokenToURL';
+
+const propTypes = {
+    /** Session info for the currently logged in user. */
+    session: PropTypes.shape({
+        /** Currently logged in user authToken */
+        authToken: PropTypes.string,
+    }),
+
+    ...anchorForCommentsOnlyPropTypes,
+};
+
+const defaultProps = {
+    session: {
+        authToken: null,
+    },
+    ...anchorForCommentsOnlyDefaultProps,
+};
+
+const AnchorWithAuthToken = (props) => {
+    const urlWithAuthToken = addAuthTokenToURL({
+        url: props.href,
+        authToken: props.session.authToken,
+    });
+    const propsToPass = _.omit(props, 'session');
+    propsToPass.href = urlWithAuthToken;
+    propsToPass.shouldDownloadFile = true;
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <BaseAnchorForCommentsOnly {...propsToPass} />;
+};
+
+AnchorWithAuthToken.propTypes = propTypes;
+AnchorWithAuthToken.defaultProps = defaultProps;
+AnchorWithAuthToken.displayName = 'AnchorWithAuthToken';
+
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(AnchorWithAuthToken);

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
+
+/*
+ * This is a default anchor component for regular links.
+ */
+const BaseAnchorForCommentsOnly = ({
+    href,
+    rel,
+    target,
+    children,
+    style,
+    ...props
+}) => (
+    <Text
+        style={StyleSheet.flatten(style)}
+        accessibilityRole="link"
+        href={href}
+        rel={rel}
+        target={target}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {children}
+    </Text>
+);
+
+BaseAnchorForCommentsOnly.propTypes = propTypes;
+BaseAnchorForCommentsOnly.defaultProps = defaultProps;
+BaseAnchorForCommentsOnly.displayName = 'BaseAnchorForCommentsOnly';
+
+export default BaseAnchorForCommentsOnly;

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {Linking, StyleSheet, Text} from 'react-native';
+import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
+import fileDownload from '../../../libs/fileDownload';
+
+/*
+ * This is a default anchor component for regular links.
+ */
+const BaseAnchorForCommentsOnly = ({
+    href,
+    children,
+    style,
+    shouldDownloadFile,
+    ...props
+}) => (
+    <Text
+        style={StyleSheet.flatten(style)}
+        onPress={() => (shouldDownloadFile ? fileDownload(href) : Linking.openURL(href))}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {children}
+    </Text>
+);
+
+BaseAnchorForCommentsOnly.propTypes = propTypes;
+BaseAnchorForCommentsOnly.defaultProps = defaultProps;
+BaseAnchorForCommentsOnly.displayName = 'BaseAnchorForCommentsOnly';
+
+export default BaseAnchorForCommentsOnly;

src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js

@@ -3,25 +3,36 @@ import PropTypes from 'prop-types';
 /**
  * Text based component that is passed a URL to open onPress
  */
-const anchorForCommentsOnlyPropTypes = {
-    // The URL to open
+const propTypes = {
+    /** The URL to open */
     href: PropTypes.string,
 
-    // What headers to send to the linked page (usually noopener and noreferrer)
-    // This is unused in native, but is here for parity with web
+    /** What headers to send to the linked page (usually noopener and noreferrer)
+        This is unused in native, but is here for parity with web */
     rel: PropTypes.string,
 
-    // Used to determine where to open a link ("_blank" is passed for a new tab)
-    // This is unused in native, but is here for parity with web
+    /** Used to determine where to open a link ("_blank" is passed for a new tab)
+        This is unused in native, but is here for parity with web */
     target: PropTypes.string,
 
+    /** Should the link be treated as a file download or a regular hyperlink? (relevant to native platforms only)  */
+    shouldDownloadFile: PropTypes.bool,
 
-    // Any children to display
+    /** Any children to display */
     children: PropTypes.node,
 
-    // Any additional styles to apply
+    /** Any additional styles to apply */
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
 };
 
-export default anchorForCommentsOnlyPropTypes;
+const defaultProps = {
+    href: '',
+    rel: '',
+    target: '',
+    shouldDownloadFile: false,
+    children: null,
+    style: {},
+};
+
+export {propTypes, defaultProps};

src/components/AnchorForCommentsOnly/index.js

@@ -1,37 +1,40 @@
+import _ from 'underscore';
 import React from 'react';
-import {StyleSheet, Text} from 'react-native';
-import anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
+import PropTypes from 'prop-types';
+import {
+    propTypes as anchorForCommentsOnlyPropTypes,
+    defaultProps as anchorForCommentsOnlyDefaultProps,
+} from './anchorForCommentsOnlyPropTypes';
+import AnchorWithAuthToken from './AnchorWithAuthToken';
+import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
+
+const propTypes = {
+    /** Do we need an auth token to view this link or download the remote resource? */
+    isAuthTokenRequired: PropTypes.bool,
+
+    ...anchorForCommentsOnlyPropTypes,
+};
 
 const defaultProps = {
-    href: '',
-    rel: '',
-    target: '',
-    children: null,
-    style: {},
+    isAuthTokenRequired: false,
+    ...anchorForCommentsOnlyDefaultProps,
 };
 
-const AnchorForCommentsOnly = ({
-    href,
-    rel,
-    target,
-    children,
-    style,
-    ...props
-}) => (
-    <Text
-        style={StyleSheet.flatten(style)}
-        accessibilityRole="link"
-        href={href}
-        rel={rel}
-        target={target}
+/*
+ * This component acts as a switch between AnchorWithAuthToken and default BaseAnchorForCommentsOnly.
+ * It is an optimization so that we can attach an auth token to a URL when one is required,
+ * without using Onyx.connect on links that don't need an authToken.
+ */
+const AnchorForCommentsOnly = (props) => {
+    const propsToPass = _.omit(props, 'isAuthTokenRequired');
+    return props.isAuthTokenRequired
         // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {children}
-    </Text>
-);
+        ? <AnchorWithAuthToken {...propsToPass} />
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        : <BaseAnchorForCommentsOnly {...propsToPass} />;
+};
 
-AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes;
+AnchorForCommentsOnly.propTypes = propTypes;
 AnchorForCommentsOnly.defaultProps = defaultProps;
 AnchorForCommentsOnly.displayName = 'AnchorForCommentsOnly';
 

src/components/RenderHTML.js

@@ -43,9 +43,13 @@ function computeImagesMaxWidth(contentWidth) {
 
 function AnchorRenderer({tnode, key, style}) {
     const htmlAttribs = tnode.attributes;
+
+    // An auth token is needed to download Expensify chat attachments
+    const isAttachment = Boolean(htmlAttribs['data-expensify-source']);
     return (
         <AnchorForCommentsOnly
             href={htmlAttribs.href}
+            isAuthTokenRequired={isAttachment}
 
             // Unless otherwise specified open all links in
             // a new window. On Desktop this means that we will