Skip to content

Commit

Permalink
Merge pull request #43693 from rezkiy37/refactor/43663-split-react-ac…
Browse files Browse the repository at this point in the history 
…tion-item

Integrate ReportActionItemContentCreated
  • Loading branch information
@mountiny
mountiny authored Jun 19, 2024
2 parents 7b4a1b4 + bbabf6b commit 11636a2
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 152 deletions.
1 change: 1 addition & 0 deletions src/components/ShowContextMenuContext.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,4 @@ function showContextMenuForReport(
}

export {ShowContextMenuContext, showContextMenuForReport};
export type {ShowContextMenuContextProps};
161 changes: 9 additions & 152 deletions src/pages/home/report/ReportActionItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,14 @@ import RenderHTML from '@components/RenderHTML';
import type {ActionableItem} from '@components/ReportActionItem/ActionableItemButtons';
import ActionableItemButtons from '@components/ReportActionItem/ActionableItemButtons';
import ChronosOOOListActions from '@components/ReportActionItem/ChronosOOOListActions';
import MoneyReportView from '@components/ReportActionItem/MoneyReportView';
import MoneyRequestAction from '@components/ReportActionItem/MoneyRequestAction';
import MoneyRequestView from '@components/ReportActionItem/MoneyRequestView';
import RenameAction from '@components/ReportActionItem/RenameAction';
import ReportPreview from '@components/ReportActionItem/ReportPreview';
import TaskAction from '@components/ReportActionItem/TaskAction';
import TaskPreview from '@components/ReportActionItem/TaskPreview';
import TaskView from '@components/ReportActionItem/TaskView';
import TripDetailsView from '@components/ReportActionItem/TripDetailsView';
import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview';
import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
import SpacerView from '@components/SpacerView';
import Text from '@components/Text';
import UnreadActionIndicator from '@components/UnreadActionIndicator';
import useLocalize from '@hooks/useLocalize';
Expand All @@ -53,7 +49,6 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
import * as ReportActionsUtils from '@libs/ReportActionsUtils';
import * as ReportUtils from '@libs/ReportUtils';
import SelectionScraper from '@libs/SelectionScraper';
import * as TransactionUtils from '@libs/TransactionUtils';
import {ReactionListContext} from '@pages/home/ReportScreenContext';
import * as BankAccounts from '@userActions/BankAccounts';
import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
Expand All @@ -63,21 +58,19 @@ import * as ReportActions from '@userActions/ReportActions';
import * as Session from '@userActions/Session';
import * as User from '@userActions/User';
import CONST from '@src/CONST';
import type {TranslationPaths} from '@src/languages/types';
import ONYXKEYS from '@src/ONYXKEYS';
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 {isEmptyObject} from '@src/types/utils/EmptyObject';
import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
import {RestrictedReadOnlyContextMenuActions} from './ContextMenu/ContextMenuActions';
import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu';
import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
import {hideContextMenu} from './ContextMenu/ReportActionContextMenu';
import LinkPreviewer from './LinkPreviewer';
import ReportActionItemBasicMessage from './ReportActionItemBasicMessage';
import ReportActionItemCreated from './ReportActionItemCreated';
import ReportActionItemContentCreated from './ReportActionItemContentCreated';
import ReportActionItemDraft from './ReportActionItemDraft';
import ReportActionItemGrouped from './ReportActionItemGrouped';
import ReportActionItemMessage from './ReportActionItemMessage';
Expand Down Expand Up @@ -105,12 +98,6 @@ type ReportActionItemOnyxProps = {
/** The user's wallet account */
userWallet: OnyxEntry<OnyxTypes.UserWallet>;

/** The policy which the user has access to and which the report is tied to */
policy: OnyxEntry<OnyxTypes.Policy>;

/** Transaction associated with this report, if any */
transaction: OnyxEntry<OnyxTypes.Transaction>;

/** The transaction (linked with the report action) route error */
linkedTransactionRouteError: NonNullable<OnyxEntry<Errors>> | null;
};
Expand Down Expand Up @@ -186,12 +173,11 @@ function ReportActionItem({
userWallet,
shouldHideThreadDividerLine = false,
shouldShowSubscriptAvatar = false,
policy,
transaction,
onPress = undefined,
isFirstVisibleReportAction = false,
shouldUseThreadDividerLine = false,
linkedTransactionRouteError,
parentReportActionForTransactionThread,
}: ReportActionItemProps) {
const {translate} = useLocalize();
const {isSmallScreenWidth} = useWindowDimensions();
Expand All @@ -216,7 +202,6 @@ function ReportActionItem({
const originalReportID = ReportUtils.getOriginalReportID(report.reportID, action);
const originalReport = report.reportID === originalReportID ? report : ReportUtils.getReport(originalReportID);
const isReportActionLinked = linkedReportActionID && action.reportActionID && linkedReportActionID === action.reportActionID;
const transactionCurrency = TransactionUtils.getCurrency(transaction);
const reportScrollManager = useReportScrollManager();
const isActionableWhisper =
ReportActionsUtils.isActionableMentionWhisper(action) || ReportActionsUtils.isActionableTrackExpense(action) || ReportActionsUtils.isActionableReportMentionWhisper(action);
Expand Down Expand Up @@ -489,22 +474,6 @@ function ReportActionItem({
];
}, [action, isActionableWhisper, report.reportID]);

const renderThreadDivider = useMemo(
() =>
shouldHideThreadDividerLine ? (
<UnreadActionIndicator
reportActionID={report.reportID}
shouldHideThreadDividerLine={shouldHideThreadDividerLine}
/>
) : (
<SpacerView
shouldShow={!shouldHideThreadDividerLine}
style={[!shouldHideThreadDividerLine ? styles.reportHorizontalRule : {}]}
/>
),
[shouldHideThreadDividerLine, styles.reportHorizontalRule, report.reportID],
);

/**
* Get the content of ReportActionItem
* @param hovered whether the ReportActionItem is hovered
Expand Down Expand Up @@ -811,113 +780,15 @@ function ReportActionItem({
}

if (action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
if (ReportActionsUtils.isTransactionThread(parentReportAction)) {
const isReversedTransaction = ReportActionsUtils.isReversedTransaction(parentReportAction);
if (ReportActionsUtils.isDeletedParentAction(parentReportAction) || isReversedTransaction) {
let message: TranslationPaths;
if (isReversedTransaction) {
message = 'parentReportAction.reversedTransaction';
} else {
message = 'parentReportAction.deletedExpense';
}
return (
<View style={[styles.pRelative]}>
<AnimatedEmptyStateBackground />
<OfflineWithFeedback pendingAction={parentReportAction?.pendingAction ?? null}>
<ReportActionItemSingle
action={parentReportAction}
showHeader
report={report}
>
<RenderHTML html={`<comment>${translate(message)}</comment>`} />
</ReportActionItemSingle>
<View style={styles.threadDividerLine} />
</OfflineWithFeedback>
</View>
);
}
return (
<ShowContextMenuContext.Provider value={contextValue}>
<View>
<MoneyRequestView
report={report}
shouldShowAnimatedBackground
/>
{renderThreadDivider}
</View>
</ShowContextMenuContext.Provider>
);
}
if (ReportUtils.isTaskReport(report)) {
if (ReportUtils.isCanceledTaskReport(report, parentReportAction)) {
return (
<View style={[styles.pRelative]}>
<AnimatedEmptyStateBackground />
<OfflineWithFeedback pendingAction={parentReportAction?.pendingAction}>
<ReportActionItemSingle
action={parentReportAction}
showHeader={draftMessage === undefined}
report={report}
>
<RenderHTML html={`<comment>${translate('parentReportAction.deletedTask')}</comment>`} />
</ReportActionItemSingle>
</OfflineWithFeedback>
<View style={styles.reportHorizontalRule} />
</View>
);
}
return (
<View style={[styles.pRelative]}>
<AnimatedEmptyStateBackground />
<View>
<TaskView report={report} />
{renderThreadDivider}
</View>
</View>
);
}

if (ReportUtils.isExpenseReport(report) || ReportUtils.isIOUReport(report) || ReportUtils.isInvoiceReport(report)) {
return (
<OfflineWithFeedback pendingAction={action.pendingAction}>
{transactionThreadReport && !isEmptyObject(transactionThreadReport) ? (
<>
{transactionCurrency !== report.currency && (
<>
<MoneyReportView
report={report}
policy={policy}
/>
{renderThreadDivider}
</>
)}
<ShowContextMenuContext.Provider value={contextValue}>
<View>
<MoneyRequestView
report={transactionThreadReport}
shouldShowAnimatedBackground={transactionCurrency === report.currency}
/>
{renderThreadDivider}
</View>
</ShowContextMenuContext.Provider>
</>
) : (
<>
<MoneyReportView
report={report}
policy={policy}
/>
{renderThreadDivider}
</>
)}
</OfflineWithFeedback>
);
}
const transactionID = (parentReportActionForTransactionThread as OnyxTypes.OriginalMessageIOU)?.originalMessage.IOUTransactionID;

return (
<ReportActionItemCreated
reportID={report.reportID}
policyID={report.policyID}
<ReportActionItemContentCreated
contextValue={contextValue}
parentReportAction={parentReportAction}
transactionID={transactionID}
draftMessage={draftMessage}
shouldHideThreadDividerLine={shouldHideThreadDividerLine}
/>
);
}
Expand Down Expand Up @@ -1061,25 +932,13 @@ export default withOnyx<ReportActionItemProps, ReportActionItemOnyxProps>({
},
initialValue: {} as OnyxTypes.Report,
},
policy: {
key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID ?? -1}`,
initialValue: {} as OnyxTypes.Policy,
},
emojiReactions: {
key: ({action}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`,
initialValue: {},
},
userWallet: {
key: ONYXKEYS.USER_WALLET,
},
transaction: {
key: ({parentReportActionForTransactionThread}) => {
const transactionID = (parentReportActionForTransactionThread as OnyxTypes.OriginalMessageIOU)?.originalMessage.IOUTransactionID
? (parentReportActionForTransactionThread as OnyxTypes.OriginalMessageIOU).originalMessage.IOUTransactionID
: 0;
return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
},
},
linkedTransactionRouteError: {
key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action as OnyxTypes.OriginalMessageIOU)?.originalMessage?.IOUTransactionID ?? -1}`,
selector: (transaction: OnyxEntry<OnyxTypes.Transaction>) => transaction?.errorFields?.route ?? null,
Expand Down Expand Up @@ -1118,10 +977,8 @@ export default withOnyx<ReportActionItemProps, ReportActionItemOnyxProps>({
prevProps.report?.nonReimbursableTotal === nextProps.report?.nonReimbursableTotal &&
prevProps.linkedReportActionID === nextProps.linkedReportActionID &&
lodashIsEqual(prevProps.report.fieldList, nextProps.report.fieldList) &&
lodashIsEqual(prevProps.policy, nextProps.policy) &&
lodashIsEqual(prevProps.transactionThreadReport, nextProps.transactionThreadReport) &&
lodashIsEqual(prevProps.reportActions, nextProps.reportActions) &&
lodashIsEqual(prevProps.transaction, nextProps.transaction) &&
lodashIsEqual(prevProps.linkedTransactionRouteError, nextProps.linkedTransactionRouteError) &&
lodashIsEqual(prevParentReportAction, nextParentReportAction) &&
prevProps.modal?.willAlertModalBecomeVisible === nextProps.modal?.willAlertModalBecomeVisible
Expand Down
Loading

0 comments on commit 11636a2

Please sign in to comment.