wip

packages/webapp/src/containers/Expenses/ExpensesAlerts.tsx

@@ -8,15 +8,10 @@ const ExpensePublishAlert = React.lazy(
   () => import('@/containers/Alerts/Expenses/ExpensePublishAlert'),
 );
 
-const ExpenseBulkDeleteAlert = React.lazy(
-  () => import('@/containers/Alerts/Expenses/ExpenseBulkDeleteAlert'),
-);
-
 /**
  * Accounts alert.
  */
 export default [
   { name: 'expense-delete', component: ExpenseDeleteAlert },
   { name: 'expense-publish', component: ExpensePublishAlert },
-  { name: 'expenses-bulk-delete', component: ExpenseBulkDeleteAlert },
 ];

packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.tsx

@@ -34,10 +34,10 @@ import withExpensesActions from './withExpensesActions';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
-import withAlertActions from '@/containers/Alert/withAlertActions';
 
 import { compose } from '@/utils';
 import { isEmpty } from 'lodash';
+import { useBulkDeleteExpensesDialog } from './hooks/use-bulk-delete-expenses-dialog';
 
 /**
  * Expenses actions bar.
@@ -58,9 +58,6 @@ function ExpensesActionsBar({
 
   // #withDialogActions
   openDialog,
-
-  // #withAlertActions
-  openAlert,
 }) {
   // History context.
   const history = useHistory();
@@ -78,11 +75,14 @@ function ExpensesActionsBar({
   const onClickNewExpense = () => {
     history.push('/expenses/new');
   };
+  const {
+    openBulkDeleteDialog,
+    isValidatingBulkDeleteExpenses,
+  } = useBulkDeleteExpensesDialog();
+
   // Handle delete button click.
   const handleBulkDelete = () => {
-    openAlert('expenses-bulk-delete', {
-      expensesIds: expensesSelectedRows,
-    });
+    openBulkDeleteDialog(expensesSelectedRows);
   };
 
   // Handles the tab chaning.
@@ -122,6 +122,7 @@ function ExpensesActionsBar({
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
+            disabled={isValidatingBulkDeleteExpenses}
           />
         </NavbarGroup>
       </DashboardActionsBar>
@@ -209,7 +210,6 @@ function ExpensesActionsBar({
 
 export default compose(
   withDialogActions,
-  withAlertActions,
   withExpensesActions,
   withSettingsActions,
   withExpenses(({ expensesTableState, expensesSelectedRows }) => ({

packages/webapp/src/containers/Expenses/ExpensesLanding/hooks/use-bulk-delete-expenses-dialog.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { DialogsName } from '@/constants/dialogs';
+import { useValidateBulkDeleteExpenses } from '@/hooks/query/expenses';
+import { useBulkDeleteDialog } from '@/hooks/dialogs/useBulkDeleteDialog';
+
+export const useBulkDeleteExpensesDialog = () => {
+  const validateBulkDeleteMutation = useValidateBulkDeleteExpenses();
+  const {
+    openBulkDeleteDialog,
+    closeBulkDeleteDialog,
+    isValidatingBulkDelete,
+  } = useBulkDeleteDialog(DialogsName.ExpenseBulkDelete, validateBulkDeleteMutation);
+
+  return {
+    openBulkDeleteDialog,
+    closeBulkDeleteDialog,
+    isValidatingBulkDeleteExpenses: isValidatingBulkDelete,
+  };
+};
+