refactor: Payment Receives alerts.

client/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.js

@@ -0,0 +1,85 @@
+import React, { useCallback, useState } from 'react';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withPaymentReceivesActions from 'containers/Sales/PaymentReceive/withPaymentReceivesActions';
+
+import { compose } from 'utils';
+
+/**
+ * Payment receive delete alert.
+ */
+function PaymentReceiveDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { paymentReceiveId },
+
+  // #withPaymentReceivesActions
+  requestDeletePaymentReceive,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // Handle cancel payment Receive.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete payment receive.
+  const handleConfirmPaymentReceiveDelete = useCallback(() => {
+    setLoading(true);
+    requestDeletePaymentReceive(paymentReceiveId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_payment_receive_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('paymentReceives-table');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+        setLoading(false);
+      });
+  }, [paymentReceiveId, requestDeletePaymentReceive, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmPaymentReceiveDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_payment_receive_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withPaymentReceivesActions,
+)(PaymentReceiveDeleteAlert);

client/src/containers/Sales/PaymentReceive/PaymentReceiveAlerts.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PaymentReceiveDeleteAlert from 'containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert';
+
+/**
+ * PaymentReceives alert.
+ */
+export default function EstimatesAlerts() {
+  return (
+    <div>
+      <PaymentReceiveDeleteAlert name={'payment-receive-delete'} />
+    </div>
+  );
+}

client/src/containers/Sales/PaymentReceive/PaymentReceivesList.js

@@ -1,9 +1,7 @@
-import React, { useEffect, useCallback, useMemo, useState } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { useQuery, queryCache } from 'react-query';
-import { Alert, Intent } from '@blueprintjs/core';
+import { useQuery } from 'react-query';
 
-import AppToaster from 'components/AppToaster';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -11,12 +9,12 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import PaymentReceivesDataTable from './PaymentReceivesDataTable';
 import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
 import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
-
+import PaymentReceiveAlerts from './PaymentReceiveAlerts';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
-import withViewsActions from 'containers/Views/withViewsActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 
@@ -24,77 +22,40 @@ function PaymentReceiveList({
   // #withDashboardActions
   changePageTitle,
 
-  // #withViewsActions
-  requestFetchResourceViews,
-  requestFetchResourceFields,
-
   //#withPaymentReceives
   paymentReceivesTableQuery,
 
+  // #withAlertsActions.
+  openAlert,
+
   //#withPaymentReceivesActions
   requestFetchPaymentReceiveTable,
-  requestDeletePaymentReceive,
-  addPaymentReceivesTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-  const [deletePaymentReceive, setDeletePaymentReceive] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'payment_Receives_list' }));
   }, [changePageTitle, formatMessage]);
 
-  const fetchResourceViews = useQuery(
-    ['resource-views', 'payment_receives'],
-    (key, resourceName) => requestFetchResourceViews(resourceName),
-  );
-
-  const fetchResourceFields = useQuery(
-    ['resource-fields', 'payment_receives'],
-    (key, resourceName) => requestFetchResourceFields(resourceName),
-  );
-
   const fetchPaymentReceives = useQuery(
-    ['paymantReceives-table', paymentReceivesTableQuery],
+    ['paymentReceives-table', paymentReceivesTableQuery],
     () => requestFetchPaymentReceiveTable(),
   );
 
-  // Handle dalete Payment Receive
+  // Handle delete Payment Receive
   const handleDeletePaymentReceive = useCallback(
-    (paymentReceive) => {
-      setDeletePaymentReceive(paymentReceive);
+    ({ id }) => {
+      openAlert('payment-receive-delete', { paymentReceiveId: id });
     },
-    [setDeletePaymentReceive],
+    [openAlert],
   );
 
-  // Handle cancel payment Receive.
-  const handleCancelPaymentReceiveDelete = useCallback(() => {
-    setDeletePaymentReceive(false);
-  }, [setDeletePaymentReceive]);
-
-  // Handle confirm delete payment receive.
-  const handleConfirmPaymentReceiveDelete = useCallback(() => {
-    requestDeletePaymentReceive(deletePaymentReceive.id).then(() => {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_payment_receive_has_been_deleted_successfully',
-        }),
-        intent: Intent.SUCCESS,
-      });
-      setDeletePaymentReceive(false);
-    });
-  }, [deletePaymentReceive, requestDeletePaymentReceive, formatMessage]);
-
   const handleEditPaymentReceive = useCallback((payment) => {
     history.push(`/payment-receives/${payment.id}/edit`);
   });
 
-  // Calculates the selected rows count.
-  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
-    selectedRows,
-  ]);
-
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, [fetchPaymentReceives]);
 
@@ -107,12 +68,8 @@ function PaymentReceiveList({
   );
 
   return (
-    <DashboardInsider
-      // loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
-      name={'payment_receives'}
-    >
+    <DashboardInsider name={'payment_receives'}>
       <PaymentReceiveActionsBar
-        // onBulkDelete={}
         selectedRows={selectedRows}
         onFilterChanged={handleFilterChanged}
       />
@@ -133,19 +90,7 @@ function PaymentReceiveList({
             />
           </Route>
         </Switch>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon={'trash'}
-          intent={Intent.DANGER}
-          isOpen={deletePaymentReceive}
-          onCancel={handleCancelPaymentReceiveDelete}
-          onConfirm={handleConfirmPaymentReceiveDelete}
-        >
-          <p>
-            <T id={'once_delete_this_payment_receive_you_will_able_to_restore_it'} />
-          </p>
-        </Alert>
+        <PaymentReceiveAlerts />
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -155,8 +100,8 @@ export default compose(
   withResourceActions,
   withPaymentReceivesActions,
   withDashboardActions,
-  withViewsActions,
   withPaymentReceives(({ paymentReceivesTableQuery }) => ({
     paymentReceivesTableQuery,
   })),
+  withAlertsActions,
 )(PaymentReceiveList);