feat: datatables pagination.

2026-02-18 22:00:31 +00:00 · 2020-11-16 13:36:14 +02:00
parent 6d4b3164a8
commit 13dd14b9d4
76 changed files with 1160 additions and 1315 deletions
--- a/client/src/containers/Sales/Estimate/EstimateList.js
+++ b/client/src/containers/Sales/Estimate/EstimateList.js
@@ -29,7 +29,7 @@ function EstimateList({
  requestFetchResourceFields,

  // #withEstimate
-  estimateTableQuery,
+  estimatesTableQuery,
  estimateViews,

  //#withEistimateActions
@@ -52,7 +52,7 @@ function EstimateList({
  //   (key, resourceName) => requestFetchResourceFields(resourceName),
  // );

-  const fetchEstimate = useQuery(['estimates-table', estimateTableQuery], () =>
+  const fetchEstimate = useQuery(['estimates-table', estimatesTableQuery], () =>
    requestFetchEstimatesTable(),
  );

@@ -100,23 +100,6 @@ function EstimateList({
    },
    [history],
  );
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addEstimatesTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addEstimatesTableQueries],
-  );

  const handleSelectedRowsChange = useCallback(
    (estimate) => {
@@ -142,14 +125,13 @@ function EstimateList({
          >
            <EstimateViewTabs />
            <EstimatesDataTable
-              loading={fetchEstimate.isFetching}
              onDeleteEstimate={handleDeleteEstimate}
-              onFetchData={handleFetchData}
              onEditEstimate={handleEditEstimate}
              onSelectedRowsChange={handleSelectedRowsChange}
            />
          </Route>
        </Switch>
+
        <Alert
          cancelButtonText={<T id={'cancel'} />}
          confirmButtonText={<T id={'delete'} />}
@@ -173,8 +155,8 @@ export default compose(
  withEstimateActions,
  withDashboardActions,
  withViewsActions,
-  withEstimates(({ estimateTableQuery, estimateViews }) => ({
-    estimateTableQuery,
+  withEstimates(({ estimatesTableQuery, estimateViews }) => ({
+    estimatesTableQuery,
    estimateViews,
  })),
 )(EstimateList);
--- a/client/src/containers/Sales/Estimate/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
@@ -8,85 +8,48 @@ import {
  MenuDivider,
  Position,
 } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
 import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';

-import { compose } from 'utils';
-import { useUpdateEffect } from 'hooks';
+import { compose, saveInvoke } from 'utils';
+import { useIsValuePassed } from 'hooks';

 import LoadingIndicator from 'components/LoadingIndicator';
 import { DataTable, Money, Icon } from 'components';

-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withViewDetails from 'containers/Views/withViewDetails';
-
 import withEstimates from './withEstimates';
 import withEstimateActions from './withEstimateActions';
-import withCurrentView from 'containers/Views/withCurrentView';

+// Estimates transactions datatable.
 function EstimatesDataTable({
-  //#withEitimates
+  // #withEstimates
  estimatesCurrentPage,
  estimatesLoading,
  estimatesPageination,
-  estimateItems,
+  estimatesTableQuery,

-  // #withDashboardActions
-  changeCurrentView,
-  changePageSubtitle,
-  setTopbarEditView,
+  // #withEstimatesActions
+  addEstimatesTableQueries,

-  // #withView
-  viewMeta,
-
-  //#OwnProps
-  loading,
-  onFetchData,
+  // #ownProps
  onEditEstimate,
  onDeleteEstimate,
  onSelectedRowsChange,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
-  const { custom_view_id: customViewId } = useParams();
  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    setInitialMount(false);
-  }, []);
-
-  useUpdateEffect(() => {
-    if (!estimatesLoading) {
-      setInitialMount(true);
-    }
-  }, [estimatesLoading, setInitialMount]);
-
-  useEffect(() => {
-    if (customViewId) {
-      changeCurrentView(customViewId);
-      setTopbarEditView(customViewId);
-    }
-    changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
-  }, [
-    customViewId,
-    changeCurrentView,
-    changePageSubtitle,
-    setTopbarEditView,
-    viewMeta,
-  ]);
+  const isLoaded = useIsValuePassed(estimatesLoading, false);

  const handleEditEstimate = useCallback(
    (estimate) => () => {
-      onEditEstimate && onEditEstimate(estimate);
+      saveInvoke(onEditEstimate, estimate);
    },
    [onEditEstimate],
  );

  const handleDeleteEstimate = useCallback(
    (estimate) => () => {
-      onDeleteEstimate && onDeleteEstimate(estimate);
+      saveInvoke(onDeleteEstimate, estimate);
    },
    [onDeleteEstimate],
  );
@@ -185,74 +148,64 @@ function EstimatesDataTable({
    ],
    [actionMenuList, formatMessage],
  );
-  const selectionColumn = useMemo(
-    () => ({
-      minWidth: 40,
-      width: 40,
-      maxWidth: 40,
-    }),
-    [],
-  );

-  const handleDataTableFetchData = useCallback(
-    (...args) => {
-      onFetchData && onFetchData(...args);
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+
+      addEstimatesTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
    },
-    [onFetchData],
+    [addEstimatesTableQueries],
  );

  const handleSelectedRowsChange = useCallback(
    (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
+      saveInvoke(
+        onSelectedRowsChange,
+        selectedRows.map((s) => s.original),
+      );
    },
    [onSelectedRowsChange],
  );
-  console.log(estimatesCurrentPage, 'estimatesCurrentPage');
-  console.log(estimateItems, 'estimateItems');

  return (
-    <div>
-      <LoadingIndicator loading={loading} mount={false}>
-        <DataTable
-          columns={columns}
-          data={estimatesCurrentPage}
-          onFetchData={handleDataTableFetchData}
-          manualSortBy={true}
-          selectionColumn={true}
-          noInitialFetch={true}
-          sticky={true}
-          loading={estimatesLoading && !initialMount}
-          onSelectedRowsChange={handleSelectedRowsChange}
-          rowContextMenu={onRowContextMenu}
-          pagination={true}
-          pagesCount={estimatesPageination.pagesCount}
-          initialPageSize={estimatesPageination.pageSize}
-          initialPageIndex={estimatesPageination.page - 1}
-        />
-      </LoadingIndicator>
-    </div>
+    <LoadingIndicator loading={estimatesLoading && !isLoaded} mount={false}>
+      <DataTable
+        columns={columns}
+        data={estimatesCurrentPage}
+        onFetchData={handleFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+        pagination={true}
+        pagesCount={estimatesPageination.pagesCount}
+        initialPageSize={estimatesTableQuery.page_size}
+        initialPageIndex={estimatesTableQuery.page - 1}
+      />
+    </LoadingIndicator>
  );
 }

 export default compose(
-  withRouter,
-  withCurrentView,
-  withDialogActions,
-  withDashboardActions,
  withEstimateActions,
  withEstimates(
-    ({
+    ({ estimatesCurrentPage, estimatesLoading, estimatesPageination, estimatesTableQuery }) => ({
      estimatesCurrentPage,
      estimatesLoading,
      estimatesPageination,
-      estimateItems,
-    }) => ({
-      estimatesCurrentPage,
-      estimatesLoading,
-      estimatesPageination,
-      estimateItems,
+      estimatesTableQuery
    }),
  ),
-  withViewDetails(),
 )(EstimatesDataTable);
--- a/client/src/containers/Sales/Estimate/withEstimateActions.js
+++ b/client/src/containers/Sales/Estimate/withEstimateActions.js
@@ -25,7 +25,7 @@ const mapDipatchToProps = (dispatch) => ({
  addEstimatesTableQueries: (queries) =>
    dispatch({
      type: t.ESTIMATES_TABLE_QUERIES_ADD,
-      queries,
+      payload: { queries },
    }),
  setEstimateNumberChanged: (isChanged) =>
    dispatch({
--- a/client/src/containers/Sales/Estimate/withEstimates.js
+++ b/client/src/containers/Sales/Estimate/withEstimates.js
@@ -18,8 +18,8 @@ export default (mapState) => {
      estimatesCurrentPage: getEstimatesItems(state, props, query),
      estimateViews: getResourceViews(state, props, 'sales_estimates'),
      estimateItems: state.salesEstimates.items,
-      estimateTableQuery: query,
-
+      
+      estimatesTableQuery: query,
      estimatesPageination: getEstimatesPaginationMeta(state, props, query),
      estimatesLoading: state.salesEstimates.loading,

--- a/client/src/containers/Sales/Invoice/InvoiceList.js
+++ b/client/src/containers/Sales/Invoice/InvoiceList.js
@@ -20,6 +20,9 @@ import withViewsActions from 'containers/Views/withViewsActions';

 import { compose } from 'utils';

+/**
+ * Invoices list.
+ */
 function InvoiceList({
  // #withDashboardActions
  changePageTitle,
@@ -94,26 +97,8 @@ function InvoiceList({
    selectedRows,
  ]);

-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addInvoiceTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addInvoiceTableQueries],
-  );
-
  // Handle filter change to re-fetch data-table.
-  const handleFilterChanged = useCallback(() => {}, [fetchInvoices]);
+  const handleFilterChanged = useCallback(() => {}, []);

  // Handle selected rows change.
  const handleSelectedRowsChange = useCallback(
@@ -140,14 +125,13 @@ function InvoiceList({
          >
            <InvoiceViewTabs />
            <InvoicesDataTable
-              loading={fetchInvoices.isFetching}
              onDeleteInvoice={handleDeleteInvoice}
-              onFetchData={handleFetchData}
              onEditInvoice={handleEditInvoice}
              onSelectedRowsChange={handleSelectedRowsChange}
            />
          </Route>
        </Switch>
+
        <Alert
          cancelButtonText={<T id={'cancel'} />}
          confirmButtonText={<T id={'delete'} />}
--- a/client/src/containers/Sales/Invoice/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
  Intent,
  Button,
@@ -8,13 +8,12 @@ import {
  MenuDivider,
  Position,
 } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
 import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';

-import { compose } from 'utils';
-import { useUpdateEffect } from 'hooks';
+import { compose, saveInvoke } from 'utils';
+import { useIsValuePassed } from 'hooks';

 import LoadingIndicator from 'components/LoadingIndicator';
 import { DataTable, Money, Icon } from 'components';
@@ -27,66 +26,34 @@ import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
 import withCurrentView from 'containers/Views/withCurrentView';

+// Invoices datatable.
 function InvoicesDataTable({
-  //#withInvoices
+  // #withInvoices
  invoicesCurrentPage,
  invoicesLoading,
  invoicesPageination,
-  invoicesItems,

-  // #withDashboardActions
-  changeCurrentView,
-  changePageSubtitle,
-  setTopbarEditView,
+  // #withInvoicesActions
+  addInvoiceTableQueries,

-  // #withView
-  viewMeta,
-
-  //#OwnProps
-  loading,
-  onFetchData,
+  // #OwnProps
  onEditInvoice,
  onDeleteInvoice,
  onSelectedRowsChange,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
-  const { custom_view_id: customViewId } = useParams();
  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    setInitialMount(false);
-  }, [customViewId]);
-
-  useUpdateEffect(() => {
-    if (!invoicesLoading) {
-      setInitialMount(true);
-    }
-  }, [invoicesLoading, setInitialMount]);
-
-  // useEffect(() => {
-  //   if (customViewId) {
-  //     changeCurrentView(customViewId);
-  //     setTopbarEditView(customViewId);
-  //   }
-  //   changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
-  // }, [
-  //   customViewId,
-  //   changeCurrentView,
-  //   changePageSubtitle,
-  //   setTopbarEditView,
-  //   viewMeta,
-  // ]);
+  const isLoadedBefore = useIsValuePassed(invoicesLoading, false);

  const handleEditInvoice = useCallback(
    (_invoice) => () => {
-      onEditInvoice && onEditInvoice(_invoice);
+      saveInvoke(onEditInvoice, _invoice);
    },
    [onEditInvoice],
  );

  const handleDeleteInvoice = useCallback(
    (_invoice) => () => {
-      onDeleteInvoice && onDeleteInvoice(_invoice);
+      saveInvoke(onDeleteInvoice, _invoice);
    },
    [onDeleteInvoice],
  );
@@ -194,49 +161,54 @@ function InvoicesDataTable({
  );

  const handleDataTableFetchData = useCallback(
-    (...args) => {
-      onFetchData && onFetchData(...args);
+    ({ pageSize, pageIndex, sortBy }) => {
+      addInvoiceTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page: pageIndex + 1,
+      });
    },
-    [onFetchData],
+    [addInvoiceTableQueries],
  );
+
  const handleSelectedRowsChange = useCallback(
    (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
+      saveInvoke(
+        onSelectedRowsChange,
+        selectedRows.map((s) => s.original),
+      );
    },
    [onSelectedRowsChange],
  );

-  const selectionColumn = useMemo(
-    () => ({
-      minWidth: 40,
-      width: 40,
-      maxWidth: 40,
-    }),
-    [],
-  );
-
  return (
-    <div>
-      <LoadingIndicator loading={loading} mount={false}>
-        <DataTable
-          columns={columns}
-          data={invoicesCurrentPage}
-          onFetchData={handleDataTableFetchData}
-          manualSortBy={true}
-          selectionColumn={true}
-          noInitialFetch={true}
-          sticky={true}
-          loading={invoicesLoading && !initialMount}
-          onSelectedRowsChange={handleSelectedRowsChange}
-          rowContextMenu={onRowContextMenu}
-          pagination={true}
-          pagesCount={invoicesPageination.pagesCount}
-          initialPageSize={invoicesPageination.pageSize}
-          initialPageIndex={invoicesPageination.page - 1}
-        />
-      </LoadingIndicator>
-    </div>
+    <LoadingIndicator
+      loading={invoicesLoading && !isLoadedBefore}
+      mount={false}
+    >
+      <DataTable
+        columns={columns}
+        data={invoicesCurrentPage}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+        pagination={true}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        pagesCount={invoicesPageination.pagesCount}
+        initialPageSize={invoicesPageination.pageSize}
+        initialPageIndex={invoicesPageination.page - 1}
+      />
+    </LoadingIndicator>
  );
 }

@@ -247,10 +219,16 @@ export default compose(
  withDashboardActions,
  withInvoiceActions,
  withInvoices(
-    ({ invoicesCurrentPage, invoicesLoading, invoicesPageination }) => ({
+    ({
      invoicesCurrentPage,
      invoicesLoading,
      invoicesPageination,
+      invoicesTableQuery,
+    }) => ({
+      invoicesCurrentPage,
+      invoicesLoading,
+      invoicesPageination,
+      invoicesTableQuery,
    }),
  ),
  withViewDetails(),
--- a/client/src/containers/Sales/Invoice/withInvoiceActions.js
+++ b/client/src/containers/Sales/Invoice/withInvoiceActions.js
@@ -16,19 +16,20 @@ const mapDipatchToProps = (dispatch) => ({
  requestFetchInvoiceTable: (query = {}) =>
    dispatch(fetchInvoicesTable({ query: { ...query } })),
  requestDeleteInvoice: (id) => dispatch(deleteInvoice({ id })),
-  requestFetchDueInvoices: (customerId) => dispatch(fetchDueInvoices({ customerId })),
+  requestFetchDueInvoices: (customerId) =>
+    dispatch(fetchDueInvoices({ customerId })),
  changeInvoiceView: (id) =>
    dispatch({
      type: t.INVOICES_SET_CURRENT_VIEW,
      currentViewId: parseInt(id, 10),
    }),
-  addInvoiceTableQueries: (_queries) =>
+  addInvoiceTableQueries: (queries) =>
    dispatch({
      type: t.INVOICES_TABLE_QUERIES_ADD,
-      _queries,
+      payload: { queries },
    }),
-
-    setInvoiceNumberChanged: (isChanged) => dispatch({
+  setInvoiceNumberChanged: (isChanged) =>
+    dispatch({
      type: t.INVOICE_NUMBER_CHANGED,
      payload: { isChanged },
    }),
--- a/client/src/containers/Sales/Invoice/withInvoices.js
+++ b/client/src/containers/Sales/Invoice/withInvoices.js
@@ -29,7 +29,6 @@ export default (mapState) => {
        state,
        props,
      ),
-
      invoiceNumberChanged: state.salesInvoices.journalNumberChanged,
    };
    return mapState ? mapState(mapped, state, props) : mapped;
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveList.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveList.js
@@ -60,7 +60,7 @@ function PaymentReceiveList({
    () => requestFetchPaymentReceiveTable(),
  );

-  //handle dalete Payment Receive
+  // Handle dalete Payment Receive
  const handleDeletePaymentReceive = useCallback(
    (paymentReceive) => {
      setDeletePaymentReceive(paymentReceive);
@@ -68,12 +68,12 @@ function PaymentReceiveList({
    [setDeletePaymentReceive],
  );

-  // handle cancel Payment Receive
+  // Handle cancel payment Receive.
  const handleCancelPaymentReceiveDelete = useCallback(() => {
    setDeletePaymentReceive(false);
  }, [setDeletePaymentReceive]);

-  // handleConfirm delete payment receive
+  // Handle confirm delete payment receive.
  const handleConfirmPaymentReceiveDelete = useCallback(() => {
    requestDeletePaymentReceive(deletePaymentReceive.id).then(() => {
      AppToaster.show({
@@ -95,24 +95,6 @@ function PaymentReceiveList({
    selectedRows,
  ]);

-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addPaymentReceivesTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addPaymentReceivesTableQueries],
-  );
-
  // Handle filter change to re-fetch data-table.
  const handleFilterChanged = useCallback(() => {}, [fetchPaymentReceives]);

@@ -145,9 +127,7 @@ function PaymentReceiveList({
          >
            <PaymentReceiveViewTabs />
            <PaymentReceivesDataTable
-              loading={fetchPaymentReceives.isFetching}
              onDeletePaymentReceive={handleDeletePaymentReceive}
-              onFetchData={handleFetchData}
              onEditPaymentReceive={handleEditPaymentReceive}
              onSelectedRowsChange={handleSelectedRowsChange}
            />
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js
@@ -1,21 +1,19 @@
-import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
  Intent,
  Button,
-  Classes,
  Popover,
  Menu,
  MenuItem,
  MenuDivider,
  Position,
 } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
 import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';

-import { compose } from 'utils';
-import { useUpdateEffect } from 'hooks';
+import { compose, saveInvoke } from 'utils';
+import { useIsValuePassed } from 'hooks';

 import LoadingIndicator from 'components/LoadingIndicator';
 import { DataTable, Money, Icon } from 'components';
@@ -29,58 +27,26 @@ import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withCurrentView from 'containers/Views/withCurrentView';

 function PaymentReceivesDataTable({
-  //#withPaymentReceives
+  // #withPaymentReceives
  PaymentReceivesCurrentPage,
  paymentReceivesPageination,
  paymentReceivesLoading,
-  paymentReceivesItems,
+  paymentReceivesTableQuery,

-  // #withDashboardActions
-  changeCurrentView,
-  changePageSubtitle,
-  setTopbarEditView,
+  // #withPaymentReceivesActions
+  addPaymentReceivesTableQueries,

-  // #withView
-  viewMeta,
-
-  //#OwnProps
-  loading,
-  onFetchData,
+  // #OwnProps
  onEditPaymentReceive,
  onDeletePaymentReceive,
  onSelectedRowsChange,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
-  const { custom_view_id: customViewId } = useParams();
+  const isLoaded = useIsValuePassed(paymentReceivesLoading, false);
  const { formatMessage } = useIntl();

-  useEffect(() => {
-    setInitialMount(false);
-  }, [customViewId]);
-
-  useUpdateEffect(() => {
-    if (!paymentReceivesLoading) {
-      setInitialMount(true);
-    }
-  }, [paymentReceivesLoading, setInitialMount]);
-
-  // useEffect(() => {
-  //   if (customViewId) {
-  //     changeCurrentView(customViewId);
-  //     setTopbarEditView(customViewId);
-  //   }
-  //   changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
-  // }, [
-  //   customViewId,
-  //   changeCurrentView,
-  //   changePageSubtitle,
-  //   setTopbarEditView,
-  //   viewMeta,
-  // ]);
-
  const handleEditPaymentReceive = useCallback(
    (paymentReceive) => () => {
-      onEditPaymentReceive && onEditPaymentReceive(paymentReceive);
+      saveInvoke(onEditPaymentReceive, paymentReceive);
    },
    [onEditPaymentReceive],
  );
@@ -92,6 +58,32 @@ function PaymentReceivesDataTable({
    [onDeletePaymentReceive],
  );

+  const handleDataTableFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      addPaymentReceivesTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page: pageIndex + 1,
+      });
+    },
+    [addPaymentReceivesTableQueries],
+  );
+
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      saveInvoke(
+        onSelectedRowsChange,
+        selectedRows.map((s) => s.original),
+      );
+    },
+    [onSelectedRowsChange],
+  );
+
  const actionMenuList = useCallback(
    (paymentReceive) => (
      <Menu>
@@ -142,7 +134,8 @@ function PaymentReceivesDataTable({
      {
        id: 'payment_receive_no',
        Header: formatMessage({ id: 'payment_receive_no' }),
-        accessor: (row) => (row.payment_receive_no ? `#${row.payment_receive_no}` : null),
+        accessor: (row) =>
+          row.payment_receive_no ? `#${row.payment_receive_no}` : null,
        width: 140,
        className: 'payment_receive_no',
      },
@@ -186,41 +179,29 @@ function PaymentReceivesDataTable({
    [actionMenuList, formatMessage],
  );

-  const handleDataTableFetchData = useCallback(
-    (...args) => {
-      onFetchData && onFetchData(...args);
-    },
-    [onFetchData],
-  );
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
-    },
-    [onSelectedRowsChange],
-  );
-
  return (
-    <div>
-      <LoadingIndicator loading={loading} mount={false}>
-        <DataTable
-          columns={columns}
-          data={PaymentReceivesCurrentPage}
-          onFetchData={handleDataTableFetchData}
-          manualSortBy={true}
-          selectionColumn={true}
-          noInitialFetch={true}
-          sticky={true}
-          loading={paymentReceivesLoading && !initialMount}
-          onSelectedRowsChange={handleSelectedRowsChange}
-          rowContextMenu={onRowContextMenu}
-          pagination={true}
-          pagesCount={paymentReceivesPageination.pagesCount}
-          initialPageSize={paymentReceivesPageination.pageSize}
-          initialPageIndex={paymentReceivesPageination.page - 1}
-        />
-      </LoadingIndicator>
-    </div>
+    <LoadingIndicator
+      loading={paymentReceivesLoading && !isLoaded}
+      mount={false}
+    >
+      <DataTable
+        columns={columns}
+        data={PaymentReceivesCurrentPage}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+        pagination={true}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        pagesCount={paymentReceivesPageination.pagesCount}
+        initialPageSize={paymentReceivesTableQuery.page_size}
+        initialPageIndex={paymentReceivesTableQuery.page - 1}
+      />
+    </LoadingIndicator>
  );
 }

@@ -235,10 +216,12 @@ export default compose(
      PaymentReceivesCurrentPage,
      paymentReceivesLoading,
      paymentReceivesPageination,
+      paymentReceivesTableQuery
    }) => ({
      PaymentReceivesCurrentPage,
      paymentReceivesLoading,
      paymentReceivesPageination,
+      paymentReceivesTableQuery
    }),
  ),
  withViewDetails(),
--- a/client/src/containers/Sales/PaymentReceive/withPaymentReceives.js
+++ b/client/src/containers/Sales/PaymentReceive/withPaymentReceives.js
@@ -22,7 +22,6 @@ export default (mapState) => {
        query,
      ),
      paymentReceivesLoading: state.paymentReceives.loading,
-
      paymentReceiveNumberChanged: state.paymentReceives.journalNumberChanged,
    };
    return mapState ? mapState(mapped, state, props) : mapped;
--- a/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js
+++ b/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js
@@ -20,16 +20,17 @@ const mapDispatchToProps = (dispatch) => ({

  changePaymentReceiveView: (id) =>
    dispatch({
-      type: t.PAYMENT_RECEIVE_SET_CURRENT_VIEW,
+      type: t.PAYMENT_RECEIVES_SET_CURRENT_VIEW,
      currentViewId: parseInt(id, 10),
    }),

  addPaymentReceivesTableQueries: (queries) =>
    dispatch({
-      type: t.PAYMENT_RECEIVE_TABLE_QUERIES_ADD,
-      queries,
+      type: t.PAYMENT_RECEIVES_TABLE_QUERIES_ADD,
+      payload: { queries }
    }),
-    setPaymentReceiveNumberChanged: (isChanged) =>
+
+  setPaymentReceiveNumberChanged: (isChanged) =>
    dispatch({
      type: t.PAYMENT_RECEIVE_NUMBER_CHANGED,
      payload: { isChanged },
--- a/client/src/containers/Sales/Receipt/ReceiptList.js
+++ b/client/src/containers/Sales/Receipt/ReceiptList.js
@@ -30,7 +30,6 @@ function ReceiptList({

  //#withReceipts
  receiptTableQuery,
-  receiptview,

  //#withReceiptActions
  requestFetchReceiptsTable,
@@ -96,10 +95,8 @@ function ReceiptList({
  //   [fetchReceipt],
  // );

-    // Handle filter change to re-fetch data-table.
-    const handleFilterChanged = useCallback(() => {}, [fetchReceipts]);
-
-
+  // Handle filter change to re-fetch data-table.
+  const handleFilterChanged = useCallback(() => {}, [fetchReceipts]);

  // Calculates the selected rows
  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
@@ -112,23 +109,6 @@ function ReceiptList({
    },
    [history],
  );
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addReceiptsTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addReceiptsTableQueries],
-  );

  const handleSelectedRowsChange = useCallback(
    (estimate) => {
@@ -154,14 +134,13 @@ function ReceiptList({
          >
            <ReceiptViewTabs />
            <ReceiptsDataTable
-              loading={fetchReceipts.isLoading}
              onDeleteReceipt={handleDeleteReceipt}
-              onFetchData={handleFetchData}
              onEditReceipt={handleEditReceipt}
              onSelectedRowsChange={handleSelectedRowsChange}
            />
          </Route>
        </Switch>
+
        <Alert
          cancelButtonText={<T id={'cancel'} />}
          confirmButtonText={<T id={'delete'} />}
--- a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
+++ b/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
  Intent,
  Button,
@@ -8,85 +8,50 @@ import {
  MenuDivider,
  Position,
 } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
 import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';

-import { compose } from 'utils';
-import { useUpdateEffect } from 'hooks';
+import { compose, saveInvoke } from 'utils';
+import { useIsValuePassed } from 'hooks';

-import LoadingIndicator from 'components/LoadingIndicator';
-import { DataTable, Money, Icon } from 'components';
+import { LoadingIndicator, DataTable, Money, Icon } from 'components';

 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withViewDetails from 'containers/Views/withViewDetails';

 import withReceipts from './withReceipts';
 import withReceiptActions from './withReceiptActions';
-import withCurrentView from 'containers/Views/withCurrentView';

 function ReceiptsDataTable({
  //#withReceipts
  receiptsCurrentPage,
  receiptsLoading,
  receiptsPagination,
-  receiptItems,
-  // #withDashboardActions
-  changeCurrentView,
-  changePageSubtitle,
-  setTopbarEditView,
+  receiptTableQuery,

-  // #withView
-  viewMeta,
+  // #withReceiptsActions
+  addReceiptsTableQueries,

  // #Own Props
-
  loading,
-  onFetchData,
  onEditReceipt,
  onDeleteReceipt,
  onSelectedRowsChange,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
-  const { custom_view_id: customViewId } = useParams();
  const { formatMessage } = useIntl();
-
-  useUpdateEffect(() => {
-    if (!receiptsLoading) {
-      setInitialMount(true);
-    }
-  }, [receiptsLoading, setInitialMount]);
-
-  useEffect(() => {
-    setInitialMount(false);
-  }, []);
-
-  useEffect(() => {
-    if (customViewId) {
-      changeCurrentView(customViewId);
-      setTopbarEditView(customViewId);
-    }
-    changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
-  }, [
-    customViewId,
-    changeCurrentView,
-    changePageSubtitle,
-    setTopbarEditView,
-    viewMeta,
-  ]);
+  const isLoadedBefore = useIsValuePassed(receiptsLoading, false);

  const handleEditReceipt = useCallback(
    (receipt) => () => {
-      onEditReceipt && onEditReceipt(receipt);
+      saveInvoke(onEditReceipt, receipt);
    },
    [onEditReceipt],
  );

  const handleDeleteReceipt = useCallback(
    (receipt) => () => {
-      onDeleteReceipt && onDeleteReceipt(receipt);
+      saveInvoke(onDeleteReceipt, receipt);
    },
    [onDeleteReceipt],
  );
@@ -194,50 +159,61 @@ function ReceiptsDataTable({
  );

  const handleDataTableFetchData = useCallback(
-    (...args) => {
-      onFetchData && onFetchData(...args);
+    ({ sortBy, pageIndex, pageSize }) => {
+      const page = pageIndex + 1;
+
+      addReceiptsTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
    },
-    [onFetchData],
+    [addReceiptsTableQueries],
  );

  const handleSelectedRowsChange = useCallback(
    (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
+      saveInvoke(
+        onSelectedRowsChange,
+        selectedRows.map((s) => s.original),
+      );
    },
    [onSelectedRowsChange],
  );

-  console.log(receiptsCurrentPage, 'receiptCurrnetPage');
-  console.log(receiptItems, 'receiptItems');
-
  return (
-    <div>
-      <LoadingIndicator loading={loading} mount={false}>
-        <DataTable
-          columns={columns}
-          data={receiptsCurrentPage}
-          loading={receiptsLoading && !initialMount}
-          onFetchData={handleDataTableFetchData}
-          manualSortBy={true}
-          selectionColumn={true}
-          noInitialFetch={true}
-          sticky={true}
-          onSelectedRowsChange={handleSelectedRowsChange}
-          rowContextMenu={onRowContextMenu}
-          pagination={true}
-          pagesCount={receiptsPagination.pagesCount}
-          initialPageSize={receiptsPagination.pageSize}
-          initialPageIndex={receiptsPagination.page - 1}
-        />
-      </LoadingIndicator>
-    </div>
+    <LoadingIndicator
+      loading={receiptsLoading && !isLoadedBefore}
+      mount={false}
+    >
+      <DataTable
+        columns={columns}
+        data={receiptsCurrentPage}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+        pagination={true}
+        pagesCount={receiptsPagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        initialPageSize={receiptTableQuery.page_size}
+        initialPageIndex={receiptTableQuery.page - 1}
+      />
+    </LoadingIndicator>
  );
 }

 export default compose(
  withRouter,
-  withCurrentView,
  withDialogActions,
  withDashboardActions,
  withReceiptActions,
@@ -246,13 +222,12 @@ export default compose(
      receiptsCurrentPage,
      receiptsLoading,
      receiptsPagination,
-      receiptItems,
+      receiptTableQuery,
    }) => ({
      receiptsCurrentPage,
      receiptsLoading,
      receiptsPagination,
-      receiptItems,
+      receiptTableQuery,
    }),
  ),
-  withViewDetails(),
 )(ReceiptsDataTable);
--- a/client/src/containers/Sales/Receipt/withReceiptActions.js
+++ b/client/src/containers/Sales/Receipt/withReceiptActions.js
@@ -26,7 +26,7 @@ const mapDispatchToProps = (dispatch) => ({
  addReceiptsTableQueries: (queries) =>
    dispatch({
      type: t.RECEIPTS_TABLE_QUERIES_ADD,
-      queries,
+      payload: { queries },
    }),
    setReceiptNumberChanged:(isChanged) => dispatch({
      type: t.RECEIPT_NUMBER_CHANGED,
--- a/client/src/containers/Sales/Receipt/withReceipts.js
+++ b/client/src/containers/Sales/Receipt/withReceipts.js
@@ -22,7 +22,6 @@ export default (mapState) => {
      receiptsPagination: getReceiptPaginationMeta(state, props, tableQuery),

      receiptsLoading: state.salesReceipts.loading,
-      
      receiptNumberChanged: state.salesReceipts.journalNumberChanged,
    };