Merge pull request Expensify#86961 from callstack-internal/perf/decompose-header-secondary-actions

[No QA] Extract useExportAgainModal hook from MoneyReportHeader

Author: rlinoz

src/components/MoneyReportHeader.tsx

@@ -18,6 +18,7 @@ import useDefaultExpensePolicy from '@hooks/useDefaultExpensePolicy';
 import useDeleteTransactions from '@hooks/useDeleteTransactions';
 import useDuplicateTransactionsAndViolations from '@hooks/useDuplicateTransactionsAndViolations';
 import useEnvironment from '@hooks/useEnvironment';
+import useExportAgainModal from '@hooks/useExportAgainModal';
 import useGetIOUReportFromReportAction from '@hooks/useGetIOUReportFromReportAction';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -128,7 +129,6 @@ import {
     isPerDiemRequest,
     isTransactionPendingDelete,
 } from '@libs/TransactionUtils';
-import type {ExportType} from '@pages/inbox/report/ReportDetailsExportPage';
 import {
     approveMoneyRequest,
     canApproveIOU,
@@ -377,8 +377,8 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
     const hasCustomUnitOutOfPolicyViolation = hasCustomUnitOutOfPolicyViolationTransactionUtils(transactionViolations);
     const isPerDiemRequestOnNonDefaultWorkspace = isPerDiemRequest(transaction) && defaultExpensePolicy?.id !== policy?.id;
 
-    const [exportModalStatus, setExportModalStatus] = useState<ExportType | null>(null);
     const {showConfirmModal} = useConfirmModal();
+    const {triggerExportOrConfirm} = useExportAgainModal(moneyRequestReport?.reportID, moneyRequestReport?.policyID);
     const {showDecisionModal} = useDecisionModal();
 
     const showOfflineModal = () => {
@@ -1027,18 +1027,6 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
         bankAccountList,
     ]);
 
-    const confirmExport = useCallback(() => {
-        setExportModalStatus(null);
-        if (!moneyRequestReport?.reportID || !connectedIntegration) {
-            return;
-        }
-        if (exportModalStatus === CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION) {
-            exportToIntegration(moneyRequestReport?.reportID, connectedIntegration);
-        } else if (exportModalStatus === CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED) {
-            markAsManuallyExported([moneyRequestReport?.reportID ?? CONST.DEFAULT_NUMBER_ID], connectedIntegration);
-        }
-    }, [connectedIntegration, exportModalStatus, moneyRequestReport?.reportID]);
-
     const getAmount = (actionType: ValueOf<typeof CONST.REPORT.REPORT_PREVIEW_ACTIONS>) => ({
         formattedAmount: getTotalAmountForIOUReportPreviewButton(moneyRequestReport, policy, actionType, nonPendingDeleteTransactions),
     });
@@ -1171,7 +1159,7 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
                         return;
                     }
                     if (isExported) {
-                        setExportModalStatus(CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION);
+                        triggerExportOrConfirm(CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION);
                         return;
                     }
                     exportToIntegration(moneyRequestReport?.reportID, connectedIntegration);
@@ -1191,7 +1179,7 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
                         return;
                     }
                     if (isExported) {
-                        setExportModalStatus(CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED);
+                        triggerExportOrConfirm(CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED);
                         return;
                     }
                     markAsManuallyExported([moneyRequestReport?.reportID ?? CONST.DEFAULT_NUMBER_ID], connectedIntegration);
@@ -1223,6 +1211,7 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
         isExported,
         exportTemplates,
         beginExportWithTemplate,
+        triggerExportOrConfirm,
         showDecisionModal,
     ]);
 
@@ -1250,7 +1239,7 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
                     setIsHoldMenuVisible(true);
                 }
             }}
-            onExportModalOpen={() => setExportModalStatus(CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION)}
+            onExportModalOpen={() => triggerExportOrConfirm(CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION)}
         />
     );
 
@@ -2002,34 +1991,6 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
         chatReport?.reportID,
     ]);
 
-    const showExportAgainModal = useCallback(() => {
-        if (!connectedIntegration) {
-            return;
-        }
-        showConfirmModal({
-            title: translate('workspace.exportAgainModal.title'),
-            prompt: translate('workspace.exportAgainModal.description', {
-                connectionName: connectedIntegration ?? connectedIntegrationFallback,
-                reportName: moneyRequestReport?.reportName ?? '',
-            }),
-            confirmText: translate('workspace.exportAgainModal.confirmText'),
-            cancelText: translate('workspace.exportAgainModal.cancelText'),
-        }).then((result) => {
-            if (result.action !== ModalActions.CONFIRM) {
-                setExportModalStatus(null);
-                return;
-            }
-            confirmExport();
-        });
-    }, [showConfirmModal, translate, connectedIntegration, connectedIntegrationFallback, moneyRequestReport?.reportName, confirmExport]);
-
-    useEffect(() => {
-        if (!exportModalStatus) {
-            return;
-        }
-        showExportAgainModal();
-    }, [exportModalStatus, showExportAgainModal]);
-
     const allExpensesSelected = selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === nonPendingDeleteTransactions.length;
 
     const selectedTransactionsOptions = useMemo(() => {

src/hooks/useExportAgainModal.ts

@@ -0,0 +1,50 @@
+import {ModalActions} from '@components/Modal/Global/ModalContext';
+import {exportToIntegration, markAsManuallyExported} from '@libs/actions/Report';
+import {getConnectedIntegration, getValidConnectedIntegration} from '@libs/PolicyUtils';
+import type {ExportType} from '@pages/inbox/report/ReportDetailsExportPage';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useConfirmModal from './useConfirmModal';
+import useLocalize from './useLocalize';
+import useOnyx from './useOnyx';
+import usePolicy from './usePolicy';
+
+function useExportAgainModal(reportID: string | undefined, policyID: string | undefined) {
+    const {translate} = useLocalize();
+    const {showConfirmModal} = useConfirmModal();
+    const policy = usePolicy(policyID);
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+
+    const connectedIntegration = getValidConnectedIntegration(policy);
+    const connectedIntegrationFallback = getConnectedIntegration(policy);
+    const reportName = report?.reportName ?? '';
+
+    const triggerExportOrConfirm = (exportType: ExportType) => {
+        if (!connectedIntegration) {
+            return;
+        }
+
+        showConfirmModal({
+            title: translate('workspace.exportAgainModal.title'),
+            prompt: translate('workspace.exportAgainModal.description', {
+                connectionName: connectedIntegration ?? connectedIntegrationFallback,
+                reportName,
+            }),
+            confirmText: translate('workspace.exportAgainModal.confirmText'),
+            cancelText: translate('workspace.exportAgainModal.cancelText'),
+        }).then((result) => {
+            if (result.action !== ModalActions.CONFIRM || !reportID || !connectedIntegration) {
+                return;
+            }
+            if (exportType === CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION) {
+                exportToIntegration(reportID, connectedIntegration);
+            } else if (exportType === CONST.REPORT.EXPORT_OPTIONS.MARK_AS_EXPORTED) {
+                markAsManuallyExported([reportID], connectedIntegration);
+            }
+        });
+    };
+
+    return {triggerExportOrConfirm};
+}
+
+export default useExportAgainModal;