refactor: Payment Receives alerts.

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);