From 8da97f8f49acc09d34b202f64acbeb36c1d205ee Mon Sep 17 00:00:00 2001 From: HezekielT Date: Sun, 29 Sep 2024 12:48:56 +0300 Subject: [PATCH 1/7] add isUploading to language and use it in DefaultAttachmentView --- .../AttachmentView/DefaultAttachmentView/index.tsx | 7 +++++-- src/languages/en.ts | 1 + src/languages/es.ts | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index ee594f66aab..e6ac9f9f21c 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -24,9 +24,12 @@ type DefaultAttachmentViewProps = { containerStyles?: StyleProp; 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 && ( - + Date: Sun, 29 Sep 2024 13:07:57 +0300 Subject: [PATCH 2/7] pass isUploading and use it show loading spinner. --- .../BaseAnchorForAttachmentsOnly.tsx | 3 ++- src/components/Attachments/AttachmentView/index.tsx | 8 +++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index 1f1844bf20d..9ef0ab97f43 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -43,7 +43,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => ( { if (isDownloading || isOffline || !sourceID) { return; @@ -69,6 +69,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow shouldShowDownloadIcon={!!sourceID && !isOffline} shouldShowLoadingSpinnerIcon={isDownloading} isUsedAsChatAttachment + isUploading={!sourceID} /> )} diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 6d14a41741a..03669d2fd9a 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -77,6 +77,10 @@ type AttachmentViewProps = AttachmentViewOnyxProps & /* Flag indicating whether the attachment has been uploaded. */ isUploaded?: boolean; + + /** Flag indicating if the attachment is being uploaded. */ + isUploading?: boolean; + }; function AttachmentView({ @@ -101,6 +105,7 @@ function AttachmentView({ duration, isUsedAsChatAttachment, isUploaded = true, + isUploading = false, }: AttachmentViewProps) { const {translate} = useLocalize(); const {updateCurrentlyPlayingURL} = usePlaybackContext(); @@ -288,8 +293,9 @@ function AttachmentView({ ); } From fcf13c9bae431e19745b6820d04225c9ffa3dbd1 Mon Sep 17 00:00:00 2001 From: HezekielT Date: Mon, 30 Sep 2024 03:58:30 +0300 Subject: [PATCH 3/7] replace withOnyx by useOnyx --- .../BaseAnchorForAttachmentsOnly.tsx | 23 +++++-------------- .../Attachments/AttachmentView/index.tsx | 22 ++++++------------ 2 files changed, 13 insertions(+), 32 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index 9ef0ab97f43..f0e3305165d 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -1,6 +1,6 @@ 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,16 +13,10 @@ 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; -}; -type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & - BaseAnchorForAttachmentsOnlyOnyxProps & { +type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & { /** Press in handler for the link */ onPressIn?: () => void; @@ -30,10 +24,12 @@ type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & 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(); @@ -79,11 +75,4 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow BaseAnchorForAttachmentsOnly.displayName = 'BaseAnchorForAttachmentsOnly'; -export default withOnyx({ - download: { - key: ({source}) => { - const sourceID = (source?.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1]; - return `${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`; - }, - }, -})(BaseAnchorForAttachmentsOnly); +export default BaseAnchorForAttachmentsOnly; diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 03669d2fd9a..505bb812f65 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -3,7 +3,7 @@ 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'; @@ -31,12 +31,7 @@ import AttachmentViewVideo from './AttachmentViewVideo'; import DefaultAttachmentView from './DefaultAttachmentView'; import HighResolutionInfo from './HighResolutionInfo'; -type AttachmentViewOnyxProps = { - transaction: OnyxEntry; -}; - -type AttachmentViewProps = AttachmentViewOnyxProps & - Attachment & { +type AttachmentViewProps = Attachment & { /** Whether this view is the active screen */ isFocused?: boolean; @@ -99,7 +94,7 @@ function AttachmentView({ isWorkspaceAvatar, maybeIcon, fallbackSource, - transaction, + transactionID = '-1', reportActionID, isHovered, duration, @@ -110,6 +105,9 @@ function AttachmentView({ 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(); @@ -302,12 +300,6 @@ function AttachmentView({ AttachmentView.displayName = 'AttachmentView'; -export default memo( - withOnyx({ - transaction: { - key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - }, - })(AttachmentView), -); +export default memo(AttachmentView); export type {AttachmentViewProps}; From 87aa484d1449c0d92e27de932e68fb8065f65822 Mon Sep 17 00:00:00 2001 From: HezekielT Date: Mon, 30 Sep 2024 04:00:27 +0300 Subject: [PATCH 4/7] run prettier --- .../BaseAnchorForAttachmentsOnly.tsx | 13 ++-- .../Attachments/AttachmentView/index.tsx | 63 +++++++++---------- 2 files changed, 37 insertions(+), 39 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index f0e3305165d..5f2ab6a761e 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -15,20 +15,19 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type AnchorForAttachmentsOnlyProps from './types'; - type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & { - /** Press in handler for the link */ - onPressIn?: () => void; + /** 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 = '', onPressIn, onPressOut}: BaseAnchorForAttachmentsOnlyProps) { const sourceURLWithAuth = addEncryptedAuthTokenToURL(source); const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1]; - const [download] = useOnyx(`${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`) + const [download] = useOnyx(`${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`); const {isOffline} = useNetwork(); const styles = useThemeStyles(); diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 505bb812f65..41294807397 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -32,51 +32,50 @@ import DefaultAttachmentView from './DefaultAttachmentView'; import HighResolutionInfo from './HighResolutionInfo'; type AttachmentViewProps = Attachment & { - /** Whether this view is the active screen */ - isFocused?: boolean; + /** 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; + /** Extra styles to pass to View wrapper */ + containerStyles?: StyleProp; - /** 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; - - }; + /** Flag indicating if the attachment is being uploaded. */ + isUploading?: boolean; +}; function AttachmentView({ source, @@ -107,7 +106,7 @@ function AttachmentView({ const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`); - + const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); From 33360aa772daa1fc721dae875790c1c010ddd159 Mon Sep 17 00:00:00 2001 From: HezekielT Date: Mon, 30 Sep 2024 04:07:31 +0300 Subject: [PATCH 5/7] remove unused imports --- src/components/Attachments/AttachmentView/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 41294807397..6c6d08f2c30 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -2,7 +2,6 @@ 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 {useOnyx} from 'react-native-onyx'; import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; import type {Attachment, AttachmentSource} from '@components/Attachments/types'; @@ -24,7 +23,6 @@ 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'; From 86d532abfd12fc12f021524c906a5aeb51eab404 Mon Sep 17 00:00:00 2001 From: HezekielT Date: Mon, 30 Sep 2024 04:07:45 +0300 Subject: [PATCH 6/7] remove unused imports --- src/components/Attachments/AttachmentView/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 6c6d08f2c30..132f0affc23 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -288,6 +288,7 @@ function AttachmentView({ Date: Mon, 30 Sep 2024 04:09:55 +0300 Subject: [PATCH 7/7] remove unused imports --- .../AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index 5f2ab6a761e..443a553d468 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; import AttachmentView from '@components/Attachments/AttachmentView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';