Fix - Attachment - Unable to download a txt attachment until the browser is refreshed

src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import AttachmentView from '@components/Attachments/AttachmentView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
@@ -13,27 +12,22 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as Download from '@userActions/Download';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Download as OnyxDownload} from '@src/types/onyx';
 import type AnchorForAttachmentsOnlyProps from './types';
 
-type BaseAnchorForAttachmentsOnlyOnyxProps = {
-    /** If a file download is happening */
-    download: OnyxEntry<OnyxDownload>;
-};
-
-type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps &
-    BaseAnchorForAttachmentsOnlyOnyxProps & {
-        /** Press in handler for the link */
-        onPressIn?: () => void;
+type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & {
+    /** Press in handler for the link */
+    onPressIn?: () => void;
 
-        /** Press out handler for the link */
-        onPressOut?: () => void;
-    };
+    /** Press out handler for the link */
+    onPressOut?: () => void;
+};
 
-function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', download, onPressIn, onPressOut}: BaseAnchorForAttachmentsOnlyProps) {
+function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onPressIn, onPressOut}: BaseAnchorForAttachmentsOnlyProps) {
     const sourceURLWithAuth = addEncryptedAuthTokenToURL(source);
     const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1];
 
+    const [download] = useOnyx(`${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`);
+
     const {isOffline} = useNetwork();
     const styles = useThemeStyles();
 
@@ -43,7 +37,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
         <ShowContextMenuContext.Consumer>
             {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                 <PressableWithoutFeedback
-                    style={[style, isOffline && styles.cursorDefault]}
+                    style={[style, (isOffline || !sourceID) && styles.cursorDefault]}
                     onPress={() => {
                         if (isDownloading || isOffline || !sourceID) {
                             return;
@@ -69,6 +63,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
                         shouldShowDownloadIcon={!!sourceID && !isOffline}
                         shouldShowLoadingSpinnerIcon={isDownloading}
                         isUsedAsChatAttachment
+                        isUploading={!sourceID}
                     />
                 </PressableWithoutFeedback>
             )}
@@ -78,11 +73,4 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
 
 BaseAnchorForAttachmentsOnly.displayName = 'BaseAnchorForAttachmentsOnly';
 
-export default withOnyx<BaseAnchorForAttachmentsOnlyProps, BaseAnchorForAttachmentsOnlyOnyxProps>({
-    download: {
-        key: ({source}) => {
-            const sourceID = (source?.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1];
-            return `${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`;
-        },
-    },
-})(BaseAnchorForAttachmentsOnly);
+export default BaseAnchorForAttachmentsOnly;

src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx

@@ -24,9 +24,12 @@ type DefaultAttachmentViewProps = {
     containerStyles?: StyleProp<ViewStyle>;
 
     icon?: IconAsset;
+
+    /** Flag indicating if the attachment is being uploaded. */
+    isUploading?: boolean;
 };
 
-function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon}: DefaultAttachmentViewProps) {
+function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon, isUploading}: DefaultAttachmentViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -53,7 +56,7 @@ function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = fa
             )}
             {shouldShowLoadingSpinnerIcon && (
                 <View style={styles.ml2}>
-                    <Tooltip text={translate('common.downloading')}>
+                    <Tooltip text={isUploading ? translate('common.uploading') : translate('common.downloading')}>
                         <ActivityIndicator
                             size="small"
                             color={theme.textSupporting}

src/components/Attachments/AttachmentView/index.tsx

@@ -2,8 +2,7 @@ import {Str} from 'expensify-common';
 import React, {memo, useContext, useEffect, useState} from 'react';
 import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import DistanceEReceipt from '@components/DistanceEReceipt';
@@ -24,60 +23,57 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import type {ColorValue} from '@styles/utils/types';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Transaction} from '@src/types/onyx';
 import AttachmentViewImage from './AttachmentViewImage';
 import AttachmentViewPdf from './AttachmentViewPdf';
 import AttachmentViewVideo from './AttachmentViewVideo';
 import DefaultAttachmentView from './DefaultAttachmentView';
 import HighResolutionInfo from './HighResolutionInfo';
 
-type AttachmentViewOnyxProps = {
-    transaction: OnyxEntry<Transaction>;
-};
+type AttachmentViewProps = Attachment & {
+    /** Whether this view is the active screen  */
+    isFocused?: boolean;
 
-type AttachmentViewProps = AttachmentViewOnyxProps &
-    Attachment & {
-        /** Whether this view is the active screen  */
-        isFocused?: boolean;
+    /** Function for handle on press */
+    onPress?: (e?: GestureResponderEvent | KeyboardEvent) => void;
 
-        /** Function for handle on press */
-        onPress?: (e?: GestureResponderEvent | KeyboardEvent) => void;
+    isUsedInAttachmentModal?: boolean;
 
-        isUsedInAttachmentModal?: boolean;
+    /** Flag to show/hide download icon */
+    shouldShowDownloadIcon?: boolean;
 
-        /** Flag to show/hide download icon */
-        shouldShowDownloadIcon?: boolean;
+    /** Flag to show the loading indicator */
+    shouldShowLoadingSpinnerIcon?: boolean;
 
-        /** Flag to show the loading indicator */
-        shouldShowLoadingSpinnerIcon?: boolean;
+    /** Notify parent that the UI should be modified to accommodate keyboard */
+    onToggleKeyboard?: (shouldFadeOut: boolean) => void;
 
-        /** Notify parent that the UI should be modified to accommodate keyboard */
-        onToggleKeyboard?: (shouldFadeOut: boolean) => void;
+    /** A callback when the PDF fails to load */
+    onPDFLoadError?: () => void;
 
-        /** A callback when the PDF fails to load */
-        onPDFLoadError?: () => void;
+    /** Extra styles to pass to View wrapper */
+    containerStyles?: StyleProp<ViewStyle>;
 
-        /** Extra styles to pass to View wrapper */
-        containerStyles?: StyleProp<ViewStyle>;
+    /** Denotes whether it is a workspace avatar or not */
+    isWorkspaceAvatar?: boolean;
 
-        /** Denotes whether it is a workspace avatar or not */
-        isWorkspaceAvatar?: boolean;
+    /** Denotes whether it is an icon (ex: SVG) */
+    maybeIcon?: boolean;
 
-        /** Denotes whether it is an icon (ex: SVG) */
-        maybeIcon?: boolean;
+    /** Fallback source to use in case of error */
+    fallbackSource?: AttachmentSource;
 
-        /** Fallback source to use in case of error */
-        fallbackSource?: AttachmentSource;
+    /* Whether it is hovered or not */
+    isHovered?: boolean;
 
-        /* Whether it is hovered or not */
-        isHovered?: boolean;
+    /** Whether the attachment is used as a chat attachment */
+    isUsedAsChatAttachment?: boolean;
 
-        /** Whether the attachment is used as a chat attachment */
-        isUsedAsChatAttachment?: boolean;
+    /* Flag indicating whether the attachment has been uploaded. */
+    isUploaded?: boolean;
 
-        /* Flag indicating whether the attachment has been uploaded. */
-        isUploaded?: boolean;
-    };
+    /** Flag indicating if the attachment is being uploaded. */
+    isUploading?: boolean;
+};
 
 function AttachmentView({
     source,
@@ -95,16 +91,20 @@ function AttachmentView({
     isWorkspaceAvatar,
     maybeIcon,
     fallbackSource,
-    transaction,
+    transactionID = '-1',
     reportActionID,
     isHovered,
     duration,
     isUsedAsChatAttachment,
     isUploaded = true,
+    isUploading = false,
 }: AttachmentViewProps) {
     const {translate} = useLocalize();
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
+
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -288,20 +288,16 @@ function AttachmentView({
         <DefaultAttachmentView
             fileName={file?.name}
             shouldShowDownloadIcon={shouldShowDownloadIcon}
-            shouldShowLoadingSpinnerIcon={shouldShowLoadingSpinnerIcon}
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            shouldShowLoadingSpinnerIcon={shouldShowLoadingSpinnerIcon || isUploading}
             containerStyles={containerStyles}
+            isUploading={isUploading}
         />
     );
 }
 
 AttachmentView.displayName = 'AttachmentView';
 
-export default memo(
-    withOnyx<AttachmentViewProps, AttachmentViewOnyxProps>({
-        transaction: {
-            key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
-        },
-    })(AttachmentView),
-);
+export default memo(AttachmentView);
 
 export type {AttachmentViewProps};

src/languages/en.ts

@@ -276,6 +276,7 @@ const translations = {
         close: 'Close',
         download: 'Download',
         downloading: 'Downloading',
+        uploading: 'Uploading',
         pin: 'Pin',
         unPin: 'Unpin',
         back: 'Back',

src/languages/es.ts

@@ -266,6 +266,7 @@ const translations = {
         close: 'Cerrar',
         download: 'Descargar',
         downloading: 'Descargando',
+        uploading: 'Subiendo',
         pin: 'Fijar',
         unPin: 'Desfijar',
         back: 'Volver',