feat: datatables pagination.

client/src/containers/Purchases/Bill/BillList.js

@@ -90,23 +90,7 @@ function BillList({
     history.push(`/bills/${bill.id}/edit`);
   });
 
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addBillsTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addBillsTableQueries],
-  );
+  
 
   // Handle selected rows change.
   const handleSelectedRowsChange = useCallback(
@@ -141,9 +125,7 @@ function BillList({
           <Route exact={true}>
             <BillViewTabs />
             <BillsDataTable
-              loading={fetchBills.isFetching}
               onDeleteBill={handleDeleteBill}
-              onFetchData={handleFetchData}
               onEditBill={handleEditBill}
               onSelectedRowsChange={handleSelectedRowsChange}
             />

client/src/containers/Purchases/Bill/BillsDataTable.js

@@ -16,8 +16,8 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
 
 import Icon from 'components/Icon';
-import { compose } from 'utils';
-import { useUpdateEffect } from 'hooks';
+import { compose, saveInvoke } from 'utils';
+import { useIsValuePassed } from 'hooks';
 
 import LoadingIndicator from 'components/LoadingIndicator';
 import DataTable from 'components/DataTable';
@@ -41,29 +41,22 @@ function BillsDataTable({
   changePageSubtitle,
   setTopbarEditView,
 
+  // #withBillsActions
+  addBillsTableQueries,
+
   // #withView
   viewMeta,
 
-  //#OwnProps
+  // #ownProps
   loading,
   onFetchData,
   onEditBill,
   onDeleteBill,
   onSelectedRowsChange,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
   const { custom_view_id: customViewId } = useParams();
   const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    setInitialMount(false);
-  }, [customViewId]);
-
-  useUpdateEffect(() => {
-    if (!billsLoading) {
-      setInitialMount(true);
-    }
-  }, [billsLoading, setInitialMount]);
+  const isLoadedBefore = useIsValuePassed(billsLoading, false);
 
   useEffect(() => {
     if (customViewId) {
@@ -79,16 +72,34 @@ function BillsDataTable({
     viewMeta,
   ]);
 
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+
+      addBillsTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
+    },
+    [addBillsTableQueries],
+  );
+
   const handleEditBill = useCallback(
     (_bill) => () => {
-      onEditBill && onEditBill(_bill);
+      saveInvoke(onEditBill, _bill);
     },
     [onEditBill],
   );
 
   const handleDeleteBill = useCallback(
     (_bill) => () => {
-      onDeleteBill && onDeleteBill(_bill);
+      saveInvoke(onDeleteBill, _bill);
     },
     [onDeleteBill],
   );
@@ -147,7 +158,6 @@ function BillsDataTable({
         width: 140,
         className: 'bill_number',
       },
-
       {
         id: 'due_date',
         Header: formatMessage({ id: 'due_date' }),
@@ -195,41 +205,34 @@ function BillsDataTable({
     [actionMenuList, formatMessage],
   );
 
-  const handleDataTableFetchData = useCallback(
-    (...args) => {
-      onFetchData && onFetchData(...args);
-    },
-    [onFetchData],
-  );
   const handleSelectedRowsChange = useCallback(
     (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
+      saveInvoke(
+        onSelectedRowsChange,
+        selectedRows.map((s) => s.original),
+      );
     },
     [onSelectedRowsChange],
   );
 
   return (
-    <div>
-      <LoadingIndicator loading={loading} mount={false}>
-        <DataTable
-          columns={columns}
-          data={billsCurrentPage}
-          onFetchData={handleDataTableFetchData}
-          manualSortBy={true}
-          selectionColumn={true}
-          noInitialFetch={true}
-          sticky={true}
-          loading={billsLoading && !initialMount}
-          onSelectedRowsChange={handleSelectedRowsChange}
-          rowContextMenu={onRowContextMenu}
-          pagination={true}
-          pagesCount={billsPageination.pagesCount}
-          initialPageSize={billsPageination.pageSize}
-          initialPageIndex={billsPageination.page - 1}
-        />
-      </LoadingIndicator>
-    </div>
+    <LoadingIndicator loading={billsLoading && !isLoadedBefore} mount={false}>
+      <DataTable
+        columns={columns}
+        data={billsCurrentPage}
+        onFetchData={handleFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+        pagination={true}
+        pagesCount={billsPageination.pagesCount}
+        initialPageSize={billsPageination.pageSize}
+        initialPageIndex={billsPageination.page - 1}
+      />
+    </LoadingIndicator>
   );
 }
 
@@ -239,10 +242,18 @@ export default compose(
   withDialogActions,
   withDashboardActions,
   withBillActions,
-  withBills(({ billsCurrentPage, billsLoading, billsPageination }) => ({
-    billsCurrentPage,
-    billsLoading,
-    billsPageination,
-  })),
+  withBills(
+    ({
+      billsCurrentPage,
+      billsLoading,
+      billsPageination,
+      billsTableQuery,
+    }) => ({
+      billsCurrentPage,
+      billsLoading,
+      billsPageination,
+      billsTableQuery,
+    }),
+  ),
   withViewDetails(),
 )(BillsDataTable);

client/src/containers/Purchases/Bill/withBillActions.js

@@ -27,7 +27,7 @@ const mapDispatchToProps = (dispatch) => ({
   addBillsTableQueries: (queries) =>
     dispatch({
       type: t.BILLS_TABLE_QUERIES_ADD,
-      queries,
+      payload: { queries }
     }),
   setBillNumberChanged: (isChanged) =>
     dispatch({

client/src/containers/Purchases/PaymentMades/PaymentMadeDataTable.js

@@ -1,81 +1,58 @@
-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';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withViewDetails from 'containers/Views/withViewDetails';
-
 import withPaymentMade from './withPaymentMade';
 import withPaymentMadeActions from './withPaymentMadeActions';
 import withCurrentView from 'containers/Views/withCurrentView';
 
+/**
+ * Payment made datatable transactions.
+ */
 function PaymentMadeDataTable({
-  //#withPaymentMades
+  // #withPaymentMades
   paymentMadeCurrentPage,
   paymentMadePageination,
-  paymentMadeLoading,
-  paymentMadeItems,
+  paymentMadesLoading,
+  paymentMadeTableQuery,
 
-  // #withDashboardActions
-  changeCurrentView,
-  changePageSubtitle,
-  setTopbarEditView,
+  // #withPaymentMadeActions
+  addPaymentMadesTableQueries,
 
-  // #withView
-  viewMeta,
-
-  //#OwnProps
-  loading,
-  onFetchData,
+  // #ownProps
   onEditPaymentMade,
   onDeletePaymentMade,
   onSelectedRowsChange,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
-  const { custom_view_id: customViewId } = useParams();
+  const isLoaded = useIsValuePassed(paymentMadesLoading, false);
   const { formatMessage } = useIntl();
 
-  useEffect(() => {
-    setInitialMount(false);
-  }, [customViewId]);
-
-  useUpdateEffect(() => {
-    if (!paymentMadeLoading) {
-      setInitialMount(true);
-    }
-  }, [paymentMadeLoading, setInitialMount]);
-
-
-
   const handleEditPaymentMade = useCallback(
     (paymentMade) => () => {
-      onEditPaymentMade && onEditPaymentMade(paymentMade);
+      saveInvoke(onEditPaymentMade, paymentMade);
     },
     [onEditPaymentMade],
   );
 
   const handleDeletePaymentMade = useCallback(
     (paymentMade) => () => {
-      onDeletePaymentMade && onDeletePaymentMade(paymentMade);
+      saveInvoke(onDeletePaymentMade, paymentMade);
     },
     [onDeletePaymentMade],
   );
@@ -89,7 +66,7 @@ function PaymentMadeDataTable({
         />
         <MenuDivider />
         <MenuItem
-             icon={<Icon icon="pen-18" />}
+          icon={<Icon icon="pen-18" />}
           text={formatMessage({ id: 'edit_payment_made' })}
           onClick={handleEditPaymentMade(paymentMade)}
         />
@@ -176,59 +153,69 @@ function PaymentMadeDataTable({
   );
 
   const handleDataTableFetchData = useCallback(
-    (...args) => {
-      onFetchData && onFetchData(...args);
+    ({ pageIndex, pageSize, sortBy }) => {
+      addPaymentMadesTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page: pageIndex + 1,
+      });
     },
-    [onFetchData],
+    [addPaymentMadesTableQueries],
   );
+
   const handleSelectedRowsChange = useCallback(
     (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
+      saveInvoke(
+        onSelectedRowsChange,
+        selectedRows.map((s) => s.original),
+      );
     },
     [onSelectedRowsChange],
   );
 
   return (
-    <div>
-      <LoadingIndicator loading={loading} mount={false}>
-        <DataTable
-          columns={columns}
-          data={paymentMadeCurrentPage}
-          onFetchData={handleDataTableFetchData}
-          manualSortBy={true}
-          selectionColumn={true}
-          noInitialFetch={true}
-          sticky={true}
-          loading={paymentMadeLoading && !initialMount}
-          onSelectedRowsChange={handleSelectedRowsChange}
-          rowContextMenu={onRowContextMenu}
-          pagination={true}
-          pagesCount={paymentMadePageination.pagesCount}
-          initialPageSize={paymentMadePageination.pageSize}
-          initialPageIndex={paymentMadePageination.page - 1}
-        />
-      </LoadingIndicator>
-    </div>
+    <LoadingIndicator loading={paymentMadesLoading && !isLoaded} mount={false}>
+      <DataTable
+        columns={columns}
+        data={paymentMadeCurrentPage}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+        pagination={true}
+        pagesCount={paymentMadePageination.pagesCount}
+        initialPageSize={paymentMadeTableQuery.page_size}
+        initialPageIndex={paymentMadeTableQuery.page - 1}
+        autoResetSortBy={false}
+        autoResetPage={false}
+      />
+    </LoadingIndicator>
   );
 }
 
 export default compose(
   withRouter,
   withCurrentView,
-  withDialogActions,
-  withDashboardActions,
   withPaymentMadeActions,
   withPaymentMade(
     ({
       paymentMadeCurrentPage,
-      paymentMadeLoading,
+      paymentMadesLoading,
       paymentMadePageination,
+      paymentMadeTableQuery,
     }) => ({
       paymentMadeCurrentPage,
-      paymentMadeLoading,
+      paymentMadesLoading,
       paymentMadePageination,
+      paymentMadeTableQuery,
     }),
   ),
-  withViewDetails(),
 )(PaymentMadeDataTable);

client/src/containers/Purchases/PaymentMades/PaymentMadeList.js

@@ -95,24 +95,6 @@ function PaymentMadeList({
     selectedRows,
   ]);
 
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addPaymentMadesTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addPaymentMadesTableQueries],
-  );
-
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, [fetchPaymentMades]);
 
@@ -145,14 +127,13 @@ function PaymentMadeList({
           >
             <PaymentMadeViewTabs />
             <PaymentMadeDataTable
-              loading={fetchPaymentMades.isFetching}
               onDeletePaymentMade={handleDeletePaymentMade}
-              onFetchData={handleFetchData}
               onEditPaymentMade={handleEditPaymentMade}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
         </Switch>
+
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'delete'} />}

client/src/containers/Purchases/PaymentMades/withPaymentMadeActions.js

@@ -27,8 +27,8 @@ const mapDispatchToProps = (dispatch) => ({
 
   addPaymentMadesTableQueries: (queries) =>
     dispatch({
-      type: t.PAYMENT_MADE_TABLE_QUERIES_ADD,
-      queries,
+      type: t.PAYMENT_MADES_TABLE_QUERIES_ADD,
+      payload: { queries },
     }),
   setPaymentNumberChange: (isChanged) =>
     dispatch({