From eea04210ea4c1b1e8dfbf2828b1f69d3f319b71b Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Sat, 23 Nov 2024 10:11:23 +0700 Subject: [PATCH 01/27] WIP use PureReportActionItem in ChatListItem --- src/components/SelectionList/ChatListItem.tsx | 107 ++++++++++-------- 1 file changed, 61 insertions(+), 46 deletions(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index a3e04c9088f1..630eb33fa597 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -8,9 +8,11 @@ import TextWithTooltip from '@components/TextWithTooltip'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import PureReportActionItem from '@pages/home/report/PureReportActionItem'; import ReportActionItemDate from '@pages/home/report/ReportActionItemDate'; import ReportActionItemFragment from '@pages/home/report/ReportActionItemFragment'; import CONST from '@src/CONST'; +import type * as OnyxTypes from '@src/types/onyx'; import BaseListItem from './BaseListItem'; import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types'; @@ -61,7 +63,7 @@ function ChatListItem({ ({ hoverStyle={item.isSelected && styles.activeComponentBG} > {(hovered) => ( - - - - - - - - - - - - - {reportActionItem.message.map((fragment, index) => ( - - ))} - - - - - + onSelectRow(item)} + report={undefined} + reportActions={[]} + parentReportAction={undefined} + displayAsGroup={false} + isMostRecentIOUReportAction={false} + shouldDisplayNewMarker={false} + index={item.index ?? 0} + isFirstVisibleReportAction={false} + /> + + // + // + // + // + // + // + // + // + // + // + // + // + // {reportActionItem.message.map((fragment, index) => ( + // + // ))} + // + // + // + // + // )} ); From 639b4135d776330eaf3ed8d452a205a5d85be749 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Tue, 17 Dec 2024 09:20:48 +0700 Subject: [PATCH 02/27] Pass personalDetails to ReportActionItemSingle --- src/components/SelectionList/ChatListItem.tsx | 11 +++++- src/libs/ReportUtils.ts | 2 +- .../home/report/PureReportActionItem.tsx | 4 ++- .../home/report/ReportActionItemSingle.tsx | 34 ++++++++++++++----- 4 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index 0c5930193857..30ce2c664893 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -17,6 +17,7 @@ import CONST from '@src/CONST'; import type * as OnyxTypes from '@src/types/onyx'; import BaseListItem from './BaseListItem'; import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types'; +import { SearchPersonalDetails } from '@src/types/onyx/SearchResults'; function ChatListItem({ item, @@ -76,11 +77,18 @@ function ChatListItem({ styles.mh0, item.cursorStyle, ]; + + const personalDetails: Record = { + [from.accountID]: from, + } + return ( ({ shouldDisplayNewMarker={false} index={item.index ?? 0} isFirstVisibleReportAction={false} + personalDetails={personalDetails} /> // diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index eb728586f8f2..fda62470c0c2 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -54,7 +54,7 @@ import type {Status} from '@src/types/onyx/PersonalDetails'; import type {ConnectionName} from '@src/types/onyx/Policy'; import type {NotificationPreference, Participants, PendingChatMember, Participant as ReportParticipant} from '@src/types/onyx/Report'; import type {Message, OldDotReportAction, ReportActions} from '@src/types/onyx/ReportAction'; -import type {SearchPolicy, SearchReport, SearchTransaction} from '@src/types/onyx/SearchResults'; +import type {SearchPolicy, SearchReport, SearchReportAction, SearchTransaction} from '@src/types/onyx/SearchResults'; import type {Comment, TransactionChanges, WaypointCollection} from '@src/types/onyx/Transaction'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type IconAsset from '@src/types/utils/IconAsset'; diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 34dd2a9d1350..2314829a316e 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -81,6 +81,7 @@ import ReportActionItemMessageEdit from './ReportActionItemMessageEdit'; import ReportActionItemSingle from './ReportActionItemSingle'; import ReportActionItemThread from './ReportActionItemThread'; import ReportAttachmentsContext from './ReportAttachmentsContext'; +import { SearchPersonalDetails } from '@src/types/onyx/SearchResults'; type PureReportActionItemProps = { /** Report for this action */ @@ -164,7 +165,7 @@ type PureReportActionItemProps = { parentReport?: OnyxTypes.Report; /** Personal details list */ - personalDetails?: OnyxTypes.PersonalDetailsList; + personalDetails?: OnyxTypes.PersonalDetailsList | Record; /** Whether or not the user is blocked from concierge */ blockedFromConcierge?: OnyxTypes.BlockedFromConcierge; @@ -999,6 +1000,7 @@ function PureReportActionItem({ ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) && !ReportActionsUtils.isPendingRemove(action) } + personalDetails={personalDetails} > {content} diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 7c42991d2852..1b44a6ee3033 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -28,10 +28,15 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Report, ReportAction} from '@src/types/onyx'; -import type {Icon} from '@src/types/onyx/OnyxCommon'; +import type {Icon, PendingAction, PendingFields} from '@src/types/onyx/OnyxCommon'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import ReportActionItemDate from './ReportActionItemDate'; import ReportActionItemFragment from './ReportActionItemFragment'; +import type * as OnyxTypes from '@src/types/onyx'; +import { SearchPersonalDetails } from '@src/types/onyx/SearchResults'; +import { Status } from '@src/types/onyx/PersonalDetails'; +import { AvatarSource } from '@libs/UserUtils'; + type ReportActionItemSingleProps = Partial & { /** All the data of the action */ @@ -57,6 +62,9 @@ type ReportActionItemSingleProps = Partial & { /** If the action is being hovered */ isHovered?: boolean; + + /** Personal details list */ + personalDetails?: OnyxTypes.PersonalDetailsList | Record; }; const showUserDetails = (accountID: string) => { @@ -77,12 +85,12 @@ function ReportActionItemSingle({ report, iouReport, isHovered = false, + personalDetails, }: ReportActionItemSingleProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const personalDetails = usePersonalDetails(); const policy = usePolicy(report?.policyID); const delegatePersonalDetails = personalDetails?.[action?.delegateAccountID ?? '']; const ownerAccountID = iouReport?.ownerAccountID ?? action?.childOwnerAccountID; @@ -91,7 +99,14 @@ function ReportActionItemSingle({ const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID); - const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails?.[actorAccountID ?? -1] ?? {}; + const {avatar, login} = personalDetails?.[actorAccountID ?? -1] ?? {}; + console.log("[wildebug] ~ file: ReportActionItemSingle.tsx:103 ~ actorAccountID:", actorAccountID) + console.log("[wildebug] ~ file: ReportActionItemSingle.tsx:103 ~ personalDetails:", personalDetails) + console.log("[wildebug] ~ file: ReportActionItemSingle.tsx:103 ~ avatar:", avatar) + const pendingFields = personalDetails && 'pendingFields' in personalDetails ? personalDetails.pendingFields : undefined; + const status = personalDetails && 'status' in personalDetails ? personalDetails.status : undefined; + const fallbackIcon = personalDetails && 'fallbackIcon' in personalDetails && personalDetails.fallbackIcon !== null ? personalDetails.fallbackIcon : undefined; + const accountOwnerDetails = getPersonalDetailByEmail(login ?? ''); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing let actorHint = (login || (displayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''); @@ -237,17 +252,18 @@ function ReportActionItemSingle({ type={icon.type} name={icon.name} avatarID={icon.id} - fallbackIcon={fallbackIcon} + fallbackIcon={fallbackIcon as AvatarSource} /> ); }; - const hasEmojiStatus = !displayAllActors && status?.emojiCode; - const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? ''); - const statusText = status?.text ?? ''; + const hasEmojiStatus = !displayAllActors && status && 'emojiCode' in status && status?.emojiCode; + const statusClearAfter = status && 'clearAfter' in status ? (String(status?.clearAfter) ?? '') : ''; + const formattedDate = DateUtils.getStatusUntilDate(statusClearAfter); + const statusText = status && 'text' in status ? String(status?.text) ?? '' : ''; const statusTooltipText = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText; - + // const pendingFieldsAvatar = pendingFields && 'avatar' in pendingFields ? pendingFields?.avatar ?? undefined : undefined; return ( - {getAvatar()} + {getAvatar()} {showHeader ? ( From 7dc43b4cc3223f0eca72ba53bc264b21c05293cd Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Tue, 17 Dec 2024 15:55:34 +0700 Subject: [PATCH 03/27] WIP, override contextvalue from search page --- src/components/Search/index.tsx | 1 + src/components/SelectionList/ChatListItem.tsx | 11 +++++- src/components/ShowContextMenuContext.ts | 8 ++--- .../home/report/PureReportActionItem.tsx | 35 +++++++++++++++---- 4 files changed, 43 insertions(+), 12 deletions(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 4c08c477f29d..c08f925adfc7 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -136,6 +136,7 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`); const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION); + console.log("[wildebug] ~ file: index.tsx:139 ~ Search ~ hash:", hash) const previousTransactions = usePrevious(transactions); const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS); const previousReportActions = usePrevious(reportActions); diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index 30ce2c664893..8c1a68a8dfc9 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -17,7 +17,9 @@ import CONST from '@src/CONST'; import type * as OnyxTypes from '@src/types/onyx'; import BaseListItem from './BaseListItem'; import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types'; -import { SearchPersonalDetails } from '@src/types/onyx/SearchResults'; +import { SearchPersonalDetails, SearchReport } from '@src/types/onyx/SearchResults'; +import { useOnyx } from 'react-native-onyx'; +import ONYXKEYS from '@src/ONYXKEYS'; function ChatListItem({ item, @@ -61,6 +63,7 @@ function ChatListItem({ const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar; const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? '-1'}), [item.reportID]); + const animatedHighlightStyle = useAnimatedHighlightStyle({ borderRadius: variables.componentBorderRadius, shouldHighlight: item?.shouldAnimateInHighlight ?? false, @@ -82,6 +85,8 @@ function ChatListItem({ [from.accountID]: from, } + const [reportOnyx, reportResult] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportActionItem.reportID}`, {allowStaleData: true}); + return ( ({ onSelectRow(item)} + // report={{reportID : reportActionItem.reportID} as OnyxTypes.Report} report={undefined} reportActions={[]} parentReportAction={undefined} @@ -118,6 +124,9 @@ function ChatListItem({ index={item.index ?? 0} isFirstVisibleReportAction={false} personalDetails={personalDetails} + contextValueOverride={contextValue} + attachmentContextValueOverride={attachmentContextValue} + mentionReportContextValueOverride={mentionReportContextValue} /> // diff --git a/src/components/ShowContextMenuContext.ts b/src/components/ShowContextMenuContext.ts index 6fefa987fac3..04c437165842 100644 --- a/src/components/ShowContextMenuContext.ts +++ b/src/components/ShowContextMenuContext.ts @@ -10,10 +10,10 @@ import CONST from '@src/CONST'; import type {Report, ReportAction, ReportNameValuePairs} from '@src/types/onyx'; type ShowContextMenuContextProps = { - anchor: ContextMenuAnchor; - report: OnyxEntry; - reportNameValuePairs: OnyxEntry; - action: OnyxEntry; + anchor?: ContextMenuAnchor; + report?: OnyxEntry; + reportNameValuePairs?: OnyxEntry; + action?: OnyxEntry; transactionThreadReport?: OnyxEntry; checkIfContextMenuActive: () => void; isDisabled: boolean; diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 2314829a316e..8de1475c8c2b 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -28,7 +28,7 @@ import ReportPreview from '@components/ReportActionItem/ReportPreview'; import TaskAction from '@components/ReportActionItem/TaskAction'; import TaskPreview from '@components/ReportActionItem/TaskPreview'; import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview'; -import {ShowContextMenuContext} from '@components/ShowContextMenuContext'; +import {ShowContextMenuContext, ShowContextMenuContextProps} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; import UnreadActionIndicator from '@components/UnreadActionIndicator'; import useLocalize from '@hooks/useLocalize'; @@ -81,7 +81,7 @@ import ReportActionItemMessageEdit from './ReportActionItemMessageEdit'; import ReportActionItemSingle from './ReportActionItemSingle'; import ReportActionItemThread from './ReportActionItemThread'; import ReportAttachmentsContext from './ReportAttachmentsContext'; -import { SearchPersonalDetails } from '@src/types/onyx/SearchResults'; +import { SearchPersonalDetails, SearchReport } from '@src/types/onyx/SearchResults'; type PureReportActionItemProps = { /** Report for this action */ @@ -241,6 +241,21 @@ type PureReportActionItemProps = { /** A message related to a report action that has been automatically forwarded */ reportAutomaticallyForwardedMessage?: string; + + /** The context value containing the report and action data, along with the show context menu props */ + contextValueOverride?: ShowContextMenuContextProps & { + report?: OnyxTypes.Report; + action?: OnyxTypes.ReportAction; + }; + + attachmentContextValueOverride?: { + reportID?: string; + type: ValueOf; + } + + mentionReportContextValueOverride?: { + currentReportID: string; + } }; /** @@ -294,6 +309,9 @@ function PureReportActionItem({ dismissTrackExpenseActionableWhisper = () => {}, userBillingFundID, reportAutomaticallyForwardedMessage, + contextValueOverride, + attachmentContextValueOverride, + mentionReportContextValueOverride, }: PureReportActionItemProps) { const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); @@ -505,10 +523,10 @@ function PureReportActionItem({ [reportID, action, emojiReactions, toggleEmojiReaction], ); - const contextValue = useMemo( + const contextValue = contextValueOverride ? contextValueOverride : useMemo( () => ({ anchor: popoverAnchorRef.current, - report: {...report, reportID: report?.reportID ?? ''}, + report: { ...report, reportID: report?.reportID ?? '' }, reportNameValuePairs, action, transactionThreadReport, @@ -518,9 +536,9 @@ function PureReportActionItem({ [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs], ); - const attachmentContextValue = useMemo(() => ({reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [reportID]); + const attachmentContextValue = attachmentContextValueOverride ? attachmentContextValueOverride : useMemo(() => ({ reportID, type: CONST.ATTACHMENT_TYPE.REPORT }), [reportID]); - const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? '-1'}), [report?.reportID]); + const mentionReportContextValue = mentionReportContextValueOverride ? mentionReportContextValueOverride : useMemo(() => ({ currentReportID: report?.reportID ?? '-1' }), [report?.reportID]); const actionableItemButtons: ActionableItem[] = useMemo(() => { if (ReportActionsUtils.isActionableAddPaymentCard(action) && userBillingFundID === undefined && shouldRenderAddPaymentCard()) { @@ -1219,6 +1237,9 @@ export default memo(PureReportActionItem, (prevProps, nextProps) => { prevProps.reimbursementDeQueuedActionMessage === nextProps.reimbursementDeQueuedActionMessage && prevProps.modifiedExpenseMessage === nextProps.modifiedExpenseMessage && prevProps.userBillingFundID === nextProps.userBillingFundID && - prevProps.reportAutomaticallyForwardedMessage === nextProps.reportAutomaticallyForwardedMessage + prevProps.reportAutomaticallyForwardedMessage === nextProps.reportAutomaticallyForwardedMessage && + prevProps.contextValueOverride === nextProps.contextValueOverride && + prevProps.attachmentContextValueOverride === nextProps.attachmentContextValueOverride && + prevProps.mentionReportContexValueOverride === nextProps.mentionReportContexValueOverride ); }); From 0d0c33a1caa19a9f969a2872c31768ed0024d52f Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Wed, 18 Dec 2024 07:05:48 +0700 Subject: [PATCH 04/27] WIP, adjust wrapper layout and memo condition --- src/components/SelectionList/ChatListItem.tsx | 1 + src/pages/home/report/PureReportActionItem.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index 8c1a68a8dfc9..d3ca4fc852ca 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -72,6 +72,7 @@ function ChatListItem({ }); const pressableStyle = [ styles.selectionListPressableItemWrapper, + styles.p0, styles.textAlignLeft, styles.overflowHidden, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 8de1475c8c2b..47a544acaedf 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -1240,6 +1240,6 @@ export default memo(PureReportActionItem, (prevProps, nextProps) => { prevProps.reportAutomaticallyForwardedMessage === nextProps.reportAutomaticallyForwardedMessage && prevProps.contextValueOverride === nextProps.contextValueOverride && prevProps.attachmentContextValueOverride === nextProps.attachmentContextValueOverride && - prevProps.mentionReportContexValueOverride === nextProps.mentionReportContexValueOverride + prevProps.mentionReportContextValueOverride === nextProps.mentionReportContextValueOverride ); }); From 4e7018fa2fe58adf811268203e826c72dfe65460 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Wed, 18 Dec 2024 10:01:04 +0700 Subject: [PATCH 05/27] fill actorAccountID for search chatitemlist --- src/components/SelectionList/ChatListItem.tsx | 3 --- src/pages/home/report/ReportActionItemSingle.tsx | 6 ++---- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index d3ca4fc852ca..5828013b3dc7 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -86,8 +86,6 @@ function ChatListItem({ [from.accountID]: from, } - const [reportOnyx, reportResult] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportActionItem.reportID}`, {allowStaleData: true}); - return ( ({ onSelectRow(item)} - // report={{reportID : reportActionItem.reportID} as OnyxTypes.Report} report={undefined} reportActions={[]} parentReportAction={undefined} diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 1b44a6ee3033..5e908c83477a 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -95,14 +95,12 @@ function ReportActionItemSingle({ const delegatePersonalDetails = personalDetails?.[action?.delegateAccountID ?? '']; const ownerAccountID = iouReport?.ownerAccountID ?? action?.childOwnerAccountID; const isReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW; - const actorAccountID = ReportUtils.getReportActionActorAccountID(action, iouReport, report); + // fallback to action?.accountID to handle search result chat item + const actorAccountID = ReportUtils.getReportActionActorAccountID(action, iouReport, report) ?? action?.accountID; const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID); const {avatar, login} = personalDetails?.[actorAccountID ?? -1] ?? {}; - console.log("[wildebug] ~ file: ReportActionItemSingle.tsx:103 ~ actorAccountID:", actorAccountID) - console.log("[wildebug] ~ file: ReportActionItemSingle.tsx:103 ~ personalDetails:", personalDetails) - console.log("[wildebug] ~ file: ReportActionItemSingle.tsx:103 ~ avatar:", avatar) const pendingFields = personalDetails && 'pendingFields' in personalDetails ? personalDetails.pendingFields : undefined; const status = personalDetails && 'status' in personalDetails ? personalDetails.status : undefined; const fallbackIcon = personalDetails && 'fallbackIcon' in personalDetails && personalDetails.fallbackIcon !== null ? personalDetails.fallbackIcon : undefined; From 2e96dbe5e5f8ae910508d8a05d7fc0ffca3aba0b Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Wed, 18 Dec 2024 10:57:52 +0700 Subject: [PATCH 06/27] Lint and prettier --- src/components/Search/index.tsx | 1 - src/components/SelectionList/ChatListItem.tsx | 113 ++++-------------- src/libs/ReportUtils.ts | 2 +- .../home/report/PureReportActionItem.tsx | 50 ++++---- .../home/report/ReportActionItemSingle.tsx | 16 +-- 5 files changed, 56 insertions(+), 126 deletions(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index c08f925adfc7..4c08c477f29d 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -136,7 +136,6 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`); const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION); - console.log("[wildebug] ~ file: index.tsx:139 ~ Search ~ hash:", hash) const previousTransactions = usePrevious(transactions); const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS); const previousReportActions = usePrevious(reportActions); diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index 5828013b3dc7..fc9edbda823d 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -1,25 +1,13 @@ import React, {useMemo} from 'react'; -import {View} from 'react-native'; -import {AttachmentContext} from '@components/AttachmentContext'; -import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext'; -import MultipleAvatars from '@components/MultipleAvatars'; -import {ShowContextMenuContext} from '@components/ShowContextMenuContext'; -import TextWithTooltip from '@components/TextWithTooltip'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; -import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import PureReportActionItem from '@pages/home/report/PureReportActionItem'; -import ReportActionItemDate from '@pages/home/report/ReportActionItemDate'; -import ReportActionItemFragment from '@pages/home/report/ReportActionItemFragment'; import variables from '@styles/variables'; import CONST from '@src/CONST'; -import type * as OnyxTypes from '@src/types/onyx'; +import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults'; import BaseListItem from './BaseListItem'; import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types'; -import { SearchPersonalDetails, SearchReport } from '@src/types/onyx/SearchResults'; -import { useOnyx } from 'react-native-onyx'; -import ONYXKEYS from '@src/ONYXKEYS'; function ChatListItem({ item, @@ -35,17 +23,8 @@ function ChatListItem({ }: ChatListItemProps) { const reportActionItem = item as unknown as ReportActionListItemType; const from = reportActionItem.from; - const icons = [ - { - type: CONST.ICON_TYPE_AVATAR, - source: from.avatar, - name: reportActionItem.formattedFrom, - id: from.accountID, - }, - ]; const styles = useThemeStyles(); const theme = useTheme(); - const StyleUtils = useStyleUtils(); const attachmentContextValue = {type: CONST.ATTACHMENT_TYPE.SEARCH}; @@ -59,9 +38,6 @@ function ChatListItem({ isDisabled: true, }; - const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; - const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar; - const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? '-1'}), [item.reportID]); const animatedHighlightStyle = useAnimatedHighlightStyle({ @@ -84,15 +60,13 @@ function ChatListItem({ const personalDetails: Record = { [from.accountID]: from, - } + }; return ( ({ pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]} hoverStyle={item.isSelected && styles.activeComponentBG} > - {(hovered) => ( - onSelectRow(item)} - report={undefined} - reportActions={[]} - parentReportAction={undefined} - displayAsGroup={false} - isMostRecentIOUReportAction={false} - shouldDisplayNewMarker={false} - index={item.index ?? 0} - isFirstVisibleReportAction={false} - personalDetails={personalDetails} - contextValueOverride={contextValue} - attachmentContextValueOverride={attachmentContextValue} - mentionReportContextValueOverride={mentionReportContextValue} - /> - - // - // - // - // - // - // - // - // - // - // - // - // - // {reportActionItem.message.map((fragment, index) => ( - // - // ))} - // - // - // - // - // - )} + onSelectRow(item)} + report={undefined} + reportActions={[]} + parentReportAction={undefined} + displayAsGroup={false} + isMostRecentIOUReportAction={false} + shouldDisplayNewMarker={false} + index={item.index ?? 0} + isFirstVisibleReportAction={false} + personalDetails={personalDetails} + contextValueOverride={contextValue} + attachmentContextValueOverride={attachmentContextValue} + mentionReportContextValueOverride={mentionReportContextValue} + shouldDisplayContextMenu={false} + /> ); } diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index bcc9afca76d2..d2ec8fb3ac62 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -54,7 +54,7 @@ import type {Status} from '@src/types/onyx/PersonalDetails'; import type {ConnectionName} from '@src/types/onyx/Policy'; import type {NotificationPreference, Participants, PendingChatMember, Participant as ReportParticipant} from '@src/types/onyx/Report'; import type {Message, OldDotReportAction, ReportActions} from '@src/types/onyx/ReportAction'; -import type {SearchPolicy, SearchReport, SearchReportAction, SearchTransaction} from '@src/types/onyx/SearchResults'; +import type {SearchPolicy, SearchReport, SearchTransaction} from '@src/types/onyx/SearchResults'; import type {Comment, TransactionChanges, WaypointCollection} from '@src/types/onyx/Transaction'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type IconAsset from '@src/types/utils/IconAsset'; diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 47a544acaedf..fe2cdca0eebd 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -28,7 +28,8 @@ import ReportPreview from '@components/ReportActionItem/ReportPreview'; import TaskAction from '@components/ReportActionItem/TaskAction'; import TaskPreview from '@components/ReportActionItem/TaskPreview'; import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview'; -import {ShowContextMenuContext, ShowContextMenuContextProps} from '@components/ShowContextMenuContext'; +import {ShowContextMenuContext} from '@components/ShowContextMenuContext'; +import type {ShowContextMenuContextProps} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; import UnreadActionIndicator from '@components/UnreadActionIndicator'; import useLocalize from '@hooks/useLocalize'; @@ -66,6 +67,7 @@ import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {Errors} from '@src/types/onyx/OnyxCommon'; import type {JoinWorkspaceResolution} from '@src/types/onyx/OriginalMessage'; +import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import {RestrictedReadOnlyContextMenuActions} from './ContextMenu/ContextMenuActions'; import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu'; @@ -81,7 +83,6 @@ import ReportActionItemMessageEdit from './ReportActionItemMessageEdit'; import ReportActionItemSingle from './ReportActionItemSingle'; import ReportActionItemThread from './ReportActionItemThread'; import ReportAttachmentsContext from './ReportAttachmentsContext'; -import { SearchPersonalDetails, SearchReport } from '@src/types/onyx/SearchResults'; type PureReportActionItemProps = { /** Report for this action */ @@ -242,20 +243,22 @@ type PureReportActionItemProps = { /** A message related to a report action that has been automatically forwarded */ reportAutomaticallyForwardedMessage?: string; - /** The context value containing the report and action data, along with the show context menu props */ + /** The context value containing the report and action data, along with the show context menu props */ contextValueOverride?: ShowContextMenuContextProps & { report?: OnyxTypes.Report; action?: OnyxTypes.ReportAction; }; + /** The context value containing the report ID and attachment type */ attachmentContextValueOverride?: { reportID?: string; type: ValueOf; - } + }; + /** The context value containing the current report ID */ mentionReportContextValueOverride?: { currentReportID: string; - } + }; }; /** @@ -523,22 +526,27 @@ function PureReportActionItem({ [reportID, action, emojiReactions, toggleEmojiReaction], ); - const contextValue = contextValueOverride ? contextValueOverride : useMemo( - () => ({ - anchor: popoverAnchorRef.current, - report: { ...report, reportID: report?.reportID ?? '' }, - reportNameValuePairs, - action, - transactionThreadReport, - checkIfContextMenuActive: toggleContextMenuFromActiveReportAction, - isDisabled: false, - }), - [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs], - ); - - const attachmentContextValue = attachmentContextValueOverride ? attachmentContextValueOverride : useMemo(() => ({ reportID, type: CONST.ATTACHMENT_TYPE.REPORT }), [reportID]); - - const mentionReportContextValue = mentionReportContextValueOverride ? mentionReportContextValueOverride : useMemo(() => ({ currentReportID: report?.reportID ?? '-1' }), [report?.reportID]); + const contextValue = useMemo(() => { + return contextValueOverride + ? contextValueOverride + : { + anchor: popoverAnchorRef.current, + report: {...report, reportID: report?.reportID ?? ''}, + reportNameValuePairs, + action, + transactionThreadReport, + checkIfContextMenuActive: toggleContextMenuFromActiveReportAction, + isDisabled: false, + }; + }, [contextValueOverride, report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs]); + + const attachmentContextValue = useMemo(() => { + return attachmentContextValueOverride ? attachmentContextValueOverride : {reportID, type: CONST.ATTACHMENT_TYPE.REPORT}; + }, [attachmentContextValueOverride, reportID]); + + const mentionReportContextValue = useMemo(() => { + return mentionReportContextValueOverride ? mentionReportContextValueOverride : {currentReportID: report?.reportID ?? '-1'}; + }, [mentionReportContextValueOverride, report?.reportID]); const actionableItemButtons: ActionableItem[] = useMemo(() => { if (ReportActionsUtils.isActionableAddPaymentCard(action) && userBillingFundID === undefined && shouldRenderAddPaymentCard()) { diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 5e908c83477a..4cbb0947fcde 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -7,7 +7,6 @@ import Avatar from '@components/Avatar'; import {FallbackAvatar} from '@components/Icon/Expensicons'; import MultipleAvatars from '@components/MultipleAvatars'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import {usePersonalDetails} from '@components/OnyxProvider'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import SubscriptAvatar from '@components/SubscriptAvatar'; import Text from '@components/Text'; @@ -24,19 +23,16 @@ import Navigation from '@libs/Navigation/Navigation'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import {getReportActionMessage} from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; +import type {AvatarSource} from '@libs/UserUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Report, ReportAction} from '@src/types/onyx'; -import type {Icon, PendingAction, PendingFields} from '@src/types/onyx/OnyxCommon'; +import type {PersonalDetailsList, Report, ReportAction} from '@src/types/onyx'; +import type {Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; +import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import ReportActionItemDate from './ReportActionItemDate'; import ReportActionItemFragment from './ReportActionItemFragment'; -import type * as OnyxTypes from '@src/types/onyx'; -import { SearchPersonalDetails } from '@src/types/onyx/SearchResults'; -import { Status } from '@src/types/onyx/PersonalDetails'; -import { AvatarSource } from '@libs/UserUtils'; - type ReportActionItemSingleProps = Partial & { /** All the data of the action */ @@ -64,7 +60,7 @@ type ReportActionItemSingleProps = Partial & { isHovered?: boolean; /** Personal details list */ - personalDetails?: OnyxTypes.PersonalDetailsList | Record; + personalDetails?: PersonalDetailsList | Record; }; const showUserDetails = (accountID: string) => { @@ -257,7 +253,7 @@ function ReportActionItemSingle({ ); }; const hasEmojiStatus = !displayAllActors && status && 'emojiCode' in status && status?.emojiCode; - const statusClearAfter = status && 'clearAfter' in status ? (String(status?.clearAfter) ?? '') : ''; + const statusClearAfter = status && 'clearAfter' in status ? String(status?.clearAfter) ?? '' : ''; const formattedDate = DateUtils.getStatusUntilDate(statusClearAfter); const statusText = status && 'text' in status ? String(status?.text) ?? '' : ''; const statusTooltipText = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText; From 4f5207accd6c93bd2874257391e7fd6e41373dea Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Wed, 18 Dec 2024 13:58:15 +0700 Subject: [PATCH 07/27] fix lint --- src/pages/home/report/ReportActionItemSingle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 4cbb0947fcde..6906231d51f5 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -301,7 +301,7 @@ function ReportActionItemSingle({ {`${status?.emojiCode}`} + >{`${String(status?.emojiCode ?? '')}`} )} From 8d64fba217fbfcd9e0a45e6e9b39d68e3d6deee1 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Thu, 19 Dec 2024 08:32:26 +0700 Subject: [PATCH 08/27] resolve eslint error --- .../home/report/PureReportActionItem.tsx | 26 +++++++++---------- .../report/ReportActionItemContentCreated.tsx | 4 +-- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index fe2cdca0eebd..6ab93b304c7f 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -527,25 +527,25 @@ function PureReportActionItem({ ); const contextValue = useMemo(() => { - return contextValueOverride - ? contextValueOverride - : { - anchor: popoverAnchorRef.current, - report: {...report, reportID: report?.reportID ?? ''}, - reportNameValuePairs, - action, - transactionThreadReport, - checkIfContextMenuActive: toggleContextMenuFromActiveReportAction, - isDisabled: false, - }; + return ( + contextValueOverride ?? { + anchor: popoverAnchorRef.current, + report: {...report, reportID: report?.reportID ?? ''}, + reportNameValuePairs, + action, + transactionThreadReport, + checkIfContextMenuActive: toggleContextMenuFromActiveReportAction, + isDisabled: false, + } + ); }, [contextValueOverride, report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs]); const attachmentContextValue = useMemo(() => { - return attachmentContextValueOverride ? attachmentContextValueOverride : {reportID, type: CONST.ATTACHMENT_TYPE.REPORT}; + return attachmentContextValueOverride ?? {reportID, type: CONST.ATTACHMENT_TYPE.REPORT}; }, [attachmentContextValueOverride, reportID]); const mentionReportContextValue = useMemo(() => { - return mentionReportContextValueOverride ? mentionReportContextValueOverride : {currentReportID: report?.reportID ?? '-1'}; + return mentionReportContextValueOverride ?? {currentReportID: report?.reportID ?? '-1'}; }, [mentionReportContextValueOverride, report?.reportID]); const actionableItemButtons: ActionableItem[] = useMemo(() => { diff --git a/src/pages/home/report/ReportActionItemContentCreated.tsx b/src/pages/home/report/ReportActionItemContentCreated.tsx index 69e27701edd8..c4ea9c113cd6 100644 --- a/src/pages/home/report/ReportActionItemContentCreated.tsx +++ b/src/pages/home/report/ReportActionItemContentCreated.tsx @@ -30,8 +30,8 @@ import ReportActionItemSingle from './ReportActionItemSingle'; type ReportActionItemContentCreatedProps = { /** The context value containing the report and action data, along with the show context menu props */ contextValue: ShowContextMenuContextProps & { - report: OnyxTypes.Report; - action: OnyxTypes.ReportAction; + report?: OnyxTypes.Report; + action?: OnyxTypes.ReportAction; }; /** Report action belonging to the report's parent */ From ee5de13cb53f5a43b4e6d076e136aaa19ede2dd7 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Fri, 20 Dec 2024 16:23:21 +0700 Subject: [PATCH 09/27] revert contextOverride props --- .../home/report/PureReportActionItem.tsx | 66 +++++-------------- .../report/ReportActionItemContentCreated.tsx | 6 +- 2 files changed, 21 insertions(+), 51 deletions(-) diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 6ab93b304c7f..991fc0fc6b73 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -29,7 +29,6 @@ import TaskAction from '@components/ReportActionItem/TaskAction'; import TaskPreview from '@components/ReportActionItem/TaskPreview'; import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview'; import {ShowContextMenuContext} from '@components/ShowContextMenuContext'; -import type {ShowContextMenuContextProps} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; import UnreadActionIndicator from '@components/UnreadActionIndicator'; import useLocalize from '@hooks/useLocalize'; @@ -67,7 +66,6 @@ import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {Errors} from '@src/types/onyx/OnyxCommon'; import type {JoinWorkspaceResolution} from '@src/types/onyx/OriginalMessage'; -import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import {RestrictedReadOnlyContextMenuActions} from './ContextMenu/ContextMenuActions'; import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu'; @@ -166,7 +164,7 @@ type PureReportActionItemProps = { parentReport?: OnyxTypes.Report; /** Personal details list */ - personalDetails?: OnyxTypes.PersonalDetailsList | Record; + personalDetails?: OnyxTypes.PersonalDetailsList; /** Whether or not the user is blocked from concierge */ blockedFromConcierge?: OnyxTypes.BlockedFromConcierge; @@ -242,23 +240,6 @@ type PureReportActionItemProps = { /** A message related to a report action that has been automatically forwarded */ reportAutomaticallyForwardedMessage?: string; - - /** The context value containing the report and action data, along with the show context menu props */ - contextValueOverride?: ShowContextMenuContextProps & { - report?: OnyxTypes.Report; - action?: OnyxTypes.ReportAction; - }; - - /** The context value containing the report ID and attachment type */ - attachmentContextValueOverride?: { - reportID?: string; - type: ValueOf; - }; - - /** The context value containing the current report ID */ - mentionReportContextValueOverride?: { - currentReportID: string; - }; }; /** @@ -312,13 +293,10 @@ function PureReportActionItem({ dismissTrackExpenseActionableWhisper = () => {}, userBillingFundID, reportAutomaticallyForwardedMessage, - contextValueOverride, - attachmentContextValueOverride, - mentionReportContextValueOverride, }: PureReportActionItemProps) { const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - const reportID = report?.reportID ?? ''; + const reportID = report?.reportID ?? action?.reportID ?? ''; const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -526,27 +504,22 @@ function PureReportActionItem({ [reportID, action, emojiReactions, toggleEmojiReaction], ); - const contextValue = useMemo(() => { - return ( - contextValueOverride ?? { - anchor: popoverAnchorRef.current, - report: {...report, reportID: report?.reportID ?? ''}, - reportNameValuePairs, - action, - transactionThreadReport, - checkIfContextMenuActive: toggleContextMenuFromActiveReportAction, - isDisabled: false, - } - ); - }, [contextValueOverride, report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs]); + const contextValue = useMemo( + () => ({ + anchor: popoverAnchorRef.current, + report: {...report, reportID: report?.reportID ?? ''}, + reportNameValuePairs, + action, + transactionThreadReport, + checkIfContextMenuActive: toggleContextMenuFromActiveReportAction, + isDisabled: false, + }), + [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs], + ); - const attachmentContextValue = useMemo(() => { - return attachmentContextValueOverride ?? {reportID, type: CONST.ATTACHMENT_TYPE.REPORT}; - }, [attachmentContextValueOverride, reportID]); + const attachmentContextValue = useMemo(() => ({reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [reportID]); - const mentionReportContextValue = useMemo(() => { - return mentionReportContextValueOverride ?? {currentReportID: report?.reportID ?? '-1'}; - }, [mentionReportContextValueOverride, report?.reportID]); + const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? '-1'}), [report?.reportID]); const actionableItemButtons: ActionableItem[] = useMemo(() => { if (ReportActionsUtils.isActionableAddPaymentCard(action) && userBillingFundID === undefined && shouldRenderAddPaymentCard()) { @@ -1245,9 +1218,6 @@ export default memo(PureReportActionItem, (prevProps, nextProps) => { prevProps.reimbursementDeQueuedActionMessage === nextProps.reimbursementDeQueuedActionMessage && prevProps.modifiedExpenseMessage === nextProps.modifiedExpenseMessage && prevProps.userBillingFundID === nextProps.userBillingFundID && - prevProps.reportAutomaticallyForwardedMessage === nextProps.reportAutomaticallyForwardedMessage && - prevProps.contextValueOverride === nextProps.contextValueOverride && - prevProps.attachmentContextValueOverride === nextProps.attachmentContextValueOverride && - prevProps.mentionReportContextValueOverride === nextProps.mentionReportContextValueOverride + prevProps.reportAutomaticallyForwardedMessage === nextProps.reportAutomaticallyForwardedMessage ); -}); +}); \ No newline at end of file diff --git a/src/pages/home/report/ReportActionItemContentCreated.tsx b/src/pages/home/report/ReportActionItemContentCreated.tsx index c4ea9c113cd6..86af7e960e23 100644 --- a/src/pages/home/report/ReportActionItemContentCreated.tsx +++ b/src/pages/home/report/ReportActionItemContentCreated.tsx @@ -30,8 +30,8 @@ import ReportActionItemSingle from './ReportActionItemSingle'; type ReportActionItemContentCreatedProps = { /** The context value containing the report and action data, along with the show context menu props */ contextValue: ShowContextMenuContextProps & { - report?: OnyxTypes.Report; - action?: OnyxTypes.ReportAction; + report: OnyxTypes.Report; + action: OnyxTypes.ReportAction; }; /** Report action belonging to the report's parent */ @@ -203,4 +203,4 @@ export default memo( prevProps.transactionID === nextProps.transactionID && prevProps.draftMessage === nextProps.draftMessage && prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine, -); +); \ No newline at end of file From 45d68c5dfacee699baac109f45ba181593474e38 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Fri, 20 Dec 2024 16:30:08 +0700 Subject: [PATCH 10/27] remove unnecessary code --- src/components/SelectionList/ChatListItem.tsx | 3 --- src/pages/home/report/PureReportActionItem.tsx | 2 +- src/pages/home/report/ReportActionItemContentCreated.tsx | 2 +- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index fc9edbda823d..545b12b1346d 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -95,9 +95,6 @@ function ChatListItem({ index={item.index ?? 0} isFirstVisibleReportAction={false} personalDetails={personalDetails} - contextValueOverride={contextValue} - attachmentContextValueOverride={attachmentContextValue} - mentionReportContextValueOverride={mentionReportContextValue} shouldDisplayContextMenu={false} /> diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 991fc0fc6b73..10f4d2becc67 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -1220,4 +1220,4 @@ export default memo(PureReportActionItem, (prevProps, nextProps) => { prevProps.userBillingFundID === nextProps.userBillingFundID && prevProps.reportAutomaticallyForwardedMessage === nextProps.reportAutomaticallyForwardedMessage ); -}); \ No newline at end of file +}); diff --git a/src/pages/home/report/ReportActionItemContentCreated.tsx b/src/pages/home/report/ReportActionItemContentCreated.tsx index 86af7e960e23..69e27701edd8 100644 --- a/src/pages/home/report/ReportActionItemContentCreated.tsx +++ b/src/pages/home/report/ReportActionItemContentCreated.tsx @@ -203,4 +203,4 @@ export default memo( prevProps.transactionID === nextProps.transactionID && prevProps.draftMessage === nextProps.draftMessage && prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine, -); \ No newline at end of file +); From 5046a484f71cd47e8012b2fbc4c565eed29f0809 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Fri, 20 Dec 2024 16:39:10 +0700 Subject: [PATCH 11/27] add attachmentContextValueType --- src/components/SelectionList/ChatListItem.tsx | 2 -- src/pages/home/report/PureReportActionItem.tsx | 6 +++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index 545b12b1346d..2fb3cc9141c2 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -38,8 +38,6 @@ function ChatListItem({ isDisabled: true, }; - const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? '-1'}), [item.reportID]); - const animatedHighlightStyle = useAnimatedHighlightStyle({ borderRadius: variables.componentBorderRadius, shouldHighlight: item?.shouldAnimateInHighlight ?? false, diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 10f4d2becc67..fda2f7480e77 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -240,6 +240,9 @@ type PureReportActionItemProps = { /** A message related to a report action that has been automatically forwarded */ reportAutomaticallyForwardedMessage?: string; + + /** Type of attachment context value */ + attachmentContextValueType?: ValueOf; }; /** @@ -293,6 +296,7 @@ function PureReportActionItem({ dismissTrackExpenseActionableWhisper = () => {}, userBillingFundID, reportAutomaticallyForwardedMessage, + attachmentContextValueType = CONST.ATTACHMENT_TYPE.REPORT, }: PureReportActionItemProps) { const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); @@ -517,7 +521,7 @@ function PureReportActionItem({ [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs], ); - const attachmentContextValue = useMemo(() => ({reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [reportID]); + const attachmentContextValue = useMemo(() => ({reportID, type: attachmentContextValueType}), [reportID]); const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? '-1'}), [report?.reportID]); From c4145e6daa16e98adf2fc48fe6e9a9de8483ca21 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Sat, 21 Dec 2024 09:03:32 +0700 Subject: [PATCH 12/27] add missing dependency --- src/pages/home/report/PureReportActionItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index fda2f7480e77..f543c186d470 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -521,7 +521,7 @@ function PureReportActionItem({ [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs], ); - const attachmentContextValue = useMemo(() => ({reportID, type: attachmentContextValueType}), [reportID]); + const attachmentContextValue = useMemo(() => ({reportID, type: attachmentContextValueType}), [reportID, attachmentContextValueType]); const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? '-1'}), [report?.reportID]); From 35f99bef9b1545e833ba316d70fb94e3fa35543e Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Mon, 23 Dec 2024 13:59:03 +0700 Subject: [PATCH 13/27] remove unused import, fix lint --- src/components/SelectionList/ChatListItem.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index 2fb3cc9141c2..164b315b07a1 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -1,4 +1,4 @@ -import React, {useMemo} from 'react'; +import React from 'react'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -26,18 +26,6 @@ function ChatListItem({ const styles = useThemeStyles(); const theme = useTheme(); - const attachmentContextValue = {type: CONST.ATTACHMENT_TYPE.SEARCH}; - - const contextValue = { - anchor: null, - report: undefined, - reportNameValuePairs: undefined, - action: undefined, - transactionThreadReport: undefined, - checkIfContextMenuActive: () => {}, - isDisabled: true, - }; - const animatedHighlightStyle = useAnimatedHighlightStyle({ borderRadius: variables.componentBorderRadius, shouldHighlight: item?.shouldAnimateInHighlight ?? false, @@ -94,6 +82,7 @@ function ChatListItem({ isFirstVisibleReportAction={false} personalDetails={personalDetails} shouldDisplayContextMenu={false} + attachmentContextValueType={CONST.ATTACHMENT_TYPE.SEARCH} /> ); From f55cff99e35c7c541a225d85ac8544151cdbec26 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Tue, 24 Dec 2024 14:59:14 +0700 Subject: [PATCH 14/27] Remove unnecessary code --- src/pages/home/report/ReportActionItemSingle.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 6906231d51f5..455342b4ccfb 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -91,8 +91,7 @@ function ReportActionItemSingle({ const delegatePersonalDetails = personalDetails?.[action?.delegateAccountID ?? '']; const ownerAccountID = iouReport?.ownerAccountID ?? action?.childOwnerAccountID; const isReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW; - // fallback to action?.accountID to handle search result chat item - const actorAccountID = ReportUtils.getReportActionActorAccountID(action, iouReport, report) ?? action?.accountID; + const actorAccountID = ReportUtils.getReportActionActorAccountID(action, iouReport, report); const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID); From 45b406fc794e4cbea87cdeff4ab7766e7da61606 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Fri, 27 Dec 2024 01:02:20 +0700 Subject: [PATCH 15/27] Mock ConfirmedRoute to get rid map error --- tests/ui/ResizeScreenTests.tsx | 1 + tests/unit/CalendarPickerTest.tsx | 2 ++ tests/unit/GoogleTagManagerTest.tsx | 1 + tests/unit/Search/handleActionButtonPressTest.ts | 2 ++ 4 files changed, 6 insertions(+) diff --git a/tests/ui/ResizeScreenTests.tsx b/tests/ui/ResizeScreenTests.tsx index 5bd86ad152b2..275680e3f345 100644 --- a/tests/ui/ResizeScreenTests.tsx +++ b/tests/ui/ResizeScreenTests.tsx @@ -21,6 +21,7 @@ jest.mock('@libs/getIsNarrowLayout', () => jest.fn()); jest.mock('@pages/settings/InitialSettingsPage'); jest.mock('@pages/settings/Profile/ProfilePage'); jest.mock('@libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar'); +jest.mock('@src/components/ConfirmedRoute.tsx'); const DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE: ResponsiveLayoutResult = { shouldUseNarrowLayout: true, diff --git a/tests/unit/CalendarPickerTest.tsx b/tests/unit/CalendarPickerTest.tsx index 5cf02409ac23..65e9216f3d8f 100644 --- a/tests/unit/CalendarPickerTest.tsx +++ b/tests/unit/CalendarPickerTest.tsx @@ -36,6 +36,8 @@ jest.mock('../../src/hooks/useLocalize', () => })), ); +jest.mock('@src/components/ConfirmedRoute.tsx'); + describe('CalendarPicker', () => { test('renders calendar component', () => { render(); diff --git a/tests/unit/GoogleTagManagerTest.tsx b/tests/unit/GoogleTagManagerTest.tsx index dcb6bdea0eec..7076775644ff 100644 --- a/tests/unit/GoogleTagManagerTest.tsx +++ b/tests/unit/GoogleTagManagerTest.tsx @@ -14,6 +14,7 @@ jest.mock('@libs/GoogleTagManager'); // Mock the Overlay since it doesn't work in tests jest.mock('@libs/Navigation/AppNavigator/Navigators/Overlay'); +jest.mock('@src/components/ConfirmedRoute.tsx'); describe('GoogleTagManagerTest', () => { const accountID = 123456; diff --git a/tests/unit/Search/handleActionButtonPressTest.ts b/tests/unit/Search/handleActionButtonPressTest.ts index 69af0e83849a..5082913a3889 100644 --- a/tests/unit/Search/handleActionButtonPressTest.ts +++ b/tests/unit/Search/handleActionButtonPressTest.ts @@ -2,6 +2,8 @@ import type {ReportListItemType} from '@components/SelectionList/types'; import {handleActionButtonPress} from '@libs/actions/Search'; +jest.mock('@src/components/ConfirmedRoute.tsx'); + const mockReportItemWithHold = { shouldAnimateInHighlight: false, accountID: 1206, From 299992ef946bdc2e0cf830fdf181c648802317cc Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Fri, 27 Dec 2024 07:57:31 +0700 Subject: [PATCH 16/27] mock ConfirmedRoute to test --- tests/ui/WorkspaceSwitcherTest.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/ui/WorkspaceSwitcherTest.tsx b/tests/ui/WorkspaceSwitcherTest.tsx index 614ed4e5ab70..dde43d141cc9 100644 --- a/tests/ui/WorkspaceSwitcherTest.tsx +++ b/tests/ui/WorkspaceSwitcherTest.tsx @@ -26,6 +26,9 @@ jest.mock('@react-navigation/native', () => { triggerTransitionEnd: jest.fn(), }; }); + +jest.mock('@src/components/ConfirmedRoute.tsx'); + TestHelper.setupApp(); async function signInAndGetApp(): Promise { From 8d74ba238a609b70e4f2063cd328bba12f5c5e09 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Fri, 27 Dec 2024 16:35:05 +0700 Subject: [PATCH 17/27] Resolve issue with unit test --- src/libs/ReportUtils.ts | 2 +- .../home/report/ReportActionItemSingle.tsx | 9 +++++--- tests/unit/ReportActionItemSingleTest.ts | 10 ++------- tests/utils/LHNTestUtils.tsx | 21 +++++++++++++++++-- 4 files changed, 28 insertions(+), 14 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index e9c017db43ce..4e90b55cffca 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -860,7 +860,7 @@ const unavailableTranslation = Localize.translateLocal('workspace.common.unavail */ function getPolicyName(report: OnyxInputOrEntry, returnEmptyIfNotFound = false, policy?: OnyxInputOrEntry): string { const noPolicyFound = returnEmptyIfNotFound ? '' : unavailableTranslation; - if (isEmptyObject(report) || (isEmptyObject(allPolicies) && !report?.policyName)) { + if (isEmptyObject(report) || (isEmptyObject(allPolicies) && !report?.policyName && !policy)) { return noPolicyFound; } diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 455342b4ccfb..dcf52f605a87 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -27,7 +27,7 @@ import type {AvatarSource} from '@libs/UserUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {PersonalDetailsList, Report, ReportAction} from '@src/types/onyx'; +import type {PersonalDetailsList, Policy, Report, ReportAction} from '@src/types/onyx'; import type {Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; @@ -61,6 +61,9 @@ type ReportActionItemSingleProps = Partial & { /** Personal details list */ personalDetails?: PersonalDetailsList | Record; + + /** Current connected policy */ + policy?: OnyxEntry; }; const showUserDetails = (accountID: string) => { @@ -82,12 +85,12 @@ function ReportActionItemSingle({ iouReport, isHovered = false, personalDetails, + policy, }: ReportActionItemSingleProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const policy = usePolicy(report?.policyID); const delegatePersonalDetails = personalDetails?.[action?.delegateAccountID ?? '']; const ownerAccountID = iouReport?.ownerAccountID ?? action?.childOwnerAccountID; const isReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW; @@ -153,7 +156,7 @@ function ReportActionItemSingle({ } else if (!isWorkspaceActor) { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const avatarIconIndex = report?.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1; - const reportIcons = ReportUtils.getIcons(report, {}); + const reportIcons = ReportUtils.getIcons(report, personalDetails, null, undefined, undefined, policy); secondaryAvatar = reportIcons.at(avatarIconIndex) ?? {name: '', source: '', type: CONST.ICON_TYPE_AVATAR}; } else if (ReportUtils.isInvoiceReport(iouReport)) { diff --git a/tests/unit/ReportActionItemSingleTest.ts b/tests/unit/ReportActionItemSingleTest.ts index e0bf06be1609..b283aeb10ea1 100644 --- a/tests/unit/ReportActionItemSingleTest.ts +++ b/tests/unit/ReportActionItemSingleTest.ts @@ -54,16 +54,10 @@ describe('ReportActionItemSingle', () => { }; function setup() { - LHNTestUtils.getDefaultRenderedReportActionItemSingle(shouldShowSubscriptAvatar, fakeReport, fakeReportAction); + LHNTestUtils.getDefaultRenderedReportActionItemSingle(shouldShowSubscriptAvatar, fakeReport, fakeReportAction, fakePersonalDetails, fakePolicy); const policyCollectionDataSet = toCollectionDataSet(ONYXKEYS.COLLECTION.POLICY, [fakePolicy], (item) => item.id); - return waitForBatchedUpdates().then(() => - Onyx.multiSet({ - [ONYXKEYS.PERSONAL_DETAILS_LIST]: fakePersonalDetails, - [ONYXKEYS.IS_LOADING_REPORT_DATA]: false, - ...policyCollectionDataSet, - }), - ); + return waitForBatchedUpdates().then(() => Onyx.set(ONYXKEYS.IS_LOADING_REPORT_DATA, false)); } it('renders secondary Avatar properly', async () => { diff --git a/tests/utils/LHNTestUtils.tsx b/tests/utils/LHNTestUtils.tsx index 1a3fc3d07f28..af143c1942f6 100644 --- a/tests/utils/LHNTestUtils.tsx +++ b/tests/utils/LHNTestUtils.tsx @@ -16,6 +16,7 @@ import SidebarLinksData from '@pages/home/sidebar/SidebarLinksData'; import CONST from '@src/CONST'; import type {PersonalDetailsList, Policy, Report, ReportAction, TransactionViolation, ViolationName} from '@src/types/onyx'; import type ReportActionName from '@src/types/onyx/ReportActionName'; +import {SearchPersonalDetails} from '@src/types/onyx/SearchResults'; import waitForBatchedUpdatesWithAct from './waitForBatchedUpdatesWithAct'; type MockedReportActionItemSingleProps = { @@ -27,6 +28,12 @@ type MockedReportActionItemSingleProps = { /** All the data of the action */ reportAction: ReportAction; + + /** Personal details list */ + personalDetails?: PersonalDetailsList | Record; + + /** Current connected policy */ + policy?: Policy; }; type MockedSidebarLinksProps = { @@ -331,7 +338,7 @@ function internalRender(component: ReactElement) { } } -function MockedReportActionItemSingle({shouldShowSubscriptAvatar = true, report, reportAction}: MockedReportActionItemSingleProps) { +function MockedReportActionItemSingle({shouldShowSubscriptAvatar = true, report, reportAction, personalDetails, policy}: MockedReportActionItemSingleProps) { return ( ); } -function getDefaultRenderedReportActionItemSingle(shouldShowSubscriptAvatar = true, report?: Report, reportAction?: ReportAction) { +function getDefaultRenderedReportActionItemSingle( + shouldShowSubscriptAvatar = true, + report?: Report, + reportAction?: ReportAction, + personalDetails?: PersonalDetailsList | Record, + policy?: Policy, +) { const currentReport = report ?? getFakeReport(); const currentReportAction = reportAction ?? getFakeAdvancedReportAction(); @@ -356,6 +371,8 @@ function getDefaultRenderedReportActionItemSingle(shouldShowSubscriptAvatar = tr shouldShowSubscriptAvatar={shouldShowSubscriptAvatar} report={currentReport} reportAction={currentReportAction} + personalDetails={personalDetails} + policy={policy} />, ); } From 340bee531c9cd69c5815ffc6e5f9e3a17bfc2005 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Fri, 27 Dec 2024 16:37:47 +0700 Subject: [PATCH 18/27] remove unnecessary code --- src/pages/home/report/ReportActionItemSingle.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index dcf52f605a87..ba47b770e54c 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -259,7 +259,6 @@ function ReportActionItemSingle({ const formattedDate = DateUtils.getStatusUntilDate(statusClearAfter); const statusText = status && 'text' in status ? String(status?.text) ?? '' : ''; const statusTooltipText = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText; - // const pendingFieldsAvatar = pendingFields && 'avatar' in pendingFields ? pendingFields?.avatar ?? undefined : undefined; return ( Date: Fri, 27 Dec 2024 16:55:56 +0700 Subject: [PATCH 19/27] resolve jest perf test error --- tests/perf-test/SearchRouter.perf-test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/perf-test/SearchRouter.perf-test.tsx b/tests/perf-test/SearchRouter.perf-test.tsx index 0784813127be..1d0f757730d2 100644 --- a/tests/perf-test/SearchRouter.perf-test.tsx +++ b/tests/perf-test/SearchRouter.perf-test.tsx @@ -86,6 +86,7 @@ jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType return WithNavigationFocus; }); +jest.mock('@src/components/ConfirmedRoute.tsx'); const getMockedReports = (length = 100) => createCollection( From 760ca696cb3769b56d9ebe88318be8fa4c4ba9ef Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Sat, 28 Dec 2024 08:54:29 +0700 Subject: [PATCH 20/27] fix lint error --- src/pages/home/report/ReportActionItemSingle.tsx | 8 +++++--- tests/unit/ReportActionItemSingleTest.ts | 3 --- tests/utils/LHNTestUtils.tsx | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index ba47b770e54c..d791d977e9b2 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -91,6 +91,8 @@ function ReportActionItemSingle({ const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); + const onyxPolicy = usePolicy(report?.policyID); + const reportPolicy = policy ?? onyxPolicy; const delegatePersonalDetails = personalDetails?.[action?.delegateAccountID ?? '']; const ownerAccountID = iouReport?.ownerAccountID ?? action?.childOwnerAccountID; const isReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW; @@ -115,9 +117,9 @@ function ReportActionItemSingle({ let avatarId: number | string | undefined = actorAccountID; if (isWorkspaceActor) { - displayName = ReportUtils.getPolicyName(report, undefined, policy); + displayName = ReportUtils.getPolicyName(report, undefined, reportPolicy); actorHint = displayName; - avatarSource = ReportUtils.getWorkspaceIcon(report, policy).source; + avatarSource = ReportUtils.getWorkspaceIcon(report, reportPolicy).source; avatarId = report?.policyID; } else if (action?.delegateAccountID && personalDetails?.[action?.delegateAccountID]) { displayName = delegatePersonalDetails?.displayName ?? ''; @@ -156,7 +158,7 @@ function ReportActionItemSingle({ } else if (!isWorkspaceActor) { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const avatarIconIndex = report?.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1; - const reportIcons = ReportUtils.getIcons(report, personalDetails, null, undefined, undefined, policy); + const reportIcons = ReportUtils.getIcons(report, personalDetails, null, undefined, undefined, reportPolicy); secondaryAvatar = reportIcons.at(avatarIconIndex) ?? {name: '', source: '', type: CONST.ICON_TYPE_AVATAR}; } else if (ReportUtils.isInvoiceReport(iouReport)) { diff --git a/tests/unit/ReportActionItemSingleTest.ts b/tests/unit/ReportActionItemSingleTest.ts index b283aeb10ea1..925e548389d5 100644 --- a/tests/unit/ReportActionItemSingleTest.ts +++ b/tests/unit/ReportActionItemSingleTest.ts @@ -1,7 +1,6 @@ import {screen, waitFor} from '@testing-library/react-native'; import Onyx from 'react-native-onyx'; import type {PersonalDetailsList} from '@src/types/onyx'; -import {toCollectionDataSet} from '@src/types/utils/CollectionDataSet'; import * as LHNTestUtils from '../utils/LHNTestUtils'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; @@ -55,8 +54,6 @@ describe('ReportActionItemSingle', () => { function setup() { LHNTestUtils.getDefaultRenderedReportActionItemSingle(shouldShowSubscriptAvatar, fakeReport, fakeReportAction, fakePersonalDetails, fakePolicy); - const policyCollectionDataSet = toCollectionDataSet(ONYXKEYS.COLLECTION.POLICY, [fakePolicy], (item) => item.id); - return waitForBatchedUpdates().then(() => Onyx.set(ONYXKEYS.IS_LOADING_REPORT_DATA, false)); } diff --git a/tests/utils/LHNTestUtils.tsx b/tests/utils/LHNTestUtils.tsx index af143c1942f6..2b89392cd424 100644 --- a/tests/utils/LHNTestUtils.tsx +++ b/tests/utils/LHNTestUtils.tsx @@ -16,7 +16,7 @@ import SidebarLinksData from '@pages/home/sidebar/SidebarLinksData'; import CONST from '@src/CONST'; import type {PersonalDetailsList, Policy, Report, ReportAction, TransactionViolation, ViolationName} from '@src/types/onyx'; import type ReportActionName from '@src/types/onyx/ReportActionName'; -import {SearchPersonalDetails} from '@src/types/onyx/SearchResults'; +import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults'; import waitForBatchedUpdatesWithAct from './waitForBatchedUpdatesWithAct'; type MockedReportActionItemSingleProps = { From 2705f78fa9bf73127cfd43808af62d1c215c34e3 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Sat, 28 Dec 2024 09:16:41 +0700 Subject: [PATCH 21/27] mock ConfirmedRoute on selectionlist perf test --- tests/perf-test/SelectionList.perf-test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/perf-test/SelectionList.perf-test.tsx b/tests/perf-test/SelectionList.perf-test.tsx index fcd714129536..759ab1a8da22 100644 --- a/tests/perf-test/SelectionList.perf-test.tsx +++ b/tests/perf-test/SelectionList.perf-test.tsx @@ -84,6 +84,8 @@ jest.mock('../../src/hooks/useScreenWrapperTransitionStatus', () => ({ })), })); +jest.mock('@src/components/ConfirmedRoute.tsx'); + function SelectionListWrapper({canSelectMultiple}: SelectionListWrapperProps) { const [selectedIds, setSelectedIds] = useState([]); From 135c67797000070997e6f33eb7c7aea1e993d1e1 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Sat, 28 Dec 2024 11:00:23 +0700 Subject: [PATCH 22/27] fix issue image not found in desktop --- src/pages/home/report/PureReportActionItem.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index f543c186d470..7d6c54bd2e8c 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -521,9 +521,14 @@ function PureReportActionItem({ [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs], ); - const attachmentContextValue = useMemo(() => ({reportID, type: attachmentContextValueType}), [reportID, attachmentContextValueType]); + const attachmentContextValue = useMemo(() => { + if (attachmentContextValueType === CONST.ATTACHMENT_TYPE.SEARCH) { + return {type: attachmentContextValueType}; + } + return {reportID, type: attachmentContextValueType}; + }, [reportID, attachmentContextValueType]); - const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? '-1'}), [report?.reportID]); + const mentionReportContextValue = useMemo(() => ({currentReportID: reportID ?? '-1'}), [reportID]); const actionableItemButtons: ActionableItem[] = useMemo(() => { if (ReportActionsUtils.isActionableAddPaymentCard(action) && userBillingFundID === undefined && shouldRenderAddPaymentCard()) { From 6f59803401c3c9ce8076fce88002941631bb7327 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Sat, 28 Dec 2024 11:22:05 +0700 Subject: [PATCH 23/27] revert unnecessary change --- src/components/ShowContextMenuContext.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ShowContextMenuContext.ts b/src/components/ShowContextMenuContext.ts index 04c437165842..6fefa987fac3 100644 --- a/src/components/ShowContextMenuContext.ts +++ b/src/components/ShowContextMenuContext.ts @@ -10,10 +10,10 @@ import CONST from '@src/CONST'; import type {Report, ReportAction, ReportNameValuePairs} from '@src/types/onyx'; type ShowContextMenuContextProps = { - anchor?: ContextMenuAnchor; - report?: OnyxEntry; - reportNameValuePairs?: OnyxEntry; - action?: OnyxEntry; + anchor: ContextMenuAnchor; + report: OnyxEntry; + reportNameValuePairs: OnyxEntry; + action: OnyxEntry; transactionThreadReport?: OnyxEntry; checkIfContextMenuActive: () => void; isDisabled: boolean; From 0a1044a117021fbca8ceccc3ab9aa01ea7fa07e1 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Tue, 31 Dec 2024 10:36:24 +0700 Subject: [PATCH 24/27] extract policy object to param --- src/components/SelectionList/ChatListItem.tsx | 1 + src/pages/home/report/PureReportActionItem.tsx | 5 +++++ src/pages/home/report/ReportActionItem.tsx | 3 +++ .../home/report/ReportActionItemContentCreated.tsx | 2 ++ src/pages/home/report/ReportActionItemSingle.tsx | 11 ++++------- tests/ui/WorkspaceCategoriesTest.tsx | 2 ++ tests/unit/Search/SearchUIUtilsTest.ts | 2 ++ 7 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index 164b315b07a1..df520d7501f8 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -83,6 +83,7 @@ function ChatListItem({ personalDetails={personalDetails} shouldDisplayContextMenu={false} attachmentContextValueType={CONST.ATTACHMENT_TYPE.SEARCH} + policy={undefined} /> ); diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index b304fb6abcc0..5d21bfd6d71c 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -244,6 +244,9 @@ type PureReportActionItemProps = { /** Type of attachment context value */ attachmentContextValueType?: ValueOf; + + /** Current connected policy */ + policy: OnyxEntry; }; /** @@ -298,6 +301,7 @@ function PureReportActionItem({ userBillingFundID, reportAutomaticallyForwardedMessage, attachmentContextValueType = CONST.ATTACHMENT_TYPE.REPORT, + policy, }: PureReportActionItemProps) { const actionSheetAwareScrollViewContext = useContext(ActionSheetAwareScrollView.ActionSheetAwareScrollViewContext); const {translate} = useLocalize(); @@ -1045,6 +1049,7 @@ function PureReportActionItem({ !ReportActionsUtils.isPendingRemove(action) } personalDetails={personalDetails} + policy={policy} > {content} diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 1887bf9d348a..bd33ee1eb6d6 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -2,6 +2,7 @@ import React, {useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import {useBlockedFromConcierge, usePersonalDetails} from '@components/OnyxProvider'; +import usePolicy from '@hooks/usePolicy'; import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -43,6 +44,7 @@ function ReportActionItem({action, report, ...props}: PureReportActionItemProps) const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID); const linkedReport = ReportUtils.isChatThread(report) ? parentReport : report; const missingPaymentMethod = ReportUtils.getIndicatedMissingPaymentMethod(userWallet, linkedReport?.reportID ?? '-1', action); + const policy = usePolicy(report?.policyID); return ( , reportID)} + policy={policy} /> ); } diff --git a/src/pages/home/report/ReportActionItemContentCreated.tsx b/src/pages/home/report/ReportActionItemContentCreated.tsx index 69e27701edd8..0e4a37b59359 100644 --- a/src/pages/home/report/ReportActionItemContentCreated.tsx +++ b/src/pages/home/report/ReportActionItemContentCreated.tsx @@ -96,6 +96,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans action={parentReportAction} showHeader report={report} + policy={policy} > ${translate(message)}`} /> @@ -130,6 +131,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans action={parentReportAction} showHeader={draftMessage === undefined} report={report} + policy={policy} > ${translate('parentReportAction.deletedTask')}`} /> diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index d791d977e9b2..407e022a2c78 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -13,7 +13,6 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import useLocalize from '@hooks/useLocalize'; -import usePolicy from '@hooks/usePolicy'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -63,7 +62,7 @@ type ReportActionItemSingleProps = Partial & { personalDetails?: PersonalDetailsList | Record; /** Current connected policy */ - policy?: OnyxEntry; + policy: OnyxEntry; }; const showUserDetails = (accountID: string) => { @@ -91,8 +90,6 @@ function ReportActionItemSingle({ const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const onyxPolicy = usePolicy(report?.policyID); - const reportPolicy = policy ?? onyxPolicy; const delegatePersonalDetails = personalDetails?.[action?.delegateAccountID ?? '']; const ownerAccountID = iouReport?.ownerAccountID ?? action?.childOwnerAccountID; const isReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW; @@ -117,9 +114,9 @@ function ReportActionItemSingle({ let avatarId: number | string | undefined = actorAccountID; if (isWorkspaceActor) { - displayName = ReportUtils.getPolicyName(report, undefined, reportPolicy); + displayName = ReportUtils.getPolicyName(report, undefined, policy); actorHint = displayName; - avatarSource = ReportUtils.getWorkspaceIcon(report, reportPolicy).source; + avatarSource = ReportUtils.getWorkspaceIcon(report, policy).source; avatarId = report?.policyID; } else if (action?.delegateAccountID && personalDetails?.[action?.delegateAccountID]) { displayName = delegatePersonalDetails?.displayName ?? ''; @@ -158,7 +155,7 @@ function ReportActionItemSingle({ } else if (!isWorkspaceActor) { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const avatarIconIndex = report?.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1; - const reportIcons = ReportUtils.getIcons(report, personalDetails, null, undefined, undefined, reportPolicy); + const reportIcons = ReportUtils.getIcons(report, personalDetails, null, undefined, undefined, policy); secondaryAvatar = reportIcons.at(avatarIconIndex) ?? {name: '', source: '', type: CONST.ICON_TYPE_AVATAR}; } else if (ReportUtils.isInvoiceReport(iouReport)) { diff --git a/tests/ui/WorkspaceCategoriesTest.tsx b/tests/ui/WorkspaceCategoriesTest.tsx index eca2f803f70e..fd35948398a6 100644 --- a/tests/ui/WorkspaceCategoriesTest.tsx +++ b/tests/ui/WorkspaceCategoriesTest.tsx @@ -20,6 +20,8 @@ import * as LHNTestUtils from '../utils/LHNTestUtils'; import * as TestHelper from '../utils/TestHelper'; import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct'; +jest.mock('@src/components/ConfirmedRoute.tsx'); + TestHelper.setupGlobalFetchMock(); const RootStack = createResponsiveStackNavigator(); diff --git a/tests/unit/Search/SearchUIUtilsTest.ts b/tests/unit/Search/SearchUIUtilsTest.ts index f16153126858..de82d5c1b892 100644 --- a/tests/unit/Search/SearchUIUtilsTest.ts +++ b/tests/unit/Search/SearchUIUtilsTest.ts @@ -3,6 +3,8 @@ import CONST from '@src/CONST'; import * as SearchUIUtils from '@src/libs/SearchUIUtils'; import type * as OnyxTypes from '@src/types/onyx'; +jest.mock('@src/components/ConfirmedRoute.tsx'); + const accountID = 18439984; const policyID = 'A1B2C3'; const reportID = '123456789'; From 0fc3a45c75aafcb880e6b5511d39675b38463b40 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Wed, 8 Jan 2025 08:47:10 +0700 Subject: [PATCH 25/27] insert personal details to ReportActionItemSingle --- src/pages/home/report/ReportActionItemContentCreated.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemContentCreated.tsx b/src/pages/home/report/ReportActionItemContentCreated.tsx index 0e4a37b59359..0af76633ca68 100644 --- a/src/pages/home/report/ReportActionItemContentCreated.tsx +++ b/src/pages/home/report/ReportActionItemContentCreated.tsx @@ -26,6 +26,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; import ReportActionItemCreated from './ReportActionItemCreated'; import ReportActionItemSingle from './ReportActionItemSingle'; +import { usePersonalDetails } from '@components/OnyxProvider'; type ReportActionItemContentCreatedProps = { /** The context value containing the report and action data, along with the show context menu props */ @@ -52,7 +53,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans const {translate} = useLocalize(); const {report, action, transactionThreadReport} = contextValue; - + const personalDetails = usePersonalDetails(); const policy = usePolicy(report.policyID === CONST.POLICY.OWNER_EMAIL_FAKE ? '-1' : report.policyID ?? '-1'); const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID ?? '-1'}`); @@ -97,6 +98,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans showHeader report={report} policy={policy} + personalDetails={personalDetails} > ${translate(message)}`} /> @@ -132,6 +134,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans showHeader={draftMessage === undefined} report={report} policy={policy} + personalDetails={personalDetails} > ${translate('parentReportAction.deletedTask')}`} /> From e51cf569074286475ad5805753979328d6a52bcd Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Wed, 8 Jan 2025 09:05:29 +0700 Subject: [PATCH 26/27] extract invoiceReceiverPolicy --- src/components/SelectionList/ChatListItem.tsx | 1 + src/pages/home/report/PureReportActionItem.tsx | 6 ++++++ src/pages/home/report/ReportActionItem.tsx | 6 +++++- .../home/report/ReportActionItemContentCreated.tsx | 10 ++++++++-- src/pages/home/report/ReportActionItemSingle.tsx | 7 ++++--- tests/utils/LHNTestUtils.tsx | 1 + 6 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index df520d7501f8..e2d49179222a 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -84,6 +84,7 @@ function ChatListItem({ shouldDisplayContextMenu={false} attachmentContextValueType={CONST.ATTACHMENT_TYPE.SEARCH} policy={undefined} + invoiceReceiverPolicy={undefined} /> ); diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 056f8fe06967..991a6680c085 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -246,6 +246,9 @@ type PureReportActionItemProps = { /** Current connected policy */ policy: OnyxEntry; + + /** Invoice receiver policy */ + invoiceReceiverPolicy: OnyxEntry; }; /** @@ -301,6 +304,7 @@ function PureReportActionItem({ reportAutomaticallyForwardedMessage, attachmentContextValueType = CONST.ATTACHMENT_TYPE.REPORT, policy, + invoiceReceiverPolicy, }: PureReportActionItemProps) { const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); @@ -1015,6 +1019,7 @@ function PureReportActionItem({ } personalDetails={personalDetails} policy={policy} + invoiceReceiverPolicy={invoiceReceiverPolicy} > {content} @@ -1036,6 +1041,7 @@ function PureReportActionItem({ transactionID={transactionID} draftMessage={draftMessage} shouldHideThreadDividerLine={shouldHideThreadDividerLine} + invoiceReceiverPolicy={invoiceReceiverPolicy} /> ); } diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index bd33ee1eb6d6..d9d38263de5e 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -9,7 +9,7 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as Report from '@userActions/Report'; import * as ReportActions from '@userActions/ReportActions'; import * as Transaction from '@userActions/Transaction'; -import type CONST from '@src/CONST'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReportAction} from '@src/types/onyx'; import type {PureReportActionItemProps} from './PureReportActionItem'; @@ -45,6 +45,9 @@ function ReportActionItem({action, report, ...props}: PureReportActionItemProps) const linkedReport = ReportUtils.isChatThread(report) ? parentReport : report; const missingPaymentMethod = ReportUtils.getIndicatedMissingPaymentMethod(userWallet, linkedReport?.reportID ?? '-1', action); const policy = usePolicy(report?.policyID); + const [invoiceReceiverPolicy] = useOnyx( + `${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : CONST.DEFAULT_NUMBER_ID}`, + ); return ( , reportID)} policy={policy} + invoiceReceiverPolicy={invoiceReceiverPolicy} /> ); } diff --git a/src/pages/home/report/ReportActionItemContentCreated.tsx b/src/pages/home/report/ReportActionItemContentCreated.tsx index 0af76633ca68..22a51c17727b 100644 --- a/src/pages/home/report/ReportActionItemContentCreated.tsx +++ b/src/pages/home/report/ReportActionItemContentCreated.tsx @@ -46,9 +46,12 @@ type ReportActionItemContentCreatedProps = { /** Flag to show, hide the thread divider line */ shouldHideThreadDividerLine: boolean; + + /** Invoice receiver policy */ + invoiceReceiverPolicy: OnyxEntry; }; -function ReportActionItemContentCreated({contextValue, parentReportAction, transactionID, draftMessage, shouldHideThreadDividerLine}: ReportActionItemContentCreatedProps) { +function ReportActionItemContentCreated({contextValue, parentReportAction, transactionID, draftMessage, shouldHideThreadDividerLine, invoiceReceiverPolicy}: ReportActionItemContentCreatedProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -99,6 +102,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans report={report} policy={policy} personalDetails={personalDetails} + invoiceReceiverPolicy={invoiceReceiverPolicy} > ${translate(message)}`} /> @@ -135,6 +139,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans report={report} policy={policy} personalDetails={personalDetails} + invoiceReceiverPolicy={invoiceReceiverPolicy} > ${translate('parentReportAction.deletedTask')}`} /> @@ -207,5 +212,6 @@ export default memo( lodashIsEqual(prevProps.parentReportAction, nextProps.parentReportAction) && prevProps.transactionID === nextProps.transactionID && prevProps.draftMessage === nextProps.draftMessage && - prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine, + prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine && + lodashIsEqual(prevProps.invoiceReceiverPolicy, nextProps.invoiceReceiverPolicy), ); diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 82515ba36cd0..609f5a471679 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -63,6 +63,9 @@ type ReportActionItemSingleProps = Partial & { /** Current connected policy */ policy: OnyxEntry; + + /** Invoice receiver policy */ + invoiceReceiverPolicy: OnyxEntry; }; const showUserDetails = (accountID: string) => { @@ -88,6 +91,7 @@ function ReportActionItemSingle({ isHovered = false, personalDetails, policy, + invoiceReceiverPolicy, }: ReportActionItemSingleProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -97,9 +101,6 @@ function ReportActionItemSingle({ const ownerAccountID = iouReport?.ownerAccountID ?? action?.childOwnerAccountID; const isReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW; const actorAccountID = ReportUtils.getReportActionActorAccountID(action, iouReport, report); - const [invoiceReceiverPolicy] = useOnyx( - `${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : CONST.DEFAULT_NUMBER_ID}`, - ); let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID); const {avatar, login} = personalDetails?.[actorAccountID ?? CONST.DEFAULT_NUMBER_ID] ?? {}; diff --git a/tests/utils/LHNTestUtils.tsx b/tests/utils/LHNTestUtils.tsx index 2b89392cd424..70fdced84f1c 100644 --- a/tests/utils/LHNTestUtils.tsx +++ b/tests/utils/LHNTestUtils.tsx @@ -351,6 +351,7 @@ function MockedReportActionItemSingle({shouldShowSubscriptAvatar = true, report, isHovered={false} personalDetails={personalDetails} policy={policy} + invoiceReceiverPolicy={undefined} /> ); From 69977529d047863f812e6f6235b9d103ccfd8155 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Wed, 8 Jan 2025 10:22:55 +0700 Subject: [PATCH 27/27] extract IOUTransaction from reportactionitemcontentcreated --- src/components/SelectionList/ChatListItem.tsx | 1 + src/pages/home/report/PureReportActionItem.tsx | 11 +++++++---- src/pages/home/report/ReportActionItem.tsx | 8 +++++++- .../home/report/ReportActionItemContentCreated.tsx | 9 ++++----- 4 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index e2d49179222a..e69cf68adf6f 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -85,6 +85,7 @@ function ChatListItem({ attachmentContextValueType={CONST.ATTACHMENT_TYPE.SEARCH} policy={undefined} invoiceReceiverPolicy={undefined} + IOUTransaction={undefined} /> ); diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 991a6680c085..32c210aa97e6 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -249,6 +249,8 @@ type PureReportActionItemProps = { /** Invoice receiver policy */ invoiceReceiverPolicy: OnyxEntry; + + IOUTransaction: OnyxEntry; }; /** @@ -305,6 +307,7 @@ function PureReportActionItem({ attachmentContextValueType = CONST.ATTACHMENT_TYPE.REPORT, policy, invoiceReceiverPolicy, + IOUTransaction, }: PureReportActionItemProps) { const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); @@ -1030,15 +1033,15 @@ function PureReportActionItem({ }; if (action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) { - const transactionID = ReportActionsUtils.isMoneyRequestAction(parentReportActionForTransactionThread) - ? ReportActionsUtils.getOriginalMessage(parentReportActionForTransactionThread)?.IOUTransactionID - : '-1'; + // const transactionID = ReportActionsUtils.isMoneyRequestAction(parentReportActionForTransactionThread) + // ? ReportActionsUtils.getOriginalMessage(parentReportActionForTransactionThread)?.IOUTransactionID + // : '-1'; return ( ReportUtils.getOriginalReportID(reportID, action) || '-1', [reportID, action]); @@ -48,6 +48,11 @@ function ReportActionItem({action, report, ...props}: PureReportActionItemProps) const [invoiceReceiverPolicy] = useOnyx( `${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : CONST.DEFAULT_NUMBER_ID}`, ); + const IOUTransactionID = ReportActionsUtils.isMoneyRequestAction(parentReportActionForTransactionThread) + ? ReportActionsUtils.getOriginalMessage(parentReportActionForTransactionThread)?.IOUTransactionID + : '-1'; + + const [IOUTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${IOUTransactionID ?? '-1'}`); return ( , reportID)} policy={policy} invoiceReceiverPolicy={invoiceReceiverPolicy} + IOUTransaction={IOUTransaction} /> ); } diff --git a/src/pages/home/report/ReportActionItemContentCreated.tsx b/src/pages/home/report/ReportActionItemContentCreated.tsx index 22a51c17727b..53bf9a9961aa 100644 --- a/src/pages/home/report/ReportActionItemContentCreated.tsx +++ b/src/pages/home/report/ReportActionItemContentCreated.tsx @@ -38,8 +38,8 @@ type ReportActionItemContentCreatedProps = { /** Report action belonging to the report's parent */ parentReportAction: OnyxEntry; - /** The transaction ID */ - transactionID: string | undefined; + /** Transaction that stores the distance expense data */ + transaction: OnyxEntry; /** The draft message */ draftMessage: string | undefined; @@ -51,14 +51,13 @@ type ReportActionItemContentCreatedProps = { invoiceReceiverPolicy: OnyxEntry; }; -function ReportActionItemContentCreated({contextValue, parentReportAction, transactionID, draftMessage, shouldHideThreadDividerLine, invoiceReceiverPolicy}: ReportActionItemContentCreatedProps) { +function ReportActionItemContentCreated({contextValue, parentReportAction, transaction, draftMessage, shouldHideThreadDividerLine, invoiceReceiverPolicy}: ReportActionItemContentCreatedProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {report, action, transactionThreadReport} = contextValue; const personalDetails = usePersonalDetails(); const policy = usePolicy(report.policyID === CONST.POLICY.OWNER_EMAIL_FAKE ? '-1' : report.policyID ?? '-1'); - const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID ?? '-1'}`); const transactionCurrency = TransactionUtils.getCurrency(transaction); @@ -210,7 +209,7 @@ export default memo( (prevProps, nextProps) => lodashIsEqual(prevProps.contextValue, nextProps.contextValue) && lodashIsEqual(prevProps.parentReportAction, nextProps.parentReportAction) && - prevProps.transactionID === nextProps.transactionID && + lodashIsEqual(prevProps.transaction, nextProps.transaction) && prevProps.draftMessage === nextProps.draftMessage && prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine && lodashIsEqual(prevProps.invoiceReceiverPolicy, nextProps.invoiceReceiverPolicy),