From eea04210ea4c1b1e8dfbf2828b1f69d3f319b71b Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Sat, 23 Nov 2024 10:11:23 +0700 Subject: [PATCH 01/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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/23] 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;